:root {
  --ink: #17211d;
  --muted: #61706a;
  --line: #d6dfda;
  --paper: #ffffff;
  --wash: #f6f8f7;
  --body: #eef2f0;
  --field: #ffffff;
  --subtle: #f8faf9;
  --raised: #f1f5f3;
  --button: #f0f4f2;
  --button-active: #dff1ec;
  --accent: #0f8f7a;
  --accent-dark: #086b5d;
  --gold: #a66f1b;
  --danger: #b42318;
  --sidebar: #1d252b;
  --sidebar-line: #2c3740;
  --sidebar-ink: #edf3f1;
  --sidebar-muted: #a8b4b0;
  --sidebar-active: #38b990;
  --radius: 8px;
  --shadow: 0 18px 44px rgba(23, 33, 29, 0.1);
  --soft-shadow: 0 2px 10px rgba(23, 33, 29, 0.055);
  --panel-shadow: 0 10px 28px rgba(23, 33, 29, 0.07);
  --button-shadow: 0 1px 2px rgba(24, 35, 31, 0.08);
  --focus-ring: 0 0 0 3px rgba(15, 143, 122, 0.16);
}

/* V4.73 command exception cards: readable hierarchy without overlapping pills or actions. */
body .command-work-content .needs-review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
  align-items: stretch;
  border-left: 3px solid color-mix(in srgb, var(--danger) 72%, var(--line)) !important;
  padding: 12px !important;
  overflow: visible;
}

body .command-work-content .needs-review-card-header {
  display: grid;
  grid-template-columns: auto minmax(210px, .9fr) minmax(280px, 1.45fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

body .command-work-content .needs-review-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body .command-work-content .needs-review-identity strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body .command-work-content .needs-review-identity span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

body .command-work-content .needs-review-issues {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

body .command-work-content .needs-review-issues .issue-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.25 !important;
  text-transform: none;
  white-space: normal;
}

body .command-work-content .needs-review-issues .issue-chip span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

body .command-work-content .needs-review-issues .issue-chip b {
  align-self: center;
  border-left: 1px solid currentColor;
  padding-left: 9px;
}

body .command-work-content .needs-review-card > .audit-line-editor-list,
body .command-work-content .needs-review-card > .invoice-exception-editor { grid-column: 1; }

body .command-work-content .needs-review-card .invoice-exception-editor {
  border-radius: 9px;
  background: color-mix(in srgb, var(--raised) 65%, var(--paper));
}

body .command-work-content .needs-review-card .invoice-exception-editor > summary { padding: 8px 10px; }

body .command-work-content .audit-line-editor {
  grid-template-columns: 60px repeat(10, minmax(0, 1fr));
  gap: 7px 8px;
  align-items: end;
  padding: 10px;
}

body .command-work-content .audit-line-editor > strong { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
body .command-work-content .audit-line-item { grid-column: 2 / span 4; grid-row: 1; }
body .command-work-content .audit-line-code { grid-column: 6 / span 2; grid-row: 1; }
body .command-work-content .audit-line-category { grid-column: 8 / span 3; grid-row: 1; }
body .command-work-content .audit-line-editor > [data-audit-line-save] { grid-column: 11; grid-row: 1; min-width: 90px; }
body .command-work-content .audit-line-qty { grid-column: 2 / span 2; grid-row: 2; }
body .command-work-content .audit-line-unit { grid-column: 4 / span 2; grid-row: 2; }
body .command-work-content .audit-line-price { grid-column: 6 / span 2; grid-row: 2; }
body .command-work-content .audit-line-total { grid-column: 8 / span 2; grid-row: 2; }

@media (max-width: 980px) {
  body .command-work-content .needs-review-card-header { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  body .command-work-content .needs-review-issues { grid-column: 2 / -1; }
  body .command-work-content .audit-line-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .command-work-content .audit-line-editor > * { grid-column: auto !important; grid-row: auto !important; }
  body .command-work-content .audit-line-editor > strong,
  body .command-work-content .audit-line-editor > [data-audit-line-save] { grid-column: 1 / -1 !important; }
}

@media (max-width: 620px) {
  body .command-work-content .needs-review-card-header { grid-template-columns: auto minmax(0, 1fr); }
  body .command-work-content .needs-review-actions,
  body .command-work-content .needs-review-issues { grid-column: 1 / -1; }
  body .command-work-content .needs-review-actions { display: grid; grid-template-columns: 1fr 1fr; }
  body .command-work-content .audit-line-editor { grid-template-columns: minmax(0, 1fr); }
}

/* Universal invoice review center. */
.bulk-page-board { margin: 12px 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); }
.bulk-page-board-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bulk-page-board-heading strong, .bulk-page-board-heading span { display: block; }
.bulk-page-board-heading > span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.bulk-page-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.bulk-page-board-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-left: 4px solid var(--warning); border-radius: 9px; background: var(--surface); }
.bulk-page-board-card.is-completed { border-left-color: var(--accent); opacity: .82; }
.bulk-page-board-card.is-ready { border-left-color: var(--success); }
.bulk-page-board-preview { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 0 0 7px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); background: transparent; text-align: left; }
.bulk-page-board-preview span { font-weight: 850; }
.bulk-page-board-preview small, .bulk-page-board-card > div small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.bulk-page-board-card > div { min-width: 0; }
.bulk-page-board-card > div strong { display: block; font-size: .78rem; }
.bulk-page-board-lock { padding: 5px 8px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .7rem; font-weight: 850; }
@media (max-width: 680px) { .bulk-page-board-heading { align-items: flex-start; flex-direction: column; } .bulk-page-board-grid { grid-template-columns: 1fr; } }

/* Universal invoice review center. */
body .invoice-review-center-backdrop {
  z-index: 24000 !important;
  padding: clamp(10px, 2vw, 26px);
  background: rgba(15, 23, 20, .68);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body .modal.invoice-review-center-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1240px, calc(100vw - 36px)) !important;
  max-width: 1240px !important;
  height: min(880px, calc(100dvh - 36px)) !important;
  max-height: 880px !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: var(--paper) !important;
  box-shadow: 0 32px 90px rgba(8, 20, 15, .3) !important;
}

body .invoice-review-center-header {
  margin: 0 !important;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px !important;
  background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--paper) 92%, var(--body)));
}

body .invoice-review-center-header h2 { margin: 2px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 2vw, 28px); }
body .invoice-review-center-header .hint { max-width: 850px; margin: 0; }

body .invoice-review-center-issues {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  background: color-mix(in srgb, var(--paper) 92%, var(--body));
}

body .invoice-review-center-issues button {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  max-width: 245px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

body .invoice-review-center-issues button small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
body .invoice-review-center-issues button.is-active { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 11%, var(--paper)); box-shadow: inset 0 -2px 0 var(--accent); }

body .invoice-review-center-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(14px, 2vw, 22px);
  background: color-mix(in srgb, var(--body) 82%, var(--paper));
}

body .review-center-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr); gap: 20px; }
body .review-center-main,
body .review-center-side,
body .review-center-stack { display: grid; align-content: start; gap: 14px; min-width: 0; }

body .review-center-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
body .review-center-field input { width: 100%; min-height: 42px; border: 2px solid color-mix(in srgb, var(--accent) 66%, var(--line)); border-radius: 9px; padding: 8px 10px; color: var(--ink); background: var(--paper); font: inherit; font-size: 15px; font-weight: 800; }
body .review-center-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
body .review-center-section-heading > div { display: grid; gap: 2px; }
body .review-center-section-heading small,
body .review-center-section-heading > span { color: var(--muted); font-size: 11px; }

body .review-center-choice-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
body .review-center-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 12px; color: var(--ink); background: var(--paper); }
body .review-center-choice > span { display: grid; gap: 2px; min-width: 0; }
body .review-center-choice small,
body .review-center-choice em { color: var(--muted); font-size: 11px; font-style: normal; }

body .review-center-impact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
body .review-center-impact > div { display: grid; gap: 2px; padding: 12px; background: var(--paper); }
body .review-center-impact > div strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
body .review-center-impact > div span { color: var(--muted); font-size: 11px; }
body .review-center-switch { display: flex; align-items: flex-start; gap: 9px; }
body .review-center-switch > span { display: grid; gap: 2px; }
body .review-center-switch small { color: var(--muted); font-size: 11px; }
body .review-center-assurance,
body .review-center-guidance { margin: 0; border-radius: 9px; padding: 11px 12px; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
body .review-center-guidance { display: grid; gap: 2px; }
body .review-center-guidance span { color: var(--muted); font-size: 12px; }

body .review-center-identity-row,
body .review-center-duplicate,
body .review-center-header-editor { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: var(--paper); box-shadow: var(--soft-shadow); }
body .review-center-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body .review-center-compare > label { display: grid; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: var(--subtle); }
body .review-center-compare span,
body .review-center-compare small { color: var(--muted); font-size: 11px; }
body .review-center-compare strong { overflow-wrap: anywhere; }
body .review-center-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body .review-center-header-editor .invoice-exception-fields { padding: 0; }

body .invoice-review-center-content .audit-line-editor { grid-template-columns: 58px minmax(180px, 1.4fr) minmax(90px, .7fr) minmax(72px, .45fr) minmax(82px, .55fr) minmax(96px, .65fr) minmax(90px, .6fr) minmax(120px, .8fr) auto; }

body .invoice-review-center-footer { justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 11px 16px !important; background: var(--paper); }
body .invoice-review-center-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
body.invoice-review-center-open { overflow: hidden; }
body.invoice-review-center-open #invoicePreviewModal:not([hidden]),
body.invoice-review-center-open #invoiceDetailModal:not([hidden]) { z-index: 25000 !important; }

@media (max-width: 900px) {
  body .review-center-layout { grid-template-columns: minmax(0, 1fr); }
  body .invoice-review-center-content .audit-line-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .invoice-review-center-content .audit-line-editor > strong,
  body .invoice-review-center-content .audit-line-editor > button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body .invoice-review-center-backdrop { padding: 0; }
  body .modal.invoice-review-center-modal { width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; }
  body .review-center-compare,
  body .invoice-review-center-content .audit-line-editor,
  body .review-center-header-impact { grid-template-columns: minmax(0, 1fr); }
  body .invoice-review-center-footer { align-items: stretch; flex-direction: column; }
  body .invoice-review-center-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Invoice save learning review */
.invoice-assist-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.invoice-assist-banner > div:first-child { display: grid; gap: 2px; }
.invoice-assist-banner small { color: var(--muted); }
.invoice-assist-banner.is-help-requested { border-color: color-mix(in srgb, var(--gold) 62%, var(--line)); background: color-mix(in srgb, var(--gold) 11%, var(--paper)); }
.invoice-assist-banner.is-remote-editing { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 13%, var(--paper)); }
.invoice-assist-banner.is-helping { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); }
.invoice-assist-readonly .invoice-header-grid,
.invoice-assist-readonly .invoice-review-workspace,
.invoice-assist-readonly .invoice-line-filter-bar,
.invoice-assist-readonly .invoice-learning-panel { opacity: .72; }
.invoice-help-queue { display: grid; gap: 10px; margin: 0 0 16px; }
.invoice-help-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--gold) 62%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--gold) 10%, var(--paper)); }
.invoice-help-card > div:first-child { display: grid; gap: 3px; }
.invoice-help-card p { margin: 4px 0 0; color: var(--muted); }
.invoice-help-card small { color: var(--muted); }
.invoice-help-request-modal { width: min(560px, calc(100vw - 28px)); }
.invoice-help-request-modal > label { display: grid; gap: 7px; margin: 18px 0 8px; font-weight: 750; }
.invoice-help-request-modal textarea { min-height: 110px; resize: vertical; }
.invoice-remote-editor-pill { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; border-radius: 999px; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 13%, var(--paper)); font-size: .72rem; font-weight: 800; }
.invoice-save-learning-backdrop { z-index: 1320; padding: clamp(14px, 3vw, 34px); }
.invoice-save-learning-modal { width: min(760px, calc(100vw - 28px)); max-width: 760px; max-height: min(860px, calc(100vh - 28px)); overflow: auto; padding: 0; }
.invoice-save-learning-heading,
.invoice-learning-fix-picker .panel-header { padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
.invoice-save-learning-heading h2,
.invoice-learning-fix-picker h2 { margin: 2px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 2.4vw, 2rem); }
.invoice-save-learning-summary { display: grid; grid-template-columns: 1.35fr .9fr .65fr; gap: 1px; margin: 20px 26px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.invoice-save-learning-summary > div { min-width: 0; padding: 13px 15px; background: var(--subtle); }
.invoice-save-learning-summary small { display: block; color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.invoice-save-learning-summary strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.invoice-save-issue-summary { margin: 14px 26px 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.invoice-save-issue-summary strong { display: block; color: var(--danger); }
.invoice-save-issue-summary ul { margin: 9px 0; padding-left: 20px; }
.invoice-save-issue-summary li { margin: 5px 0; }
.invoice-save-issue-summary small { color: var(--muted); }
.invoice-save-learning-assurance { display: grid; gap: 2px; margin: 16px 26px 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 13%, var(--paper)); }
.invoice-save-learning-assurance span,
.invoice-save-learning-choice span,
.invoice-learning-history-option small { color: var(--muted); font-size: .78rem; }
.invoice-save-learning-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 17px 26px 10px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--subtle); }
.invoice-save-learning-choice input,
.invoice-learning-fix-row input,
.invoice-learning-history-option input { width: 18px; height: 18px; accent-color: var(--accent, #2f6b5d); }
.invoice-save-learning-choice label,
.invoice-learning-history-option span { display: grid; gap: 2px; }
.invoice-save-learning-decision { margin: 8px 26px 18px; padding: 10px 13px; border-left: 3px solid var(--accent); background: var(--subtle); color: var(--muted); }
.invoice-save-learning-decision strong { color: var(--ink); }
.invoice-save-learning-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid var(--line); }
.invoice-learning-fix-picker-layer { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: clamp(12px, 3vw, 34px); background: rgba(15, 24, 20, .56); backdrop-filter: blur(2px); }
.invoice-learning-fix-picker-layer[hidden] { display: none; }
.invoice-learning-fix-picker { width: min(700px, calc(100vw - 28px)); max-width: 700px; max-height: min(820px, calc(100vh - 28px)); overflow: auto; padding: 0; }
.invoice-learning-fix-list { padding: 8px 24px 4px; }
.invoice-learning-fix-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.invoice-learning-fix-row:last-child { border-bottom: 0; }
.invoice-learning-fix-row > span:not(.status-pill) { display: grid; gap: 3px; }
.invoice-learning-fix-row small { color: var(--muted); overflow-wrap: anywhere; }
.invoice-learning-fix-row .status-pill { white-space: nowrap; }
.invoice-learning-history-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px; margin: 8px 24px 18px; padding: 12px 13px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 12%, var(--paper)); }
.invoice-learning-picker-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 9px; padding: 15px 24px 20px; border-top: 1px solid var(--line); }
html.dark-mode .invoice-save-learning-modal,
html.dark-mode .invoice-learning-fix-picker { background: var(--paper); color: var(--ink); }

@media (max-width: 680px) {
  .invoice-assist-banner,
  .invoice-help-card { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .invoice-assist-banner .button-row,
  .invoice-help-card .button-row { width: 100%; }
  .invoice-assist-banner .button-row button,
  .invoice-help-card .button-row button { flex: 1; }
  .invoice-save-learning-backdrop,
  .invoice-learning-fix-picker-layer { padding: 8px; }
  .invoice-save-learning-modal,
  .invoice-learning-fix-picker { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .invoice-save-learning-heading,
  .invoice-learning-fix-picker .panel-header { padding: 18px; }
  .invoice-save-learning-summary { grid-template-columns: 1fr; margin-inline: 18px; }
  .invoice-save-learning-assurance,
  .invoice-save-learning-choice,
  .invoice-save-learning-decision { margin-inline: 18px; }
  .invoice-save-learning-choice { grid-template-columns: auto minmax(0, 1fr); }
  .invoice-save-learning-choice button { grid-column: 2; justify-self: start; }
  .invoice-save-learning-actions,
  .invoice-learning-picker-actions { grid-template-columns: 1fr 1fr; padding-inline: 18px; }
  .invoice-save-learning-actions .hint,
  .invoice-learning-picker-actions .hint,
  .invoice-learning-picker-actions .primary-button { grid-column: 1 / -1; }
  .invoice-learning-fix-list { padding-inline: 18px; }
  .invoice-learning-fix-row { grid-template-columns: auto minmax(0, 1fr); }
  .invoice-learning-fix-row .status-pill { grid-column: 2; justify-self: start; }
}

/* V5.02: invoice intake stays compact; source evidence opens only on demand. */
#invoice .intake-grid {
  display: block;
}

#invoice .intake-grid > .panel {
  width: 100%;
  min-height: 0;
}

#invoice .invoice-direction-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--raised);
}

#invoice .invoice-direction-card {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

#invoice .invoice-direction-card span,
#invoice .invoice-direction-card strong { font-size: 12px; }
#invoice .invoice-direction-card span { color: var(--muted); }
#invoice .invoice-direction-card small { display: none; }
#invoice .invoice-direction-card.is-active { background: var(--paper); box-shadow: var(--soft-shadow); }

#invoice .invoice-workflow-strip {
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
}

#invoice .invoice-workflow-strip article {
  min-height: 30px;
  padding: 5px 7px;
  gap: 6px;
}

#invoice .invoice-workflow-strip article > span { width: 20px; height: 20px; font-size: 10px; }
#invoice .invoice-workflow-strip article strong { font-size: 11px; }
#invoice .invoice-workflow-strip article small { display: none; }

#invoice .invoice-guided-flow {
  min-height: 0;
  padding: 10px 12px;
}

#invoice .invoice-guided-copy { gap: 1px; }
#invoice .invoice-guided-copy strong { font-size: 18px; }
#invoice .invoice-guided-copy small { font-size: 11px; }

#invoice .drop-zone {
  min-height: 92px;
  padding: 16px;
}

#invoice #extractStatus { margin: 8px 0 0; padding: 8px 10px; }

.invoice-source-tools-modal {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

.invoice-source-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: 14px;
  padding: 0 18px 18px;
}

.invoice-source-page-column { display: grid; gap: 10px; min-width: 0; }
.invoice-source-tools-modal #preview {
  display: flex;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
}
.invoice-source-tools-modal .invoice-work-page-preview-stage { min-height: 360px; max-height: 58vh; }
.invoice-source-tools-modal .manual-invoice-fallback { align-self: start; }

@media (max-width: 760px) {
  #invoice .invoice-direction-switch { overflow-x: auto; justify-content: flex-start; }
  #invoice .invoice-direction-card { flex: 0 0 auto; }
  #invoice .invoice-direction-card span { display: none; }
  #invoice .invoice-workflow-strip article strong { display: none; }
  .invoice-source-tools-modal { width: 100vw; max-height: 100dvh; }
  .invoice-source-tools-grid { grid-template-columns: 1fr; padding: 0 12px 12px; }
  .invoice-source-tools-modal .invoice-work-page-preview-stage { min-height: 52dvh; }
}

/* V4.37 focused invoice review: compact summaries with total and pack editing always available. */
body #invoice .invoice-line-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 76%, var(--paper));
}

body #invoice .invoice-line-filter-bar > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

body #invoice .invoice-line-filter-bar button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
}

body #invoice .invoice-line-filter-bar button.is-active {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

body #invoice .invoice-line-filter-bar button span {
  display: inline-grid;
  min-width: 20px;
  min-height: 20px;
  margin-left: 3px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 10px;
}

body #invoice .invoice-line-filter-bar small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

body #invoice .invoice-line-table {
  min-width: 1140px;
}

body #invoice .invoice-col-item { width: 292px; }
body #invoice .invoice-col-costing { width: 270px; }
body #invoice .invoice-col-category { width: 116px; }
body #invoice .invoice-col-status { width: 116px; }
body #invoice .invoice-col-actions { width: 108px; }

body #invoice .invoice-line-table tbody tr.is-line-compact:not(.is-line-expanded) td {
  height: 50px !important;
  padding: 4px 5px !important;
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) input[readonly],
body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) select:disabled {
  border-color: transparent !important;
  padding-inline: 3px !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ink);
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .item-cell > input:first-child {
  height: 23px !important;
  min-height: 23px !important;
  font-weight: 850;
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .item-code-input {
  width: fit-content;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted);
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .invoice-description-reference {
  overflow: hidden;
  max-width: 270px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .money-cell [data-field="unitPrice"],
body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .money-cell [data-field="total"] {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
  padding-inline: 7px !important;
  background: var(--paper) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent) !important;
}

body #invoice .invoice-line-table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

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

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .package-preview {
  position: relative;
  min-height: 34px !important;
  padding-right: 26px !important;
  cursor: pointer;
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .package-preview::after {
  content: "✎";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

body #invoice .invoice-line-table tr.is-line-compact:not(.is-line-expanded) .line-action-cell .icon-button {
  display: none !important;
}

body #invoice .invoice-line-table .line-edit-button {
  min-width: 50px;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 8px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
}

body #invoice .invoice-line-table tr.is-line-expanded td {
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

body #invoice .invoice-line-table tr.is-line-expanded .line-edit-button {
  border-color: var(--accent);
  color: var(--accent-contrast, #fff);
  background: var(--accent);
}

body #invoice .invoice-line-table .line-action-cell[data-issue]:not([data-issue=""])::before {
  overflow: hidden;
  max-width: 104px;
  margin: 0 0 3px;
  border-radius: 999px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--danger, #be5342) 12%, var(--paper));
  white-space: nowrap;
  text-overflow: ellipsis;
}

body #invoice .invoice-line-table tr[hidden] {
  display: none !important;
}

body #invoice .invoice-identity-verification {
  display: none;
  gap: 5px;
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 7%, var(--paper));
  font-size: 10px;
  line-height: 1.3;
}

body #invoice tr.is-line-expanded .invoice-identity-verification {
  display: grid;
}

body #invoice .invoice-identity-verification > span {
  overflow-wrap: anywhere;
  color: var(--muted);
}

body #invoice .invoice-identity-verification > div {
  display: grid;
  gap: 5px;
}

body #invoice .invoice-identity-verification button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-weight: 800;
  text-align: left;
}

body #invoice .invoice-identity-verification button:last-child {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--accent-dark);
}

@media (max-width: 760px) {
  body #invoice .invoice-line-filter-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  body #invoice .invoice-line-filter-bar > div {
    width: 100%;
  }

  body #invoice .invoice-line-filter-bar button {
    flex: 1;
  }
}

/* Toast ZIP review must sit above task workspaces and use the available screen. */
body .sales-preflight-backdrop {
  z-index: 24000 !important;
  padding: clamp(8px, 2vw, 24px) !important;
  isolation: isolate;
  background: rgba(15, 23, 20, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body .sales-preflight-modal {
  position: relative;
  z-index: 1;
  width: min(1040px, 96vw) !important;
  max-width: none !important;
  max-height: calc(100dvh - clamp(16px, 4vw, 48px)) !important;
  overflow: auto !important;
}

@media (max-width: 720px) {
  body .sales-preflight-backdrop { place-items: stretch !important; padding: 0 !important; }
  body .sales-preflight-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    padding: 12px !important;
  }
}

/* V5.23: one linear invoice task at a time. Recovery stays available without
   competing with the current action. */
#invoice .invoice-guided-flow { margin-top: 10px; }
#invoice .invoice-direction-switch { margin-bottom: 8px; }
#invoice .invoice-direction-card { padding-block: 9px; }
.invoice-page-assignment-details { margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
.invoice-page-assignment-details > summary { padding: 10px 12px; color: var(--text); font-weight: 850; cursor: pointer; }
.invoice-page-assignment-details > .bulk-page-board { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.invoice-confirm-header .bulk-queue-header-actions { flex-wrap: nowrap; }
#invoice[data-intake-stage="review"] #invoiceDraftsPanel,
#invoice[data-intake-stage="finish"] #invoiceDraftsPanel,
#invoice[data-intake-stage="organize"] #invoiceDraftsPanel,
#invoice[data-intake-stage="reading"] #invoiceDraftsPanel { display: none !important; }
@media (max-width: 720px) {
  #invoice .invoice-guided-flow { gap: 10px; }
  .invoice-confirm-header { align-items: stretch; }
  .invoice-confirm-header .bulk-queue-header-actions { display: grid; grid-template-columns: auto 1fr; }
}

.invoice-intake-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(430px, 100%); margin: 14px 0; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-muted); }
.invoice-intake-tabs button { border: 0; border-radius: 8px; padding: 9px 12px; background: transparent; color: var(--text); font-weight: 800; }
.invoice-intake-tabs button.is-active { color: #fff; background: var(--accent); }
.invoice-intake-tabs button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-intake-tabs button > b { display: inline-grid; place-items: center; min-width: 21px; height: 21px; margin-left: 5px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 11px; }
.invoice-intake-project { overflow: hidden; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.invoice-intake-project > header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.invoice-intake-project > header strong, .invoice-intake-project > header small { display: block; }
.invoice-intake-project > header small { margin-top: 4px; color: var(--muted); }
.invoice-intake-project > header b { align-self: start; padding: 5px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; }
.invoice-intake-project-progress { display: inline-block; width: 180px; height: 7px; margin: 9px 8px 0 0; overflow: hidden; border-radius: 8px; background: var(--border); vertical-align: middle; }
.invoice-intake-project-progress i { display: block; height: 100%; background: var(--accent); }
.invoice-intake-project > header span { color: var(--muted); font-size: 11px; font-weight: 800; }
.invoice-intake-project-rows { padding: 5px 12px; }
.invoice-intake-project-row { display: grid; grid-template-columns: 48px minmax(160px,1fr) minmax(110px,.55fr) auto; align-items: center; gap: 10px; padding: 9px 3px; border-bottom: 1px solid var(--border); }
.invoice-intake-project-row:last-child { border-bottom: 0; }
.invoice-intake-project-row strong, .invoice-intake-project-row small { display: block; }
.invoice-intake-project-row small { margin-top: 2px; color: var(--muted); }
.invoice-intake-row-thumb { width: 42px; height: 54px; overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.invoice-intake-row-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.invoice-intake-page-fallback { display: grid; place-items: center; width: 42px; height: 54px; border: 1px dashed var(--border); border-radius: 5px; }
.invoice-intake-project-row .is-saved { color: var(--accent); }
.invoice-intake-project-row .is-pending { color: var(--warning-text, #9a611d); }
.invoice-intake-project > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-muted); }
.invoice-intake-project > footer > span { color: var(--muted); font-size: 11px; }
.invoice-intake-project > footer > div { display: flex; gap: 7px; flex-wrap: wrap; }
.invoice-project-selector { display: grid; gap: 12px; }
.invoice-intake-project.is-in-use { opacity: .82; border-color: color-mix(in srgb, var(--warning, #b6782b) 45%, var(--border)); }
.invoice-intake-project.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
.invoice-intake-project.is-in-use button:disabled { cursor: not-allowed; opacity: .7; }
.invoice-project-invoice-list > summary,
.individual-invoice-drafts > summary { padding: 10px 15px; color: var(--text); font-weight: 800; cursor: pointer; }
.invoice-project-invoice-list[open] > summary { border-bottom: 1px solid var(--border); }
.individual-invoice-drafts { margin-top: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-muted); }
.individual-invoice-drafts > div { padding: 10px; }
.invoice-project-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.invoice-project-selection strong, .invoice-project-selection small { display: block; }
.invoice-project-selection small { margin-top: 3px; color: var(--muted); }
.invoice-project-selection > div:last-child { display: flex; align-items: center; gap: 8px; }
.invoice-project-selection details { position: relative; }
.invoice-project-selection details > summary { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-weight: 750; cursor: pointer; list-style: none; }
.invoice-project-selection details[open] { display: flex; gap: 6px; }
#invoice[data-intake-stage="upload"][data-intake-mode="resume"] .intake-grid,
#invoice[data-intake-stage="upload"][data-intake-mode="resume"] #invoiceEmailInboxPanel { display: none !important; }
#invoice[data-intake-stage="upload"][data-intake-mode="new"] #invoiceDraftsPanel { display: none !important; }
.bulk-page-board-thumbnail { width: 48px; height: 62px; margin-right: 8px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.bulk-page-board-preview { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; }
.bulk-page-board-preview img { grid-row: 1 / span 2; }
@media (max-width: 720px) {
  .invoice-intake-project-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .invoice-intake-project-row > div:nth-child(3) { display: none; }
  .invoice-intake-row-thumb, .invoice-intake-page-fallback { width: 36px; height: 46px; }
  .invoice-intake-project > footer { align-items: stretch; flex-direction: column; }
  .invoice-intake-project > footer > div { display: grid; grid-template-columns: 1fr; }
  .invoice-project-selection { align-items: stretch; flex-direction: column; }
  .invoice-project-selection > div:last-child { display: grid; grid-template-columns: 1fr; }
}

/* Recipe library multi-select. */
.recipe-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px;
  margin: 0 12px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-dark) 35%, var(--line));
  border-radius: 12px;
  padding: 9px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}
.recipe-bulk-actions[hidden] { display: none !important; }
.recipe-bulk-actions > strong { align-self: center; margin-right: auto; white-space: nowrap; }
.recipe-bulk-actions label { display: grid; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.recipe-bulk-actions input { min-height: 34px; width: min(190px, 34vw); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--ink); background: var(--paper); }
.recipe-bulk-more { position: relative; align-self: center; }
.recipe-bulk-more > summary { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; list-style: none; color: var(--ink); background: var(--paper); font-weight: 800; cursor: pointer; }
.recipe-bulk-more > div { position: absolute; z-index: 25; top: calc(100% + 5px); right: 0; display: grid; gap: 5px; min-width: 130px; border: 1px solid var(--line); border-radius: 9px; padding: 6px; background: var(--paper); box-shadow: var(--shadow-soft); }
.recipe-select-check { display: none; place-items: center; flex: 0 0 21px; width: 21px; height: 21px; border: 1px solid var(--line); border-radius: 6px; color: white; background: var(--paper); font-size: 13px; font-weight: 900; letter-spacing: 0; }
.is-recipe-selecting .recipe-select-check { display: inline-grid; }
.is-recipe-selecting .recipe-card.is-selected { border-color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 15%, var(--paper)); box-shadow: inset 0 0 0 1px var(--accent-dark); }
.is-recipe-selecting .recipe-card.is-selected .recipe-select-check { border-color: var(--accent-dark); background: var(--accent-dark); }
.is-recipe-selecting .recipe-card { cursor: pointer; }
.recipe-card.is-dragging[data-drag-count]:not([data-drag-count="1"])::after { content: attr(data-drag-count); position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 25px; height: 25px; border-radius: 999px; padding: 0 6px; color: white; background: var(--accent-dark); box-shadow: var(--shadow-soft); font-size: 11px; font-weight: 900; }

@media (max-width: 700px) {
  .recipe-bulk-actions { align-items: stretch; }
  .recipe-bulk-actions > strong { flex-basis: 100%; }
  .recipe-bulk-actions label { flex: 1 1 150px; }
  .recipe-bulk-actions input { width: 100%; }
  .recipe-bulk-actions > button { flex: 1 1 auto; }
}

/* V4.57 invoice detail is a true foreground workspace with persistent controls. */
body.invoice-detail-open {
  overflow: hidden;
}

#invoiceDetailModal:not([hidden]) {
  z-index: 28000 !important;
  place-items: center !important;
  padding: clamp(8px, 1.25vw, 18px) !important;
}

body .modal.invoice-detail-modal {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: min(1500px, 100%) !important;
  height: min(94dvh, 1080px) !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  background: var(--paper) !important;
  box-shadow: 0 24px 70px rgba(19, 31, 27, 0.34) !important;
}

body .invoice-detail-header {
  position: relative;
  z-index: 2;
  min-width: 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px !important;
  background: var(--paper);
}

body .invoice-detail-header .icon-button {
  flex: 0 0 auto;
}

body .invoice-detail-content {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  padding: 14px 16px !important;
}

body .invoice-detail-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  background: var(--paper);
}

@media (max-width: 760px) {
  #invoiceDetailModal:not([hidden]) {
    place-items: stretch !important;
    padding: 0 !important;
  }

  body .modal.invoice-detail-modal {
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body .invoice-detail-header,
  body .invoice-detail-content,
  body .invoice-detail-footer {
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }

  body .invoice-detail-header {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  body .invoice-detail-footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* Insights category invoice drill-down — V4.30 */
#categoryInvoiceModal {
  z-index: 32;
  padding: clamp(8px, 1.25vw, 18px) !important;
}

#invoiceDetailModal:not([hidden]),
#invoicePreviewModal:not([hidden]) {
  z-index: 34;
}

.modal.category-invoice-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - clamp(16px, 2.5vw, 36px)) !important;
  max-height: none !important;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--larder-hairline, var(--line)) !important;
  border-radius: var(--larder-radius, 12px) !important;
  padding: 0 !important;
  background: var(--paper) !important;
  box-shadow: 0 24px 60px rgba(12, 24, 20, 0.22) !important;
}

.category-invoice-header {
  margin: 0 !important;
  border-bottom: 1px solid var(--larder-hairline, var(--line));
  padding: 14px 16px !important;
}

.category-invoice-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--larder-hairline, var(--line));
  background: var(--larder-hairline, var(--line));
}

#vendorSpendSummary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-invoice-summary article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 16px;
  background: var(--raised);
}

.category-invoice-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.category-invoice-summary strong {
  font-size: clamp(18px, 2vw, 24px);
  font-variant-numeric: tabular-nums;
}

.category-invoice-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0 16px;
}

.category-invoice-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.category-invoice-table {
  width: 100%;
  min-width: 920px;
}

.category-invoice-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
}

.category-invoice-table td {
  vertical-align: top;
}

.category-invoice-table td:first-child strong,
.category-invoice-table td:first-child small {
  display: block;
}

.category-invoice-table td:first-child small {
  margin-top: 2px;
  color: var(--muted);
}

.category-invoice-table .money-cell {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.category-invoice-lines {
  display: grid;
  gap: 3px;
  min-width: 280px;
}

.category-invoice-lines button,
.category-invoice-lines > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 31px;
  border: 0;
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
}

.category-invoice-lines button {
  cursor: pointer;
}

.category-invoice-lines button:hover,
.category-invoice-lines button:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

.category-invoice-lines b {
  font-weight: 780;
}

.category-invoice-lines em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.category-invoice-editor-row td {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  padding: 0 8px 12px !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}

.category-invoice-line-editor {
  grid-template-columns: minmax(180px, 1.8fr) minmax(110px, 0.9fr) repeat(5, minmax(90px, 1fr));
  gap: 8px;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 12px;
  background: transparent;
}

.category-invoice-editor-heading,
.category-invoice-reason,
.category-invoice-editor-actions {
  grid-column: 1 / -1;
}

.category-invoice-editor-heading,
.category-invoice-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.category-invoice-editor-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.category-invoice-line-editor label {
  min-width: 0;
}

.category-invoice-line-editor input,
.category-invoice-line-editor select {
  width: 100%;
  min-width: 0;
}

.category-invoice-footer {
  justify-content: space-between;
  margin: 0 !important;
  border-top: 1px solid var(--larder-hairline, var(--line));
  padding: 11px 16px !important;
  background: var(--raised);
}

.category-invoice-footer .hint {
  margin: 0;
}

@media (max-width: 760px) {
  #categoryInvoiceModal,
  #vendorSpendModal {
    place-items: stretch !important;
    padding: 0 !important;
  }

  .modal.category-invoice-modal {
    width: 100vw !important;
    height: 100dvh !important;
    border-width: 0 !important;
    border-radius: 0 !important;
  }

  .category-invoice-header,
  .category-invoice-footer {
    padding: 10px !important;
  }

  .category-invoice-summary {
    grid-template-columns: 1fr;
  }

  #vendorSpendSummary {
    grid-template-columns: 1fr;
  }

  .category-invoice-summary article {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 7px 10px;
  }

  .category-invoice-summary strong {
    font-size: 17px;
  }

  .category-invoice-content {
    padding: 0 8px;
  }

  .category-invoice-line-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-invoice-line-editor > label:first-of-type,
  .category-invoice-reason {
    grid-column: 1 / -1;
  }

  .category-invoice-footer {
    align-items: stretch;
  }
}

/* Preferred invoice item identity — V4.31 */

.template-pdf-page-picker {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.template-pdf-page-picker > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.template-pdf-page-picker > div:first-child span {
  color: var(--muted);
  font-size: 0.82rem;
}

.template-pdf-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.template-pdf-page-grid button {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.template-pdf-page-grid button.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.template-pdf-page-grid img {
  width: 100%;
  height: 116px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

@media (max-width: 680px) {
  .template-pdf-page-picker > div:first-child { align-items: flex-start; flex-direction: column; }
  .template-pdf-page-grid { grid-template-columns: repeat(3, minmax(86px, 1fr)); }
}
.invoice-line-table .invoice-description-reference {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.invoice-line-table tr.has-preferred-item-name .item-cell {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Contextual reporting-period control — V4.28 */
body .reporting-period-control {
  position: relative;
  align-self: end;
  justify-self: end;
  width: auto;
  min-width: 0;
  border: 0 !important;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

body .reporting-period-button {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 244px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 10px;
  padding: 7px 10px 7px 13px;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  box-shadow: 0 5px 14px rgba(22, 34, 29, 0.08);
  cursor: pointer;
}

body .reporting-period-button:hover,
body .reporting-period-button:focus-visible,
body .reporting-period-button[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}

body .reporting-period-button small,
body .reporting-period-button strong {
  display: block;
}

body .reporting-period-button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body .reporting-period-button strong {
  margin-top: 1px;
  font-size: 14px;
}

body .reporting-period-button > b {
  color: var(--muted);
  font-size: 15px;
  transition: transform 140ms ease;
}

body .reporting-period-button[aria-expanded="true"] > b {
  transform: rotate(180deg);
}

body .reporting-period-status,
body .reporting-period-option-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--muted);
  background: var(--subtle);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

body .reporting-period-status.is-review,
body .reporting-period-option-status.is-review {
  border-color: color-mix(in srgb, var(--warning, #d98619) 38%, var(--line));
  color: var(--warning-dark, #8a4b00);
  background: color-mix(in srgb, var(--warning, #d98619) 10%, var(--paper));
}

body .reporting-period-status.is-closed,
body .reporting-period-option-status.is-closed {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, var(--paper));
}

body .reporting-period-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 9000;
  width: min(340px, calc(100vw - 24px));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 12px;
  padding: 8px;
  background: var(--paper);
  box-shadow: 0 20px 45px rgba(17, 27, 22, 0.2);
}

body .reporting-period-menu[hidden] {
  display: none !important;
}

body .reporting-period-menu-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 9px;
}

body .reporting-period-menu-heading strong {
  font-size: 13px;
}

body .reporting-period-menu-heading span {
  color: var(--muted);
  font-size: 11px;
}

body .reporting-period-options {
  display: grid;
  gap: 3px;
}

body .reporting-period-option {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

body .reporting-period-option:hover,
body .reporting-period-option:focus-visible {
  background: var(--subtle);
}

body .reporting-period-option.is-selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
}

body .reporting-period-option strong,
body .reporting-period-option small {
  display: block;
}

body .reporting-period-option strong {
  font-size: 13px;
}

body .reporting-period-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

body .reporting-period-menu .month-status {
  margin: 7px 5px 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: left;
  font-size: 11px;
}

body .reporting-period-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}

body .reporting-period-menu-actions button {
  width: 100%;
  min-width: 0;
}

body .reporting-period-control > .month-lock-notice {
  max-width: 360px;
  margin: 6px 0 0;
  text-align: right;
}

body .month-management-panel {
  scroll-margin-top: 18px;
}

body .month-management-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
  align-items: end;
  justify-content: stretch;
  padding: 14px;
}

body .month-management-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

body .month-management-controls select {
  width: 100%;
  min-width: 0;
}

body .month-management-summary {
  margin: 0 14px 14px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  body .reporting-period-control,
  body .reporting-period-button {
    width: 100%;
  }

  body .reporting-period-menu {
    right: auto;
    left: 0;
  }

  body .reporting-period-control > .month-lock-notice {
    max-width: none;
    text-align: left;
  }

  body .month-management-controls {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body .reporting-period-button {
    min-width: 0;
  }

  body .reporting-period-menu {
    width: 100%;
  }

  body .month-management-controls,
  body .reporting-period-menu-actions {
    grid-template-columns: 1fr;
  }
}

/* V4.18 dashboard: financial command view, prioritized work, and recent records. */
body #dashboard.view.is-visible {
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.82fr) !important;
  grid-template-areas:
    "metrics metrics"
    "attention pnl"
    "records activity"
    "details details" !important;
  gap: 12px !important;
}

body #dashboard.view.is-visible > .metrics-grid { grid-area: metrics !important; grid-column: 1 / -1 !important; }
body #dashboard.view.is-visible > .action-center-panel { grid-area: attention !important; grid-column: 1 !important; }
body #dashboard.view.is-visible > .dashboard-pl-snapshot-panel { grid-area: pnl !important; grid-column: 2 !important; }
body #dashboard.view.is-visible > .dashboard-recent-files-panel { grid-area: records !important; grid-column: 1 !important; }
body #dashboard.view.is-visible > .dashboard-recent-activity-panel { grid-area: activity !important; grid-column: 2 !important; }
body #dashboard.view.is-visible > .dashboard-details-panel { grid-area: details !important; grid-column: 1 / -1 !important; }

body #dashboard.view.is-visible > .dashboard-pl-feed-panel,
body #dashboard.view.is-visible > .dashboard-percent-panel,
body #dashboard.view.is-visible > .dashboard-visual-grid,
body #dashboard.view.is-visible > .invoice-ops-panel,
body #dashboard.view.is-visible > #savedInvoicesPanel,
body #dashboard.view.is-visible > .dashboard-actions,
body #dashboard.view.is-visible > .dashboard-workspace-strip {
  display: none !important;
}

body #dashboard .metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body #dashboard .metric {
  min-height: 82px !important;
}

body #dashboard .metric span {
  white-space: normal !important;
}

body #dashboard .action-center-panel,
body #dashboard .dashboard-pl-snapshot-panel,
body #dashboard .dashboard-recent-files-panel,
body #dashboard .dashboard-recent-activity-panel {
  min-width: 0;
  overflow: hidden;
}

body #dashboard .action-center-panel .attention-summary-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 0;
  padding: 0;
}

body #dashboard .attention-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  min-height: 72px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 12px 14px 12px 22px !important;
  background: transparent !important;
  text-align: left;
  box-shadow: none !important;
}

body #dashboard .attention-summary-card:last-child {
  border-bottom: 0 !important;
}

body #dashboard .attention-summary-card::before {
  content: "";
  position: absolute;
  inset: 13px auto 13px 9px;
  width: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold, #ad7b24) 82%, var(--danger));
}

body #dashboard .attention-summary-card.credit::before { background: var(--danger); }
body #dashboard .attention-summary-card.checklist::before { background: var(--accent); }

body #dashboard .attention-summary-card span,
body #dashboard .attention-summary-card small {
  grid-column: 1;
}

body #dashboard .attention-summary-card strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 24px;
}

body #dashboard .attention-summary-card small {
  color: var(--muted);
}

.dashboard-pl-snapshot {
  display: grid;
}

.dashboard-pl-snapshot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 13px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.dashboard-pl-snapshot-row:last-child { border-bottom: 0; }
.dashboard-pl-snapshot-row:hover,
.dashboard-pl-snapshot-row:focus-visible { background: var(--subtle); }

.dashboard-pl-snapshot-row span,
.dashboard-pl-snapshot-row small { display: block; min-width: 0; }
.dashboard-pl-snapshot-row span { font-weight: 900; }
.dashboard-pl-snapshot-row small { margin-top: 2px; color: var(--muted); font-weight: 750; }
.dashboard-pl-snapshot-row strong { font-size: 15px; white-space: nowrap; }
.dashboard-pl-snapshot-row strong.is-negative { color: var(--danger); }

.dashboard-pl-snapshot-row.total,
.dashboard-pl-snapshot-row.result {
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}

.dashboard-pl-snapshot-row.total span,
.dashboard-pl-snapshot-row.total strong,
.dashboard-pl-snapshot-row.result span,
.dashboard-pl-snapshot-row.result strong { color: var(--accent-dark); }

.dashboard-pl-snapshot-row.result {
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

.dashboard-record-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
}

.dashboard-record-filter {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
}

.dashboard-record-filter.is-active {
  border-color: var(--accent-dark);
  color: #ffffff;
  background: var(--accent-dark);
}

.dashboard-recent-records,
.dashboard-recent-activity { display: grid; min-width: 0; }

.dashboard-recent-record-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 13px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.dashboard-recent-record-row:last-child { border-bottom: 0; }
.dashboard-recent-record-row:hover,
.dashboard-recent-record-row:focus-visible { background: var(--subtle); }

.dashboard-record-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  font-size: 10px;
  font-weight: 950;
}

.dashboard-record-copy,
.dashboard-record-copy strong,
.dashboard-record-copy small { display: block; min-width: 0; }
.dashboard-record-copy strong,
.dashboard-record-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-record-copy small { margin-top: 2px; color: var(--muted); }
.dashboard-record-source { color: var(--muted); font-size: 11px; font-weight: 850; white-space: nowrap; }

.dashboard-activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 11px 13px;
}

.dashboard-activity-row:last-child { border-bottom: 0; }
.dashboard-activity-row i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.dashboard-activity-row span,
.dashboard-activity-row strong,
.dashboard-activity-row small { display: block; min-width: 0; }
.dashboard-activity-row small,
.dashboard-activity-row time { color: var(--muted); }
.dashboard-activity-row time { font-size: 11px; font-weight: 850; white-space: nowrap; }

@media (max-width: 1180px) {
  body #dashboard.view.is-visible {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "metrics"
      "attention"
      "pnl"
      "records"
      "activity"
      "details" !important;
  }

  body #dashboard.view.is-visible > .metrics-grid,
  body #dashboard.view.is-visible > .action-center-panel,
  body #dashboard.view.is-visible > .dashboard-pl-snapshot-panel,
  body #dashboard.view.is-visible > .dashboard-recent-files-panel,
  body #dashboard.view.is-visible > .dashboard-recent-activity-panel,
  body #dashboard.view.is-visible > .dashboard-details-panel { grid-column: 1 !important; }
}

@media (max-width: 760px) {
  body #dashboard .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body #dashboard .panel-header { align-items: flex-start; }
  .dashboard-record-actions { width: 100%; }
  .dashboard-recent-record-row { grid-template-columns: auto minmax(0, 1fr); }
  .dashboard-record-source { grid-column: 2; }
  .dashboard-activity-row { grid-template-columns: auto minmax(0, 1fr); }
  .dashboard-activity-row time { grid-column: 2; }
}

/* Polished, non-blocking application feedback. */
.app-toast-region {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 10050;
  display: grid;
  width: min(430px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}

.app-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 14px 14px 14px 16px;
  color: var(--ink, #2a251f);
  background: var(--panel, #fff);
  background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--rust, #9c5332) 42%, var(--line, #d7cbbd));
  border-left: 4px solid var(--rust, #9c5332);
  border-radius: 12px;
  box-shadow: 0 16px 42px rgb(35 28 20 / 22%);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: app-toast-in 180ms ease-out;
}

.app-toast-info,
.app-toast-success {
  border-left-color: var(--olive, #63704a);
}

.app-toast-close {
  min-height: 32px;
  padding: 5px 9px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line, #d7cbbd);
  border-radius: 8px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

@keyframes app-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .app-toast-region {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* V3.73 interface consolidation: one navigation system, quieter surfaces, less repetition. */
body {
  --command-radius: 12px;
  --ui-radius: 12px;
  --ui-radius-sm: 8px;
  --command-pad: clamp(14px, 1.7vw, 28px);
}

body .brand h1,
body .page-heading h1,
body #viewTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.035em !important;
}

body .panel,
body .topbar,
body .metric,
body .month-card,
body .global-search-panel {
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.045) !important;
}

body .panel-header,
body .compact-panel-header {
  padding: 10px 12px !important;
}

body .panel-header h2,
body .compact-panel-header h2 {
  font-size: 16px;
  line-height: 1.2;
}

body .hint {
  max-width: 72ch;
  font-size: 12px;
}

body .primary-button,
body .secondary-button,
body .danger-button {
  min-height: 34px;
  border-radius: 8px !important;
  padding-inline: 11px;
  font-size: 12px;
}

body input,
body select,
body textarea {
  border-radius: 8px !important;
}

#dashboard .metrics-grid {
  gap: 8px !important;
}

#dashboard .metric {
  min-height: 92px !important;
  padding: 12px !important;
}

#dashboard .metric strong {
  font-size: clamp(24px, 2.3vw, 38px) !important;
}

#dashboard > .dashboard-actions {
  display: none !important;
}

@media (min-width: 1181px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    align-items: start;
  }

  body .sidebar {
    position: sticky !important;
    top: 0;
    z-index: 80;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px !important;
    width: 248px !important;
    height: 100vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(246, 241, 231, 0.12) !important;
    padding: 18px 13px !important;
    color: #f6f1e7 !important;
    background: #17211d !important;
    box-shadow: 8px 0 28px rgba(17, 24, 39, 0.08) !important;
    overflow: hidden !important;
  }

  body .brand {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    border-bottom: 1px solid rgba(246, 241, 231, 0.12) !important;
    padding: 0 3px 14px !important;
  }

  body .brand-mark {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-color: rgba(246, 241, 231, 0.18) !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  body .brand h1 {
    color: #f6f1e7 !important;
    font-size: 20px !important;
  }

  body .brand p {
    color: #aebbb5 !important;
  }

  body .tabs.simple-tabs,
  body .tabs {
    display: grid !important;
    align-content: start;
    gap: 3px !important;
    min-height: 0;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 2px 8px !important;
    background: transparent !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .sidebar .tab,
  body .sidebar .nav-menu summary {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    padding: 0 11px !important;
    color: #b9c5c0 !important;
    background: transparent !important;
    text-align: left;
  }

  body .sidebar .tab:hover,
  body .sidebar .nav-menu summary:hover,
  body .sidebar .nav-menu[open] summary {
    color: #f6f1e7 !important;
    background: rgba(246, 241, 231, 0.07) !important;
  }

  body .sidebar .tab.is-active,
  body .sidebar .nav-menu.is-active summary {
    color: #ffffff !important;
    background: rgba(15, 143, 122, 0.28) !important;
    box-shadow: inset 3px 0 0 #38b990 !important;
  }

  body .sidebar .nav-menu {
    min-width: 0;
  }

  body .sidebar .nav-menu summary::after {
    content: "+";
    display: block;
    margin-left: auto;
    color: #82918b;
    font: 700 16px/1 system-ui, sans-serif;
  }

  body .sidebar .nav-menu[open] summary::after {
    content: "−";
  }

  body .sidebar .nav-menu-panel,
  body .sidebar .nav-menu[open] .nav-menu-panel,
  body .sidebar .nav-menu[open]:hover .nav-menu-panel,
  body .sidebar .nav-menu[open]:focus-within .nav-menu-panel {
    position: static !important;
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 3px 0 5px 10px !important;
    border: 0 !important;
    border-left: 1px solid rgba(246, 241, 231, 0.15) !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 7px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .sidebar .nav-menu:not([open]) .nav-menu-panel {
    display: none !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab {
    min-height: 34px !important;
    color: #aebbb5 !important;
    background: transparent !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab:hover {
    color: #f6f1e7 !important;
    background: rgba(246, 241, 231, 0.06) !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab.is-active {
    color: #ffffff !important;
    background: rgba(15, 143, 122, 0.24) !important;
  }

  body .shell-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
    min-width: 0 !important;
    margin-top: auto;
    border-top: 1px solid rgba(246, 241, 231, 0.12);
    border-radius: 0 !important;
    padding: 13px 2px 0;
    background: transparent !important;
    overflow: visible !important;
  }

  body .shell-actions > *,
  body .shell-actions .secondary-button,
  body .shell-actions .primary-button,
  body .shell-actions .tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding-inline: 8px !important;
  }

  body .shell-actions .shell-new-invoice {
    grid-column: 1 / -1;
    order: -1;
  }

  body .shell-actions .secondary-button {
    border-color: rgba(246, 241, 231, 0.14) !important;
    color: #dbe4e0 !important;
    background: rgba(246, 241, 231, 0.06) !important;
  }

  body .main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px var(--command-pad) 36px !important;
  }

  body .topbar {
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
  }

  body .page-heading h1 {
    font-size: clamp(30px, 3vw, 42px) !important;
    line-height: 1 !important;
  }

  body #dashboard.view.is-visible {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 12px;
  }

  body #dashboard > .dashboard-percent-panel,
  body #dashboard > .dashboard-visual-grid,
  body #dashboard > .invoice-ops-panel {
    grid-column: 2;
  }
}

/* Keep grouped overview layout above the legacy view cascade. */
body .section-overview-view.view.is-visible {
  display: grid !important;
  gap: 14px;
  width: 100%;
}

/* V3.56 shared recipe prep queue */
.recipe-prep-board {
  display: grid;
  gap: 16px;
}

.recipe-prep-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(180px, 1.4fr) repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.recipe-prep-form label {
  display: grid;
  gap: 5px;
}

.recipe-prep-form .field-wide {
  grid-column: span 3;
}

.recipe-prep-list,
.staff-prep-queue {
  display: grid;
  gap: 8px;
}

.recipe-prep-list article,
.staff-prep-queue article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #fff);
}

.recipe-prep-list article > div:not(.inline-actions),
.staff-prep-queue article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recipe-prep-list article span,
.recipe-prep-list article small,
.staff-prep-queue article small,
.staff-prep-queue article span {
  color: var(--muted);
}

.recipe-prep-list article.is-complete,
.staff-prep-queue article.is-complete {
  opacity: .66;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--line));
}

.recipe-prep-list article.is-unable {
  opacity: 1;
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--danger));
}

.admin-prep-filters {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.shift-checklist-admin,
.checklist-template-list,
.checklist-run-history,
.shift-checklist-mobile-list,
.shift-checklist-items {
  display: grid;
  gap: 10px;
}

.shift-checklist-template-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.shift-checklist-template-form > label {
  display: grid;
  gap: 5px;
}

.shift-checklist-template-form .field-wide {
  grid-column: 1 / -1;
}

.checklist-day-picker {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.checklist-day-picker label {
  display: flex;
  gap: 5px;
  align-items: center;
}

.checklist-template-list article,
.checklist-run-history article {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
}

.checklist-template-list article > div:first-child,
.checklist-run-history article > div:first-child {
  display: grid;
  gap: 3px;
}

.checklist-exception {
  color: var(--danger);
}

.shift-checklist-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface, #fff);
}

.shift-checklist-card > header,
.shift-checklist-card > footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.shift-checklist-card h3 {
  margin: 2px 0 0;
}

.shift-checklist-items > label {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) minmax(150px, .8fr);
  gap: 9px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.shift-checklist-items > label.is-complete > span {
  text-decoration: line-through;
  opacity: .65;
}

.shift-checklist-card.is-submitted,
.shift-checklist-card.is-acknowledged {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--accent));
}

.recipe-prep-list article.is-complete strong,
.staff-prep-queue article.is-complete strong {
  text-decoration: line-through;
}

.staff-recipe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.closing-handoff-card,
.prep-suggestions {
  display: grid;
  gap: 12px;
}

.closing-handoff-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(110px, 1fr));
  gap: 10px;
  align-items: end;
}

.closing-handoff-form label {
  display: grid;
  gap: 5px;
}

.closing-handoff-form .field-wide {
  grid-column: span 4;
}

.prep-suggestions article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.prep-suggestions article > div {
  display: grid;
  gap: 3px;
}

.prep-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.prep-filter-tabs button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: var(--button);
  color: var(--ink);
}

.prep-filter-tabs button.is-active {
  background: var(--button-active);
  border-color: var(--accent);
}

.prep-station-group {
  display: grid;
  gap: 7px;
}

.prep-station-group > h3 {
  margin: 9px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prep-station-group > h3 small {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--button);
  color: var(--muted);
  font-size: 12px;
}

.prep-station-group.is-community {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--accent));
}

.prep-station-group article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.prep-station-group article.is-high-priority {
  border-left: 4px solid var(--danger);
}

.prep-station-group article.is-normal-priority {
  border-left: 4px solid var(--accent);
}

.prep-station-group article.is-low-priority {
  border-left: 4px solid var(--muted);
}

.prep-station-group article.is-in-progress {
  background: color-mix(in srgb, var(--surface, #fff) 88%, #d8a33a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d8a33a 45%, transparent);
}

.prep-work-status,
.prep-claimed-note {
  width: fit-content;
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, #d8a33a 20%, var(--surface, #fff));
  color: var(--ink) !important;
}

.prep-work-status.is-stale {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface, #fff));
  color: var(--danger) !important;
}

.prep-live-sync {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--muted);
}

.prep-live-sync::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39a66b;
  box-shadow: 0 0 0 3px color-mix(in srgb, #39a66b 18%, transparent);
}

.prep-claimed-note {
  align-self: center;
  font-weight: 600;
}

.prep-station-group em,
.prep-priority {
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
}

.prep-priority.is-normal {
  background: var(--accent);
}

.prep-priority.is-low {
  background: var(--muted);
}

.prep-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.prep-board-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.staff-prep-add-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(12, 22, 16, .62);
}

.staff-prep-add-modal {
  width: min(620px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

.staff-prep-add-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.staff-prep-add-modal > header span {
  color: var(--muted);
}

.staff-prep-add-modal > header h2 {
  margin: 3px 0 0;
}

.staff-prep-add-modal form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.staff-prep-add-modal form label {
  display: grid;
  gap: 5px;
}

.staff-prep-add-modal .field-wide {
  grid-column: 1 / -1;
}

.prep-completion-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 140px minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.prep-completion-form label {
  display: grid;
  gap: 4px;
}

@media print {
  .staff-pocket-status, .staff-pocket-header, .staff-pocket-tonight, .staff-section-grid, .closing-handoff-card, .staff-recipe-detail, .prep-filter-tabs, .prep-item-actions { display: none !important; }
  .staff-card { box-shadow: none !important; border: 0 !important; }
}

@media (max-width: 1050px) {
  .recipe-prep-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-prep-form .field-wide { grid-column: span 2; }
  .closing-handoff-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing-handoff-form .field-wide { grid-column: span 2; }
}

@media (max-width: 620px) {
  .recipe-prep-form { grid-template-columns: 1fr; }
  .recipe-prep-form .field-wide { grid-column: auto; }
  .recipe-prep-list article,
  .staff-prep-queue article { grid-template-columns: auto minmax(0, 1fr); }
  .recipe-prep-list .inline-actions,
  .staff-prep-queue article > button { grid-column: 2; justify-self: start; }
  .closing-handoff-form { grid-template-columns: 1fr; }
  .closing-handoff-form .field-wide { grid-column: auto; }
  .prep-filter-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prep-station-group article { grid-template-columns: 1fr; }
  .staff-prep-queue { gap: 14px; }
  .prep-station-group,
  .prep-station-group.is-community { padding: 10px; }
  .prep-station-group article { gap: 10px; padding: 13px 12px; }
  .prep-item-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: stretch; }
  .prep-item-actions button,
  .prep-item-actions .prep-claimed-note { min-height: 44px; width: 100%; }
  .prep-start-button,
  .prep-claimed-note { grid-column: 1 / -1; }
  .prep-completion-form { grid-template-columns: 1fr; }
  .prep-board-header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .prep-board-header-actions button { min-height: 44px; width: 100%; }
  .staff-prep-add-backdrop { padding: 0; place-items: stretch; }
  .staff-prep-add-modal { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; padding: 16px; }
  .staff-prep-add-modal form { grid-template-columns: 1fr; }
  .staff-prep-add-modal .field-wide { grid-column: auto; }
  .staff-prep-add-modal input,
  .staff-prep-add-modal select,
  .staff-prep-add-modal button { min-height: 46px; }
  .shift-checklist-template-form { grid-template-columns: 1fr; }
  .checklist-day-picker,
  .shift-checklist-template-form .field-wide { grid-column: auto; }
  .checklist-template-list article,
  .checklist-run-history article { align-items: flex-start; flex-direction: column; }
  .shift-checklist-items > label { grid-template-columns: auto minmax(0, 1fr); }
  .shift-check-note { grid-column: 2; width: 100%; }
}

/* V3.13 connected admin and Staff Pocket schedule calendars. */
.schedule-week-overview {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px 16px;
}

.schedule-week-day {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.schedule-week-day:hover,
.schedule-week-day.is-today {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

.schedule-week-day > span,
.schedule-week-day > small {
  color: var(--muted);
  font-weight: 800;
}

.schedule-week-day > strong { font-size: 24px; }
.schedule-week-day > div { display: grid; gap: 4px; }
.schedule-week-day em { overflow: hidden; color: var(--ink); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.schedule-week-day em b { display: block; color: var(--muted); font-size: 9px; }

.schedule-month-backdrop { z-index: 1250; padding: 14px; }
.modal.schedule-month-modal { width: 100%; max-width: none; height: calc(100dvh - 28px); max-height: none; padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.schedule-month-header { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.schedule-month-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 12px; min-width: 0; min-height: 0; padding: 14px; overflow: auto; background: var(--body); }
.schedule-month-content .schedule-calendar-card,
.schedule-month-content .schedule-day-detail { min-width: 0; min-height: 0; background: var(--paper); }

.staff-my-shifts button { grid-template-columns: minmax(0, 1fr) auto; }
.staff-month-schedule { min-width: 0; }
.staff-month-weekdays,
.staff-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.staff-month-weekdays { color: var(--muted); font-size: 10px; font-weight: 900; text-align: center; text-transform: uppercase; }
.staff-month-day { display: grid; gap: 3px; place-items: center; min-width: 0; min-height: 58px; border: 1px solid var(--line); border-radius: 9px; padding: 5px; color: var(--ink); background: var(--paper); }
.staff-month-day.is-outside { opacity: .38; }
.staff-month-day.has-shift { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.staff-month-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.staff-month-day small { max-width: 100%; overflow: hidden; color: var(--accent-dark); font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.staff-shift-detail dl { display: grid; gap: 0; margin: 0; }
.staff-shift-detail dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.staff-shift-detail dt { color: var(--muted); font-weight: 800; }
.staff-shift-detail dd { margin: 0; font-weight: 800; }

@media (max-width: 900px) {
  .schedule-week-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-week-day { min-height: 118px; }
  .schedule-month-content { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .schedule-week-overview { grid-template-columns: 1fr; padding: 0 10px 10px; }
  .schedule-week-day { grid-template-columns: 62px minmax(0, 1fr); align-items: center; min-height: 0; }
  .schedule-week-day > strong { grid-row: 1 / 3; font-size: 22px; }
  .schedule-week-day > div { grid-column: 2; }
  .schedule-month-backdrop { padding: 0; }
  .modal.schedule-month-modal { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .schedule-month-header { padding: 10px; }
  .schedule-month-content { padding: 8px; }
  .staff-month-day { min-height: 48px; }
  .staff-month-day small { display: none; }
}

/* V4.02 grouped navigation overviews */
.section-overview-view.is-visible {
  display: grid;
  gap: 14px;
  width: 100%;
}

.section-overview-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 88%, var(--body));
  scrollbar-width: none;
}

.section-overview-tabs::-webkit-scrollbar { display: none; }

.section-overview-tab {
  min-height: 36px;
  width: auto !important;
  flex: 0 0 auto;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.section-overview-tab.is-active {
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: 0 1px 4px rgba(21, 37, 28, 0.11) !important;
}

.section-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  gap: 14px;
  align-items: start;
}

.section-overview-grid > .panel {
  margin: 0;
  min-width: 0;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.section-overview-grid .panel-header {
  margin-bottom: 5px;
}

.section-overview-grid .panel-header h2 {
  margin-top: 2px;
}

.section-overview-attention,
.section-overview-recent {
  min-height: 210px;
}

.section-overview-list {
  display: grid;
}

.section-overview-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100% !important;
  min-height: 54px;
  padding: 11px 2px !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}

.section-overview-row:first-child { border-top: 0 !important; }
.section-overview-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent) !important; }

.section-overview-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.section-overview-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-overview-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-overview-row b {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 11%, var(--paper));
  font-size: 11px;
  white-space: nowrap;
}

.section-overview-row b.is-warning {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--paper));
}

.section-overview-row b.is-good {
  color: var(--accent-dark);
}

.section-overview-metric-grid {
  display: grid;
  gap: 9px;
}

.section-overview-metric-grid > div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--body) 74%, var(--paper));
}

.section-overview-metric-grid strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1;
}

.section-overview-metric-grid span {
  color: var(--muted);
  font-size: 11px;
}

.section-overview-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.section-overview-action-grid .tab {
  width: 100% !important;
  min-height: 40px;
  justify-content: flex-start;
}

.section-overview-empty {
  display: grid;
  gap: 3px;
  min-height: 100px;
  place-content: center;
  color: var(--muted);
  text-align: center;
}

.section-overview-empty strong { color: var(--accent-dark); }
.section-overview-empty span { font-size: 12px; }

@media (max-width: 820px) {
  .section-overview-grid { grid-template-columns: 1fr; }
  .section-overview-metrics { order: -1; }
  .section-overview-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .section-overview-tabs { margin-inline: 0; }
  .section-overview-grid { gap: 10px; }
  .section-overview-grid > .panel { padding: 12px !important; }
  .section-overview-metric-grid { grid-template-columns: 1fr; }
  .section-overview-action-grid { grid-template-columns: 1fr; }
  .section-overview-row { gap: 8px; }
}

/* V3.37 final density lock: later legacy invoice rules must not reopen costing fields. */
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-cell > label {
  display: none !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-cell {
  display: table-cell !important;
  min-width: 150px !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) td {
  height: 44px !important;
  padding-block: 4px !important;
  vertical-align: middle !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-preview {
  display: flex !important;
  min-height: 28px !important;
  margin: 0 !important;
}

body #invoice .invoice-line-table tbody tr.is-costing-open .package-cell > label {
  display: grid !important;
}

body #invoice .invoice-cancel-extract {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 32%, var(--ui-line, var(--line))) !important;
  background: color-mix(in srgb, var(--danger) 5%, var(--paper)) !important;
}

body #invoice .learning-review-editor {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) minmax(105px, .75fr) minmax(80px, .55fr) minmax(130px, .9fr);
  gap: 6px;
  margin: 7px 0 5px;
}

body #invoice .learning-review-editor label {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

body #invoice .learning-review-editor input,
body #invoice .learning-review-editor select {
  min-height: 30px;
  height: 30px;
  padding: 4px 6px;
  font-size: 11px;
  text-transform: none;
}

@media (max-width: 760px) {
  body #invoice .learning-review-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .item-cell,
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .status-cell,
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .line-action-cell {
  display: table-cell !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .item-cell input {
  display: block;
  width: 100%;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .item-code-input {
  margin-top: 2px;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .line-status-badge {
  margin-top: 2px;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .line-action-cell .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.dark-mode {
  color-scheme: dark;
  --ink: #edf4ef;
  --muted: #a9b8b0;
  --line: #33433b;
  --paper: #17211d;
  --wash: #101714;
  --body: #0d1411;
  --field: #101915;
  --subtle: #13201a;
  --raised: #1c2924;
  --button: #26342e;
  --button-active: #17352d;
  --accent: #38b990;
  --accent-dark: #8fe2c4;
  --gold: #d4a84b;
  --danger: #f07167;
  --sidebar: #151c22;
  --sidebar-line: #26362f;
  --sidebar-ink: #edf4ef;
  --sidebar-muted: #9fafaa;
  --sidebar-active: #38b990;
  --radius: 8px;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  --soft-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
  --panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  --button-shadow: none;
  --focus-ring: 0 0 0 3px rgba(56, 185, 144, 0.2);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0, rgba(255, 255, 255, 0) 260px),
    var(--body);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  overflow-x: hidden;
}


.auth-gate {
  display: none;
}

html.auth-pending .app-shell {
  display: none;
}

html.auth-pending .auth-gate {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 18px;
}

.auth-gate > div {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.auth-gate h1 {
  margin: 0 0 6px;
  font-size: 26px;
}

.auth-gate p {
  margin: 0 0 16px;
  color: var(--muted);
  font-weight: 700;
}

.auth-gate a {
  display: none;
  min-height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

html.auth-slow .auth-gate p {
  color: var(--danger);
}

html.auth-slow .auth-gate p::after {
  content: " If this stays here, sign in again or restart the Node app.";
}

html.auth-slow .auth-gate a {
  display: grid;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--sidebar-line);
  padding: 18px 14px;
  color: var(--sidebar-ink);
  background: var(--sidebar);
  box-shadow: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  padding: 2px 4px 14px;
}

.brand-mark {
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 800;
  overflow: hidden;
}

.brand-mark img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.brand-mark span {
  grid-area: 1 / 1;
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #fff;
  background: var(--accent);
}

.brand-mark img:not([src]),
.brand-mark img[src=""] {
  display: none;
}

.brand-mark img:not([src]) + span,
.brand-mark img[src=""] + span {
  display: grid;
}

.brand h1 {
  margin: 0;
  color: var(--sidebar-ink);
  font-size: 15px;
  line-height: 1.2;
}

.brand p {
  color: var(--sidebar-muted);
  font-size: 11px;
}

.brand p,
.eyebrow,
.hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-line {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.status-line.loading {
  color: var(--gold);
}

.status-line.success {
  color: var(--accent-dark);
}

.status-line.error {
  color: var(--danger);
}

.month-status,
.refresh-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.refresh-status {
  min-height: 20px;
  margin: -8px 0 14px;
}

.refresh-status.loading {
  color: var(--gold);
}

.refresh-status.success {
  color: var(--accent-dark);
}

.refresh-status.error {
  color: var(--danger);
}

.refresh-status.warning {
  color: var(--gold);
}

.tabs {
  display: grid;
  gap: 8px;
}

.nav-group {
  display: grid;
  gap: 3px;
}

.nav-group p {
  margin: 0 0 3px;
  padding: 0 10px;
  color: var(--sidebar-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tab,
.danger-button,
.secondary-button,
.primary-button {
  min-height: 36px;
  border-radius: 7px;
  padding: 0 12px;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tab {
  width: 100%;
  min-height: 34px;
  color: var(--sidebar-muted);
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
}

.tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.tab.is-active {
  border-color: rgba(56, 185, 144, 0.28);
  color: #fff;
  background: rgba(56, 185, 144, 0.18);
  box-shadow: inset 3px 0 0 var(--sidebar-active);
}

.simple-tabs {
  gap: 7px;
}

.nav-menu {
  position: relative;
  min-width: 0;
}

.nav-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 12px;
  color: var(--sidebar-muted);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "›";
  color: var(--sidebar-muted);
  font-size: 17px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.15s ease, color 0.15s ease;
}

.nav-menu[open] summary::after {
  transform: rotate(270deg);
}

.nav-menu summary:hover,
.nav-menu[open] summary,
.nav-menu.is-active summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.nav-menu.is-active summary {
  border-color: rgba(56, 185, 144, 0.26);
  background: rgba(56, 185, 144, 0.14);
  box-shadow: inset 3px 0 0 var(--sidebar-active);
}

.nav-menu-panel {
  display: grid;
  gap: 4px;
  margin: 5px 0 2px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.nav-subtab {
  min-height: 32px;
  padding-left: 16px;
  font-size: 12px;
}

.danger-button {
  color: #fff;
  background: rgba(180, 35, 24, 0.85);
}

.main {
  min-width: 0;
  padding: 0 24px 34px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  gap: 10px;
  margin: 0 -24px 16px;
  border-bottom: 1px solid var(--line);
  padding: 12px 24px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(23, 33, 29, 0.045);
}

.deployment-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.status-footer {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding: 12px 0 2px;
}

.status-footer .refresh-status {
  margin: 0;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: var(--button-shadow);
}

.status-chip.is-good {
  border-color: rgba(18, 146, 125, 0.28);
  color: var(--accent-dark);
  background: rgba(18, 146, 125, 0.08);
}

.status-chip.is-waiting {
  border-color: rgba(166, 111, 27, 0.28);
  color: var(--gold);
  background: rgba(166, 111, 27, 0.08);
}

.status-chip.is-bad {
  border-color: rgba(180, 35, 24, 0.25);
  color: var(--danger);
  background: rgba(180, 35, 24, 0.08);
}

.utility-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 14px;
  align-items: stretch;
}

.global-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.global-search[hidden] {
  display: none;
}

.global-search-command {
  grid-template-columns: minmax(280px, 1fr) minmax(142px, 0.28fr) minmax(142px, 0.28fr) auto auto auto;
  align-items: end;
  margin-top: 12px;
}

.global-search-date-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.global-search label {
  display: grid;
  gap: 5px;
}

.global-search label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.global-search input {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
}

.global-search button {
  min-height: 42px;
}

.global-quick-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(15, 143, 122, 0.26);
  border-radius: var(--radius);
  padding: 9px 10px;
  background: rgba(15, 143, 122, 0.08);
}

.global-quick-answer[hidden] {
  display: none;
}

.global-quick-answer strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.global-quick-answer span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.global-quick-answer button {
  min-height: 32px;
}

.page-heading,
.month-card {
  border-radius: var(--radius);
}

.page-heading {
  padding: 4px 0;
  background: transparent;
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-heading h1 {
  margin: 2px 0;
  font-size: 24px;
  line-height: 1.1;
}

.aimici-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-color: rgba(15, 143, 122, 0.28);
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--paper) 88%, var(--accent) 12%);
  padding: 0;
}

.aimici-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aimici-toggle[aria-expanded="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 24px rgba(15, 143, 122, 0.22);
}

.page-heading p:last-child {
  max-width: 820px;
}

.month-card {
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.page-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.month-card {
  align-self: end;
  justify-self: end;
  padding: 0;
}

.month-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.month-controls select {
  min-width: 180px;
}

.month-controls button {
  white-space: nowrap;
}

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

.table-sort-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.table-sort-button:hover,
.table-sort-button.is-active {
  color: var(--accent);
}

.compact-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.quick-invoice-input {
  width: 100%;
  min-width: 120px;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 14px;
}

.quick-invoice-input.date-input {
  min-width: 136px;
}

.inline-add-form {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1.2fr) minmax(110px, 0.6fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.inline-add-form input {
  width: 100%;
}

.invoice-rule-add-form {
  grid-template-columns: minmax(130px, 0.55fr) minmax(150px, 0.6fr) minmax(280px, 1.7fr) auto auto;
}

.vendor-cleanup-form {
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) auto auto;
  margin-bottom: 6px;
}

.vendor-alias-box {
  width: 100%;
  min-height: 78px;
  margin-bottom: 6px;
  resize: vertical;
}

.vendor-history-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.35rem 0 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--subtle);
}

.vendor-history-toggle input {
  margin-top: 0.2rem;
}

.vendor-history-toggle span {
  display: grid;
  gap: 0.15rem;
}

.vendor-history-toggle small {
  color: var(--muted);
}

.learning-control-center {
  display: grid;
  gap: 1rem;
}

.learning-control-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.learning-control-summary article {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--subtle);
}

.learning-control-summary article strong { font-size: 1.25rem; }
.learning-control-summary article span { color: var(--muted); font-size: 0.8rem; }
.learning-control-summary article.good { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.learning-control-summary article.warning { border-color: color-mix(in srgb, var(--gold) 58%, var(--line)); }
.learning-control-summary article.bad { border-color: color-mix(in srgb, var(--danger) 58%, var(--line)); }

.learning-control-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--raised);
}

.learning-control-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.learning-control-tabs button.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--button-shadow); }

.learning-review-card,
.learning-history-row,
.learning-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.learning-review-card > div:first-child,
.learning-history-row > div:first-child,
.learning-health-row > div:first-child { display: grid; gap: 0.2rem; min-width: 0; }
.learning-review-card h3,
.learning-review-card p { margin: 0; }
.learning-review-card p,
.learning-review-card small,
.learning-history-row span,
.learning-history-row small,
.learning-health-row span { color: var(--muted); }

.learning-strength {
  justify-self: start;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.learning-conversion-form {
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) 90px minmax(100px, 0.7fr) auto 90px minmax(100px, 0.7fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.learning-health-row.is-bad { border-left: 3px solid var(--danger); padding-left: 0.75rem; }
.learning-health-row.is-warning { border-left: 3px solid var(--gold); padding-left: 0.75rem; }

#vendorMergePreviewModal:not([hidden]) { z-index: 31000 !important; }
.learning-merge-warning { display: grid; gap: .25rem; margin: .8rem 0; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--warning, #a46b17) 48%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--warning, #a46b17) 12%, var(--surface, #fff)); color: var(--text, #17211e); }
.learning-merge-warning span { color: var(--muted, #5d6a65); }
.vendor-merge-preview-card { width: min(760px, calc(100vw - 2rem)); }
.vendor-merge-preview-details { padding: 1rem 0; }
.vendor-merge-preview-details h3 { margin-bottom: 0.35rem; }
.vendor-merge-preview-details p { color: var(--muted); }

@media (max-width: 900px) {
  .learning-control-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-conversion-form { grid-template-columns: 1fr 1fr; }
  .learning-conversion-form > span { display: none; }
  .learning-review-card,
  .learning-history-row,
  .learning-health-row { align-items: stretch; flex-direction: column; }
}

.vendor-alias-groups {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.vendor-alias-groups > h3 {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vendor-directory-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.vendor-directory-heading h3,
.vendor-directory-heading p {
  margin: 0;
}

.vendor-directory-heading > span {
  color: var(--muted);
  font-size: 0.82rem;
}

.vendor-alias-directory td:first-child {
  display: grid;
  gap: 0.15rem;
}

.vendor-alias-directory td:first-child small {
  color: var(--muted);
}

.vendor-alias-directory input {
  width: min(100%, 360px);
}

@media (max-width: 760px) {
  .vendor-alias-directory {
    min-width: 680px;
  }
}

.vendor-alias-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
}

.vendor-alias-card > div {
  display: grid;
  gap: 0.2rem;
}

.vendor-alias-card span {
  color: var(--muted);
  font-size: 0.84rem;
}

.phone-scanner-modal {
  max-width: 520px;
}

#phoneScannerModal {
  z-index: 24000;
}

.phone-scanner-qr {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 160px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.phone-scanner-qr img {
  width: min(260px, 100%);
  height: auto;
}

.phone-scanner-qr a {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.phone-scanner-loading,
.phone-scanner-qr-error {
  align-self: center;
  margin: auto;
  color: var(--muted);
  text-align: center;
}

.phone-scanner-loading span {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: phone-scanner-spin .8s linear infinite;
}

@keyframes phone-scanner-spin { to { transform: rotate(360deg); } }

.invoice-rule-add-form textarea {
  min-height: 42px;
  resize: vertical;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--field);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

select,
input {
  min-height: 34px;
  padding: 0 9px;
}

textarea {
  resize: vertical;
  padding: 9px;
  line-height: 1.45;
}

.view {
  display: none;
}

.view.is-visible {
  display: grid;
  gap: 12px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.workspace-strip {
  display: flex;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raised);
  scrollbar-width: none;
}

.workspace-strip::-webkit-scrollbar {
  display: none;
}

.workspace-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: 1 0 190px;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  box-shadow: var(--button-shadow);
}

.workspace-tab:hover,
.workspace-tab:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: var(--soft-shadow);
}

.workspace-tab.active {
  border-color: var(--accent);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.workspace-tab .tab-icon,
.workspace-tab .tab-count {
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent-dark);
  background: var(--button);
  font-weight: 900;
}

.workspace-tab .tab-count {
  width: 28px;
  border-radius: 999px;
  font-size: 11px;
}

.workspace-tab.active .tab-icon,
.workspace-tab.active .tab-count {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.workspace-tab .tab-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workspace-tab strong,
.workspace-tab small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tab strong {
  font-size: 13px;
  line-height: 1.1;
}

.workspace-tab small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.workspace-tab.active small {
  color: rgba(255, 255, 255, 0.78);
}

.dashboard-workspace-strip {
  margin-bottom: 2px;
}

.dashboard-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

.dashboard-pl-feed-panel {
  padding: 14px;
}

.dashboard-feed-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-feed-card {
  display: grid;
  gap: 3px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: var(--subtle);
  text-align: left;
}

.dashboard-feed-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-feed-card strong {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.05;
}

.dashboard-feed-card small {
  color: var(--muted);
  font-weight: 750;
}

.dashboard-feed-card.good {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

.dashboard-feed-card.missing {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--paper));
}

.dashboard-feed-card.neutral {
  background: color-mix(in srgb, var(--raised) 68%, var(--paper));
}

.dashboard-feed-card:hover,
.dashboard-feed-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--soft-shadow);
}

.dashboard-action {
  display: grid;
  gap: 4px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--panel-shadow);
  text-align: left;
}

.dashboard-action.primary {
  border-color: rgba(33, 111, 93, 0.28);
  color: #fff;
  background: linear-gradient(135deg, #107e6d, var(--accent-dark));
}

.dashboard-action span {
  color: inherit;
  opacity: 0.72;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-action strong {
  font-size: 18px;
  line-height: 1.1;
}

.dashboard-action:hover,
.dashboard-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--soft-shadow);
}

.metric,
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--panel-shadow);
}

.invoice-ops-panel {
  overflow: hidden;
}

.invoice-ops-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.invoice-ops-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  border-right: 1px solid var(--line);
  padding: 13px 14px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.invoice-ops-card:last-child {
  border-right: 0;
}

.invoice-ops-card:not(:disabled):hover,
.invoice-ops-card:not(:disabled):focus-visible {
  background: var(--subtle);
  outline: none;
}

.invoice-ops-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-ops-card strong {
  font-size: 24px;
  line-height: 1;
}

.invoice-ops-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.invoice-ops-card.warning strong {
  color: var(--danger);
}

.invoice-ops-card.credit strong,
.invoice-ops-card.money strong {
  color: var(--gold);
}

.invoice-ops-card.good strong {
  color: var(--accent-dark);
}

.metric {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px 14px;
  border-color: transparent;
  background: color-mix(in srgb, var(--paper) 92%, var(--subtle));
}

.metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.metric strong {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
}

.action-center-panel {
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
}

.attention-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.attention-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: center;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  background: var(--subtle);
  text-align: left;
}

.attention-summary-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.attention-summary-card strong {
  grid-row: span 2;
  min-width: 46px;
  font-size: 30px;
  line-height: 1;
  text-align: right;
}

.attention-summary-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.attention-summary-card:hover,
.attention-summary-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.attention-summary-card.warning strong {
  color: var(--danger);
}

.attention-summary-card.credit strong {
  color: var(--gold);
}

.attention-summary-card.checklist strong {
  color: var(--accent-dark);
}

.attention-summary-card.operations strong { color: var(--accent); }
.operations-attention-list { display: grid; gap: 8px; }
.operations-urgent-list { display: grid; gap: 8px; }
.operations-cleanup-backlog { margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 94%, var(--body)); }
.operations-cleanup-backlog > summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px; cursor: pointer; font-weight: 800; }
.operations-cleanup-backlog > .hint { margin: 0; padding: 0 12px 10px; }
.operations-cleanup-backlog .operations-attention-row { border-width: 1px 0 0; border-radius: 0; }
.operations-attention-row {
  display: grid;
  grid-template-columns: minmax(120px, .55fr) minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}
.operations-attention-row:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.operations-attention-row span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.operations-attention-row small { color: var(--muted); }
.operations-attention-row b { color: var(--accent); font-size: 12px; }
.operations-row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.operations-row-actions button { min-height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; color: var(--ink); background: var(--paper); font-size: 11px; font-weight: 800; }
.permission-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px; }
.permission-matrix article { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: color-mix(in srgb, var(--paper) 94%, var(--body)); }
.permission-matrix span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.invoice-intake-options { position: relative; }
.invoice-intake-options > summary { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; cursor: pointer; font-weight: 800; list-style: none; background: var(--paper); }
.invoice-intake-options > summary::-webkit-details-marker { display: none; }
.invoice-intake-options > div { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; gap: 6px; width: 230px; border: 1px solid var(--line); border-radius: 10px; padding: 7px; background: var(--paper); box-shadow: 0 14px 30px rgba(12,24,20,.14); }
.invoice-intake-options > div button { justify-content: flex-start; width: 100%; }

.manual-invoice-fallback { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--paper) 92%, var(--accent-soft)); }
.manual-invoice-fallback > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 800; list-style: none; }
.manual-invoice-fallback > summary::-webkit-details-marker { display: none; }
.manual-invoice-fallback > summary::after { content: "+"; font-size: 20px; color: var(--muted); }
.manual-invoice-fallback[open] > summary::after { content: "−"; }
.manual-invoice-fallback > summary small { margin-left: auto; margin-right: 12px; color: var(--muted); font-weight: 700; }
.manual-invoice-fallback-body { padding: 0 12px 12px; }
.manual-invoice-fallback-body .panel-header { margin-bottom: 8px; }
.manual-invoice-fallback-body textarea { min-height: 130px; }
.invoice-intake-preview-panel { align-content: start; }
.invoice-line-table tr.has-manual-edits { box-shadow: inset 3px 0 0 var(--accent); }

.invoice-verification-item > summary { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.invoice-verification-item > summary::-webkit-details-marker { display: none; }
.verification-item-identity { display: grid; gap: 2px; min-width: 0; }
.verification-item-identity strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.verification-item-identity small { color: var(--muted); font-weight: 800; }
.verification-item-change-count { border-radius: 999px; padding: 4px 8px; color: var(--warning-dark, #8a4b00); background: color-mix(in srgb, var(--warning, #d98619) 13%, var(--paper)); font-size: .74rem; font-weight: 900; white-space: nowrap; }
.invoice-verification-item > summary em { color: var(--muted); font-size: .75rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.invoice-verification-item > summary::after { content: "⌄"; color: var(--muted); font-weight: 900; }
.invoice-verification-item[open] > summary::after { transform: rotate(180deg); }
.invoice-verification-body { display: grid; gap: 10px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.invoice-verification-edit { border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.invoice-verification-edit > summary { padding: 8px 10px; cursor: pointer; color: var(--accent-dark); font-size: .8rem; font-weight: 900; }
.invoice-verification-edit .learning-review-editor { padding: 0 10px 10px; }
.verification-item-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.verification-item-footer p { flex: 1; }

@media (max-width: 760px) {
  .invoice-verification-item > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .invoice-verification-item > summary em { grid-column: 1 / -1; }
  .invoice-verification-item > summary::after { display: none; }
  .verification-item-footer { align-items: stretch; flex-direction: column; }
}

/* V3.95 separates employee records from daily team operations. */
.people-workspace-intro,
.operations-launch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.people-workspace-intro article,
.operations-launch-grid button {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.operations-launch-grid button {
  min-height: 128px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.operations-launch-grid button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--soft-shadow);
  transform: translateY(-1px);
}

.people-workspace-intro span,
.operations-launch-grid span {
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.people-workspace-intro small,
.operations-launch-grid small {
  color: var(--muted);
  line-height: 1.4;
}

.operations-section-tabs {
  display: flex;
  gap: 5px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
  background: var(--subtle);
  overflow-x: auto;
}

.staff-pocket-shell.is-admin-operations {
  justify-items: stretch;
}

.staff-pocket-shell.is-admin-operations .staff-admin-shell {
  width: 100%;
}

.operations-section-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.operations-section-tabs button:hover,
.operations-section-tabs button.is-active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(20, 38, 31, .1);
}

.staff-admin-manager-grid.single-section { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .people-workspace-intro,
  .operations-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .people-workspace-intro,
  .operations-launch-grid { grid-template-columns: minmax(0, 1fr); }
  .operations-launch-grid button { min-height: 104px; }
}

body[data-active-view="staff"] .topbar,
body[data-active-view="people"] .topbar {
  padding: 12px 16px !important;
}

body[data-active-view="staff"] .workbar,
body[data-active-view="people"] .workbar {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-active-view="staff"] .page-heading,
body[data-active-view="people"] .page-heading {
  padding: 0 !important;
}

body[data-active-view="staff"] .page-heading h1,
body[data-active-view="people"] .page-heading h1 {
  font-size: clamp(28px, 3vw, 38px) !important;
}

.operations-section-tabs {
  align-items: center;
  margin-bottom: 0;
}

.operations-section-tabs .operations-staff-link {
  flex: 0 0 auto;
  margin-left: auto;
  border-left: 1px solid var(--line);
  padding: 7px 11px;
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.operations-today-board {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.operations-today-heading,
.operations-lineup-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.operations-today-heading h2 {
  margin: 2px 0 3px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}

.operations-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.operations-status-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  color: var(--ink);
  background: var(--subtle);
  text-align: left;
  cursor: pointer;
}

.operations-status-grid button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

.operations-status-grid span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.operations-status-grid strong {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
}

.operations-status-grid small { color: var(--muted); }

.operations-lineup {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.operations-lineup-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 7px;
}

.operations-lineup-list article {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--subtle);
}

.operations-lineup-list span,
.operations-lineup-list small { color: var(--muted); }

@media (max-width: 820px) {
  .operations-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-section-tabs .operations-staff-link { margin-left: 0; border-left: 0; }
}

@media (max-width: 520px) {
  .operations-today-heading { align-items: stretch; flex-direction: column; }
  .operations-status-grid { grid-template-columns: minmax(0, 1fr); }
}

.row-action-menu { position: relative; }
.row-action-menu > summary { display: grid; place-items: center; min-width: 36px; min-height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; list-style: none; font-weight: 900; letter-spacing: .08em; }
.row-action-menu > summary::-webkit-details-marker { display: none; }
.row-action-menu > div { position: absolute; top: calc(100% + 5px); right: 0; z-index: 15; display: grid; gap: 5px; min-width: 110px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--paper); box-shadow: 0 12px 28px rgba(12,24,20,.14); }
.finance-trace-modal { width: min(760px, calc(100vw - 28px)) !important; max-height: min(820px, calc(100dvh - 28px)); overflow: hidden; }
.finance-trace-content { display: grid; gap: 16px; min-height: 0; padding: 16px; overflow: auto; }
.finance-trace-formula { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.finance-trace-formula > div, .finance-trace-result { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 11px 12px; background: color-mix(in srgb, var(--paper) 94%, var(--body)); }
.finance-trace-invoices { display: grid; gap: 6px; }
.finance-trace-invoices button { display: flex; justify-content: space-between; gap: 16px; width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: var(--ink); background: var(--paper); text-align: left; }
.bulk-completion-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; padding: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.bulk-completion-summary div { display: grid; gap: 3px; }
.bulk-completion-summary span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.bulk-completion-summary p { grid-column: 1 / -1; margin: 0; color: var(--muted); }

:where(button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 68%, transparent) !important; outline-offset: 2px; }
html.dark-mode :where(.finance-trace-formula > div, .finance-trace-result, .bulk-completion-summary, .operations-cleanup-backlog) { background: color-mix(in srgb, var(--paper) 88%, var(--body)); }
html.dark-mode :where(.row-action-menu > div, .invoice-intake-options > div, .finance-trace-invoices button) { background: var(--paper); border-color: color-mix(in srgb, var(--line) 78%, #ffffff); }

@media (min-width: 1181px) {
  .action-center-panel .attention-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-pl-feed-panel .dashboard-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-pl-feed-panel .dashboard-feed-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

:where(.task-workspace-window, .command-work-modal, .repair-destination-modal, .bulk-recipe-modal, .recipe-viewer-modal, .source-modal, .invoice-detail-modal, .invoice-preview-modal, .drive-preview-modal) {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--paper) !important;
  box-shadow: 0 24px 60px rgba(12, 24, 20, .18) !important;
}
:where(.task-workspace-header, .command-work-header, .repair-destination-header, .bulk-recipe-header) { border-bottom: 1px solid var(--line); padding: 14px 16px !important; }
:where(.modal-actions, .command-work-footer, .repair-destination-footer) { border-top: 1px solid var(--line); padding: 11px 16px !important; }

@media (max-width: 900px) {
  .permission-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-attention-row { grid-template-columns: 1fr auto; }
  .operations-attention-row small { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .permission-matrix { grid-template-columns: 1fr; margin: 10px; }
  .bulk-completion-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.dashboard-attention-details {
  border-top: 1px solid var(--line);
  padding: 0 12px 12px;
}

.dashboard-attention-details > summary {
  width: max-content;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: var(--paper);
  font-size: 12px;
  font-weight: 850;
}

.dashboard-attention-details > summary::-webkit-details-marker {
  display: none;
}

.dashboard-attention-details > summary::after {
  content: " +";
}

.dashboard-attention-details[open] > summary::after {
  content: " -";
}

.action-center-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 12px;
  padding: 10px 0 0;
}

.action-block {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--raised);
}

.dashboard-detail-card {
  align-content: start;
}

.dashboard-detail-card summary,
.dashboard-details-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.dashboard-detail-card summary::-webkit-details-marker,
.dashboard-details-panel summary::-webkit-details-marker {
  display: none;
}

.dashboard-detail-card summary::after,
.dashboard-details-panel summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--paper);
  font-size: 18px;
  font-weight: 800;
}

.dashboard-detail-card[open] summary::after,
.dashboard-details-panel[open] summary::after {
  content: "-";
}

.dashboard-details-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--panel-shadow);
}

.dashboard-details-panel > summary h2,
.dashboard-detail-card h3 {
  margin: 0;
}

.dashboard-details-panel > summary + * {
  margin-top: 14px;
}

.dashboard-insights-panel .performance-grid,
.dashboard-details-panel .secondary-dashboard-grid,
.dashboard-details-panel .dashboard-grid {
  margin-top: 14px;
}

.soft-options {
  border: 0;
}

.soft-options summary {
  width: max-content;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: var(--paper);
  font-size: 12px;
  font-weight: 850;
}

.soft-options summary::-webkit-details-marker {
  display: none;
}

.soft-options summary::after {
  content: " +";
}

.soft-options[open] summary::after {
  content: " -";
}

.soft-options .review-filter-row {
  margin-top: 8px;
}

.percent-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-percent-panel {
  padding: 14px;
}

.compact-panel-header {
  margin-bottom: 10px;
}

.compact-panel-header h2 {
  font-size: 16px;
}

.dashboard-percent-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}

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

.ordering-command-panel {
  display: grid;
  gap: 12px;
}

.ordering-space-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.ordering-space-tab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "note note";
  gap: 2px 8px;
  align-items: center;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.ordering-space-tab:hover,
.ordering-space-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--paper));
}

.ordering-space-tab span {
  grid-area: label;
  min-width: 0;
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ordering-space-tab strong {
  grid-area: count;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.ordering-space-tab small {
  grid-area: note;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.ordering-space-panel {
  display: none;
}

.ordering-space-panel.is-active {
  display: block;
}

.weekly-order-panel {
  overflow: hidden;
}

.order-intake-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 12px;
  overflow: hidden;
  border: 1px solid var(--larder-hairline, var(--line));
  border-radius: 9px;
  background: var(--larder-hairline, var(--line));
}

.order-intake-steps span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--paper);
  font-size: 11px;
  font-weight: 800;
}

.order-intake-steps strong {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
  font-size: 11px;
}

.weekly-order-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px;
}

.weekly-order-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.weekly-order-form input,
.weekly-order-form select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.vendor-buy-text {
  display: block;
  width: calc(100% - 24px);
  min-height: 160px;
  margin: 0 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  resize: vertical;
}

.order-guide-review {
  display: grid;
  gap: 10px;
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--raised);
}

.order-guide-review[hidden] {
  display: none;
}

.order-guide-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.order-guide-header strong,
.order-guide-header span {
  display: block;
}

.order-guide-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.order-guide-table-wrap {
  margin: 0;
  max-height: 520px;
}

.order-guide-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-guide-filters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--larder-hairline, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: var(--paper);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.order-guide-filters button strong {
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--ink);
  background: var(--raised);
  text-align: center;
}

.order-guide-filters button.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

.order-guide-row.is-needs-review td:first-child {
  box-shadow: inset 3px 0 0 var(--warning, #b97721);
}

.order-guide-row.is-skip {
  opacity: 0.62;
}

.order-guide-table {
  min-width: 1060px;
}

.order-guide-table input,
.order-guide-table select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.order-guide-table td:first-child input {
  min-width: 220px;
}

.order-guide-table td:nth-child(2) input,
.order-guide-table td:nth-child(3) input {
  min-width: 76px;
}

.order-guide-table td:nth-child(4) input {
  min-width: 130px;
}

.decision-note {
  display: block;
  min-width: 120px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.order-guide-vendor-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.order-guide-vendor-column {
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--paper);
}

.order-guide-vendor-column strong {
  display: block;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  color: var(--ink);
  font-size: 15px;
}

.order-guide-vendor-column ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.order-guide-vendor-column li {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.compact-drop-zone {
  min-height: 82px;
  margin: 0 12px 10px;
  border-radius: 8px;
}

.weekly-order-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 12px;
}

.weekly-order-actions .status-line {
  flex: 1;
  margin: 0;
}

.weekly-order-file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

.weekly-order-file-summary {
  display: grid;
  flex: 1 0 100%;
  gap: 2px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}

.weekly-order-file-summary small {
  color: var(--muted);
}

.weekly-order-file-preview span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--raised);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.weekly-order-file-preview small {
  color: var(--muted);
  font-weight: 700;
}

.weekly-order-history {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.weekly-order-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper);
}

.weekly-order-card strong,
.weekly-order-card span,
.weekly-order-card small {
  display: block;
}

.weekly-order-card span,
.weekly-order-card small,
.weekly-order-card p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.weekly-order-card p {
  margin: 4px 0 0;
}

.weekly-order-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.vendor-buy-history {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.vendor-buy-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper);
}

.vendor-buy-card-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.vendor-buy-card-header strong,
.vendor-buy-card-header span,
.vendor-buy-card-header small {
  display: block;
}

.vendor-buy-card-header span,
.vendor-buy-card-header small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.vendor-buy-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.vendor-buy-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--raised);
}

.vendor-buy-group strong,
.vendor-buy-group span {
  display: block;
}

.vendor-buy-group span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.vendor-buy-group ul {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.needs-review-list,
.return-credit-list {
  display: grid;
  gap: 8px;
}

.needs-review-card,
.return-credit-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(240px, 1.4fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid #be5342;
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--paper);
}

.needs-review-card {
  grid-template-columns: auto minmax(180px, 0.9fr) minmax(240px, 1.4fr) auto;
}

.return-credit-card {
  border-color: var(--line);
  border-left-color: #63768a;
  background: var(--paper);
}

.return-credit-card.is-open {
  border-left-color: #be5342;
}

.is-work-link { cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.is-work-link:hover { border-color: var(--accent); box-shadow: var(--soft-shadow); transform: translateY(-1px); }
.is-work-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.return-credit-card.is-matched {
  border-left-color: #2d6f52;
}

.return-credit-card.is-resolved {
  opacity: 0.72;
}

.needs-review-card div:first-child,
.return-credit-card div:first-child {
  display: grid;
  gap: 2px;
}

.needs-review-card strong,
.return-credit-card strong {
  font-size: 14px;
}

.needs-review-card span,
.needs-review-card p,
.return-credit-card span,
.return-credit-card em {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.return-credit-meta {
  display: grid;
  gap: 2px;
}

.return-credit-meta span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.return-credit-meta em {
  font-style: normal;
}

.needs-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.invoice-exception-editor {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  overflow: hidden;
}

.invoice-exception-editor summary {
  cursor: pointer;
  padding: 9px 11px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.invoice-exception-fields,
.invoice-exception-image-fields > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 11px 10px;
}

.invoice-exception-image-fields {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.invoice-exception-image-fields > strong {
  padding: 0 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-exception-editor label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.invoice-exception-editor label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-exception-editor input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 13px;
}

.invoice-exception-editor .needs-review-actions {
  padding: 0 11px 11px;
}

.invoice-exception-media {
  margin: 0 11px 11px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.invoice-exception-media > summary {
  padding: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
}

.invoice-exception-media .invoice-exception-image-fields > div {
  padding-inline: 0;
}

.invoice-exception-media .invoice-exception-image-fields > strong {
  padding-inline: 0;
}

.invoice-exception-media .needs-review-actions {
  padding-inline: 0;
  padding-bottom: 0;
}

.review-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--raised);
}

.review-select-all,
.review-card-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.review-card-check {
  align-self: center;
  justify-self: start;
}

.review-card-check input,
.review-select-all input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.review-bulk-bar small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.empty-state {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.invoice-workflow-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.invoice-workflow-strip article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.invoice-workflow-strip span {
  grid-row: span 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.invoice-workflow-strip strong {
  font-size: 13px;
}

.invoice-workflow-strip small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-direction-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.invoice-direction-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--soft-shadow);
  cursor: pointer;
}

.invoice-direction-card span {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.invoice-direction-card strong {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.05;
}

.invoice-direction-card small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.invoice-direction-card.is-active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 88% 16%, rgba(82, 183, 136, 0.24), transparent 34%),
    linear-gradient(135deg, #101923, #172635 62%, #0b1118);
  box-shadow: 0 18px 42px rgba(16, 25, 35, 0.2);
}

.invoice-direction-card.is-active span,
.invoice-direction-card.is-active small {
  color: rgba(255, 255, 255, 0.74);
}

.invoice-space {
  display: none;
}

.invoice-space.is-active {
  display: grid;
  gap: 12px;
}

.ordering-par-input {
  width: 92px;
  min-width: 92px;
}

.ordering-item-input {
  min-width: 210px;
}

.ordering-vendor-input {
  min-width: 150px;
}

.ordering-unit-input {
  width: 82px;
  min-width: 82px;
}

.menu-demand-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.menu-demand-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--subtle);
}

.menu-demand-summary span,
.menu-demand-menu-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.menu-demand-summary strong {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
}

.menu-demand-summary small,
.menu-demand-table-wrap small {
  color: var(--muted);
  font-weight: 750;
}

.menu-demand-menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.menu-demand-menu-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(92px, 0.32fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.menu-demand-menu-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.menu-demand-menu-card strong,
.menu-demand-menu-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-demand-menu-card input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 8px;
}

.menu-demand-table-wrap {
  margin-top: 0;
}

.sales-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.sales-import-progress {
  position: sticky;
  top: 10px;
  z-index: 4;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  margin: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  box-shadow: 0 10px 24px rgba(24, 38, 34, 0.12);
}

.sales-upload-note {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--subtle) 88%, var(--accent) 12%);
}

.sales-upload-note strong {
  color: var(--ink);
  font-size: 12px;
}

.sales-upload-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.sales-upload-note b { color: var(--ink); }

.sales-preflight-backdrop { z-index: 23500; }

.sales-preflight-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(780px, calc(100dvh - 32px));
  overflow: auto;
}

.sales-preflight-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.sales-preflight-summary article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--subtle);
}

.sales-preflight-summary span,
.sales-preflight-summary small { color: var(--muted); font-size: 11px; font-weight: 800; }
.sales-preflight-summary strong { color: var(--ink); font-size: clamp(19px, 2vw, 26px); }

.sales-preflight-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.7fr);
  gap: 14px;
}

.sales-preflight-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sales-preflight-heading h3 { margin: 0; }
.sales-preflight-files { display: grid; gap: 6px; }

.sales-preflight-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.sales-preflight-file strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-preflight-file small { grid-column: 1 / -1; color: var(--muted); }
.sales-preflight-file.is-empty { background: color-mix(in srgb, var(--warning) 7%, var(--panel)); }
.sales-preflight-file.is-optional { opacity: 0.78; }

.sales-preflight-options {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--subtle);
}

.sales-preflight-options label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.sales-preflight-warnings { display: grid; gap: 8px; }
.sales-preflight-warning { padding: 9px 10px; border-radius: 9px; color: var(--ink); background: color-mix(in srgb, var(--warning) 12%, var(--panel)); font-size: 12px; font-weight: 750; line-height: 1.4; }
.sales-preflight-warning.is-duplicate { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.sales-preflight-actions { position: sticky; bottom: 0; margin: 16px -18px -18px; padding: 12px 18px; background: color-mix(in srgb, var(--panel) 96%, transparent); border-top: 1px solid var(--line); }
.sales-preflight-actions .hint { margin-right: auto; }

@media (max-width: 720px) {
  .sales-preflight-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .sales-preflight-summary { grid-template-columns: 1fr 1fr; }
  .sales-preflight-body { grid-template-columns: 1fr; }
}

.overhead-ledger-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(150px, 0.65fr)) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--subtle);
}

.overhead-ledger-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.overhead-ledger-toolbar input,
.overhead-ledger-toolbar select { width: 100%; }

.overhead-ledger-toolbar .overhead-review-toggle {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel);
  white-space: nowrap;
}

.overhead-review-toggle input { width: auto; }
.overhead-ledger-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overhead-ledger-table td { vertical-align: middle; }
.overhead-ledger-table td small { display: block; margin-top: 3px; color: var(--muted); }

.overhead-category-chip,
.overhead-review-signal,
.overhead-review-clean {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.overhead-category-chip { border: 1px solid var(--line); color: var(--ink); background: var(--subtle); }
.overhead-review-signal { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.overhead-review-clean { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.overhead-ledger-review-row { background: color-mix(in srgb, var(--danger) 3%, transparent); }

@media (max-width: 860px) {
  .overhead-ledger-toolbar { grid-template-columns: 1fr 1fr; }
  .overhead-ledger-search { grid-column: 1 / -1; }
  .overhead-ledger-table-wrap { overflow-x: auto; }
  .overhead-ledger-table { min-width: 760px; }
}

.sales-import-progress:not([hidden]) { display: grid; }

.sales-import-progress div { display: grid; gap: 3px; }
.sales-import-progress strong { color: var(--ink); }
.sales-import-progress small { color: var(--muted); font-weight: 700; }

.sales-import-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: sales-import-spin 750ms linear infinite;
}

.sales-import-progress-track {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 82%, transparent);
}

.sales-import-progress-track i {
  display: block;
  width: 15%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms ease;
}

@keyframes sales-import-spin { to { transform: rotate(360deg); } }

.sales-row-type {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--subtle);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sales-import-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--subtle);
}

.sales-import-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sales-import-summary strong {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
}

.sales-import-summary small {
  color: var(--muted);
  font-weight: 750;
}

.sheet-group-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--subtle);
  font-size: 12px;
  font-weight: 750;
}

.sheet-group-summary span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.sheet-group-summary strong {
  color: var(--accent-dark);
}

.sheet-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 12px;
}

.sheet-group-card {
  display: grid;
  gap: 4px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
  cursor: pointer;
}

.sheet-group-card span {
  font-size: 12px;
  font-weight: 900;
}

.sheet-group-card strong {
  font-size: 24px;
  line-height: 1;
}

.sheet-group-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.sheet-group-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

.par-sheet-custom-form {
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr) auto;
  margin: 0 12px 10px;
}

.custom-sheet-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.custom-sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--subtle);
}

.custom-sheet-row strong,
.custom-sheet-row span {
  display: block;
}

.custom-sheet-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-audit-grid,
.vendor-test-results {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.learning-search-bar {
  padding: 0 12px 12px;
}

.learning-search-bar input {
  width: 100%;
}

.learning-conflict-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(168, 61, 52, 0.18);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--gold) 8%, var(--paper));
}

.learning-conflict-panel > div:first-child {
  display: grid;
  gap: 2px;
}

.learning-conflict-panel strong {
  font-size: 15px;
}

.learning-conflict-panel span,
.learning-conflict-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.learning-conflict-list {
  display: grid;
  gap: 8px;
}

.learning-conflict-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper);
}

.learning-conflict-card span,
.learning-conflict-card strong,
.learning-conflict-card small {
  display: block;
}

.learning-conflict-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.learning-conflict-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.learning-conflict-custom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(84px, 0.35fr) minmax(130px, 0.45fr) auto;
  gap: 7px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.learning-conflict-custom input,
.learning-conflict-custom select {
  width: 100%;
  min-width: 0;
}

.audit-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.audit-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  background: var(--raised);
  font-weight: 900;
}

.audit-section > summary b {
  color: var(--accent-dark);
}

.invoice-audit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--paper);
}

.invoice-audit-card.has-select {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.invoice-audit-card .audit-line-editor-list,
.invoice-audit-card .invoice-exception-editor,
.needs-review-card .audit-line-editor-list,
.needs-review-card .invoice-exception-editor {
  grid-column: 1 / -1;
}

.audit-line-editor-list {
  display: grid;
  gap: 8px;
}

.audit-line-editor {
  display: grid;
  grid-template-columns: 58px minmax(170px, 1.4fr) minmax(86px, 0.7fr) minmax(70px, 0.45fr) minmax(82px, 0.55fr) minmax(92px, 0.65fr) minmax(86px, 0.6fr) minmax(112px, 0.8fr) auto;
  gap: 7px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--raised) 55%, var(--paper));
}

.audit-line-editor strong {
  margin: 0 0 8px;
  font-size: 12px;
}

.audit-line-editor label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.audit-line-editor input,
.audit-line-editor select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 12px;
  text-transform: none;
}

.audit-line-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .audit-line-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-line-editor strong,
  .audit-line-editor button {
    grid-column: 1 / -1;
  }
}

/* V3.16 invoice review uses the full canvas until Original Invoice is opened. */
body .invoice-review-panel,
body .invoice-review-workspace,
body .invoice-review-table-wrap {
  width: 100%;
  max-width: none;
  min-width: 0;
  overscroll-behavior-x: contain;
}

html:has(body.task-workspace-open),
body.task-workspace-open {
  overscroll-behavior-x: none;
}

body .invoice-review-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
}

body .invoice-review-workspace:not(.has-reference) .invoice-review-table-wrap {
  grid-column: 1 / -1;
}

body .invoice-review-workspace.has-reference {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr) !important;
}

body .invoice-review-workspace.has-reference .invoice-review-table-wrap,
body .invoice-review-workspace.has-reference .invoice-line-reference {
  width: 100%;
  min-width: 0;
}

body .invoice-review-table-wrap .invoice-line-table {
  width: 100%;
  max-width: none;
}

@media (max-width: 1050px) {
  body .invoice-review-workspace.has-reference {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .invoice-review-workspace.has-reference .invoice-line-reference {
    position: relative;
    top: auto;
    order: 1;
  }

  body .invoice-review-workspace.has-reference .invoice-review-table-wrap {
    order: 2;
  }
}

@media (max-width: 620px) {
  .audit-line-editor {
    grid-template-columns: 1fr;
  }
}

.duplicate-name-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--warning, #d98619) 42%, var(--line));
  border-radius: 8px;
  padding: 7px 8px;
  color: color-mix(in srgb, var(--warning, #9a6500) 78%, var(--ink));
  background: color-mix(in srgb, var(--warning, #d98619) 9%, var(--paper));
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
  text-transform: none;
}

.duplicate-name-warning[hidden] {
  display: none !important;
}

.duplicate-name-warning button {
  min-height: 26px;
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 4px 7px;
  color: inherit;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}

/* V3.20 explicit saved-image rename action. */
.page-preview-tools.has-unsaved-name,
.invoice-image-name-row.has-unsaved-name {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}

[data-save-saved-image-name] {
  min-width: 54px !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
}

/* V3.12 responsive workspace: use the available screen without clipped work areas. */
html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

.app-shell,
.sidebar,
.main,
.staff-page-shell {
  max-width: none !important;
}

.sidebar,
.main {
  width: 100% !important;
}

.main,
.view,
.view > *,
.panel,
.card,
.table-wrap,
.responsive-table,
.command-work-content,
.repair-destination-content {
  min-width: 0;
}

.main {
  padding-inline: clamp(10px, 1.5vw, 24px) !important;
}

body:not(.staff-page) .staff-page-shell {
  width: 100% !important;
  padding: 14px clamp(10px, 1.5vw, 24px) 32px !important;
}

/* Large work surfaces fill the viewport; small prompts retain their compact size. */
.command-work-backdrop,
.repair-destination-backdrop,
#lineSourceModal,
#invoiceDetailModal,
#invoicePreviewModal,
#drivePreviewModal {
  padding: clamp(8px, 1.25vw, 18px) !important;
}

.modal.command-work-modal,
.modal.repair-destination-modal,
.modal.source-modal,
.modal.invoice-detail-modal,
.modal.invoice-preview-modal,
.modal.drive-preview-modal {
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - clamp(16px, 2.5vw, 36px)) !important;
  max-height: none !important;
  min-height: 0;
  overflow: hidden;
}

.modal.source-modal,
.modal.invoice-detail-modal,
.modal.invoice-preview-modal,
.modal.drive-preview-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.invoice-detail-content,
.invoice-preview-content,
.line-source-content,
.drive-preview-content {
  min-width: 0;
  min-height: 0;
  max-height: none !important;
  overflow: auto;
}

.modal .panel-header,
.command-work-header,
.repair-destination-header {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  :root {
    --command-pad: 10px;
  }

  .app-shell,
  .main,
  .view,
  .staff-page,
  .staff-page-shell {
    width: 100% !important;
  }

  .main {
    padding: 10px 10px max(24px, env(safe-area-inset-bottom)) !important;
  }

  .staff-page-shell {
    padding: 8px 8px max(18px, env(safe-area-inset-bottom)) !important;
  }

  .topbar,
  .panel,
  .card {
    max-width: 100%;
  }

  .command-work-backdrop,
  .repair-destination-backdrop,
  #lineSourceModal,
  #invoiceDetailModal,
  #invoicePreviewModal,
  #drivePreviewModal {
    place-items: stretch !important;
    padding: 0 !important;
  }

  .modal.command-work-modal,
  .modal.repair-destination-modal,
  .modal.source-modal,
  .modal.invoice-detail-modal,
  .modal.invoice-preview-modal,
  .modal.drive-preview-modal {
    width: 100vw !important;
    height: 100dvh !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .modal.source-modal,
  .modal.invoice-detail-modal,
  .modal.invoice-preview-modal,
  .modal.drive-preview-modal {
    padding: 10px !important;
  }

  .command-work-content,
  .repair-destination-content {
    padding: 10px !important;
  }

  .command-work-tabs {
    padding-inline: 10px !important;
  }

  .command-work-footer,
  .repair-destination-footer {
    padding: 10px !important;
  }

  .table-wrap,
  .responsive-table,
  .invoice-detail-content,
  .invoice-preview-content,
  .line-source-content,
  .drive-preview-content {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Keep the V4.28 period picker authoritative over legacy month-card layers. */
body .month-card.reporting-period-control {
  position: relative !important;
  display: block !important;
  align-self: end !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body .month-card.reporting-period-control[hidden],
body .reporting-period-menu[hidden] {
  display: none !important;
}

body .month-management-controls {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto !important;
  align-items: end !important;
  justify-content: stretch !important;
}

@media (max-width: 900px) {
  body .month-card.reporting-period-control,
  body .reporting-period-button {
    width: 100% !important;
    justify-self: stretch !important;
  }

  body .month-management-controls {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  body .month-management-controls,
  body .reporting-period-menu-actions {
    grid-template-columns: 1fr !important;
  }
}

/* V4.11 reliability polish: directory-first people flow and explicit mobile navigation. */
.mobile-nav-toggle { display: none; }
.user-admin-layout .user-account-directory { order: -1; }
.user-admin-layout .user-account-form { order: 1; }
.closing-handoff-card .staff-card-header > strong { white-space: nowrap; }

@media (max-width: 760px) {
  body .sidebar .simple-tabs:not(.is-mobile-expanded) > :nth-child(n + 5) { display: none !important; }
  body .sidebar .simple-tabs.is-mobile-expanded {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  body .sidebar .simple-tabs.is-mobile-expanded > * { min-width: 0 !important; width: 100% !important; }
  body .sidebar .simple-tabs.is-mobile-expanded .nav-menu-controls { width: 100% !important; }
  body .sidebar .simple-tabs.is-mobile-expanded .nav-parent-link { width: 100% !important; }
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0 10px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--accent-dark);
    font-weight: 800;
  }
  .user-admin-layout { display: flex !important; flex-direction: column !important; }
  .user-account-directory { order: -1 !important; }
  .closing-handoff-card .staff-card-header > strong {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
}

/* Final grouped-overview display guard. */
body .section-overview-view.view.is-visible {
  display: grid !important;
  gap: 14px;
  width: 100%;
}

/* V3.86 final employee-shell overrides. */
body.staff-page { margin: 0; background: var(--body); }
body.staff-page .staff-page-shell { width: 100%; max-width: none; min-height: 100dvh; margin: 0; padding: 0 0 calc(82px + env(safe-area-inset-bottom)); }
.staff-mobile-header { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px max(18px, env(safe-area-inset-left)) 10px max(18px, env(safe-area-inset-right)); border-bottom: 1px solid var(--line); background: var(--paper); }
.staff-mobile-brand, .staff-mobile-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.staff-mobile-brand img { width: 36px; height: 36px; border-radius: 9px; }
.staff-mobile-brand > div, .staff-mobile-user { display: grid; gap: 1px; }
.staff-mobile-header strong { color: var(--ink); font-size: 14px; }
.staff-mobile-header small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.staff-mobile-user { justify-items: end; text-align: right; }
.staff-mobile-content { width: min(100%, 980px); margin: 0 auto; padding: 22px 20px 30px; }
.staff-screen-header { margin-bottom: 18px; }
.staff-screen-header h1 { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 5vw, 38px); line-height: 1.05; }
.staff-screen-header p { margin: 5px 0 0; color: var(--muted); }
.staff-back-button { margin: 0 0 9px; padding: 0; border: 0; background: transparent; color: var(--accent); font-weight: 700; }
.staff-screen-body { display: grid; gap: 18px; }
.staff-screen-body > .staff-card { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 5px 20px rgba(28, 43, 34, .055); }
.staff-screen-body .staff-card-header { margin-bottom: 14px; }
.staff-screen-body .staff-card-header > div > span { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.staff-screen-body .staff-card-header h2 { margin-top: 3px; font-size: clamp(21px, 4vw, 27px); }
.staff-today-card .staff-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.staff-today-card .staff-note-grid article { min-height: 110px; padding: 16px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.staff-today-card .staff-note-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.staff-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 100; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; min-height: calc(66px + env(safe-area-inset-bottom)); padding: 6px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(18px); box-shadow: 0 -8px 28px rgba(24, 38, 29, .08); }
.staff-bottom-nav button { display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 5px 3px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); }
.staff-bottom-nav button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); }
.staff-bottom-nav svg { width: 23px; height: 23px; }
.staff-bottom-nav span { overflow: hidden; width: 100%; font-size: 11px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.staff-more-panel { display: grid; gap: 22px; }
.staff-more-list { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.staff-more-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; width: 100%; min-height: 68px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.staff-more-list button:last-child { border-bottom: 0; }
.staff-more-list button span { font-weight: 800; }
.staff-more-list button small { grid-column: 1; color: var(--muted); }
.staff-more-list button strong { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 25px; }
.staff-account-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.staff-account-actions > * { width: 100%; text-align: center; }
@media (max-width: 620px) {
  .staff-mobile-header { min-height: 58px; padding: 8px 14px; }
  .staff-mobile-brand img { width: 32px; height: 32px; }
  .staff-mobile-user small { max-width: 145px; }
  .staff-mobile-content { padding: 18px 12px 26px; }
  .staff-screen-body > .staff-card { padding: 14px; border-radius: 12px; }
  .staff-today-card .staff-note-grid { grid-template-columns: 1fr; }
  .staff-today-card .staff-note-grid article, .staff-today-card .staff-note-grid article:nth-child(odd) { min-height: 0; padding: 14px 4px; border-right: 0; }
  .staff-account-actions { grid-template-columns: 1fr; }
}

/* V3.75 authoritative desktop shell: this must remain last in the stylesheet. */
@media (min-width: 1181px) {
  body .app-shell {
    display: block !important;
    min-height: 100vh !important;
  }

  body .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 11px clamp(14px, 1.7vw, 28px) !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--paper) 92%, var(--body)) !important;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.05) !important;
    overflow: visible !important;
  }

  body .brand {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body .brand-mark { width: 42px !important; min-width: 42px !important; height: 42px !important; border-color: var(--line) !important; border-radius: 10px !important; background: var(--paper) !important; }
  body .brand h1 { color: var(--ink) !important; font-size: 18px !important; }
  body .brand p { color: var(--muted) !important; }

  body .tabs.simple-tabs,
  body .tabs {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    background: var(--paper) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body .sidebar .tab,
  body .sidebar .nav-menu summary {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 9px !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  body .sidebar .tab:hover,
  body .sidebar .nav-menu summary:hover,
  body .sidebar .nav-menu[open] summary { color: var(--ink) !important; background: color-mix(in srgb, var(--accent) 8%, var(--paper)) !important; }

  body .sidebar .tab.is-active,
  body .sidebar .nav-menu.is-active summary { color: #fff !important; background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important; box-shadow: none !important; }

  body .sidebar .nav-menu { position: relative !important; min-width: max-content !important; }
  body .sidebar .nav-menu summary::after { content: "" !important; display: none !important; }

  body .sidebar .nav-menu-panel,
  body .sidebar .nav-menu[open] .nav-menu-panel,
  body .sidebar .nav-menu[open]:hover .nav-menu-panel,
  body .sidebar .nav-menu[open]:focus-within .nav-menu-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    width: max-content !important;
    min-width: 190px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
    border-radius: 12px !important;
    padding: 7px !important;
    background: var(--paper) !important;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14) !important;
  }

  body .sidebar .nav-menu:not([open]) .nav-menu-panel { display: none !important; }
  body .sidebar .nav-menu-panel .nav-subtab { justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; border-radius: 8px !important; color: var(--ink) !important; background: transparent !important; }
  body .sidebar .nav-menu-panel .nav-subtab:hover { color: var(--ink) !important; background: color-mix(in srgb, var(--accent) 8%, var(--paper)) !important; }
  body .sidebar .nav-menu-panel .nav-subtab.is-active { color: #fff !important; background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important; }

  body .shell-actions {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: max-content !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body .shell-actions > *,
  body .shell-actions .secondary-button,
  body .shell-actions .primary-button,
  body .shell-actions .tab { width: auto !important; min-width: max-content !important; min-height: 36px !important; border-radius: 999px !important; padding-inline: 10px !important; }

  body .shell-actions .shell-new-invoice { order: initial !important; grid-column: auto !important; }
  body .shell-actions .secondary-button { border-color: var(--line) !important; color: var(--ink) !important; background: var(--paper) !important; }
  body .main { width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 14px clamp(14px, 1.7vw, 28px) 36px !important; }
}

/* V3.73 task workspaces stay above all legacy modal rules. */
body .task-workspace-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 160 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(10px, 1.5vw, 22px) !important;
  background: rgba(10, 17, 14, 0.58) !important;
  backdrop-filter: blur(5px) !important;
}

body .task-workspace-backdrop[hidden] {
  display: none !important;
}

body .task-workspace-window {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(1600px, 100%) !important;
  max-width: none !important;
  height: calc(100dvh - clamp(20px, 3vw, 44px)) !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  border-radius: 16px !important;
  background: var(--body) !important;
  box-shadow: 0 28px 90px rgba(7, 13, 10, 0.3) !important;
}

body .task-workspace-content {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: clamp(10px, 1.4vw, 20px) !important;
}

body .task-workspace-content > .view.is-visible {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 760px) {
  body .task-workspace-backdrop { place-items: stretch !important; padding: 0 !important; }
  body .task-workspace-window { width: 100vw !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; }
  body .task-workspace-content { padding: 8px !important; }
}

/* V3.74 restore the familiar desktop top navigation. */
@media (min-width: 1181px) {
  body .app-shell {
    display: block !important;
    min-height: 100vh !important;
  }

  body .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: min(100%, 1760px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 11px clamp(14px, 1.7vw, 28px) !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--paper) 92%, var(--body)) !important;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.05) !important;
    overflow: visible !important;
  }

  body .brand {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body .brand-mark {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-color: var(--line) !important;
    border-radius: 10px !important;
    background: var(--paper) !important;
  }

  body .brand h1 { color: var(--ink) !important; font-size: 18px !important; }
  body .brand p { color: var(--muted) !important; }

  body .tabs.simple-tabs,
  body .tabs {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    background: var(--paper) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body .sidebar .tab,
  body .sidebar .nav-menu summary {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 9px !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  body .sidebar .tab:hover,
  body .sidebar .nav-menu summary:hover,
  body .sidebar .nav-menu[open] summary {
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--paper)) !important;
  }

  body .sidebar .tab.is-active,
  body .sidebar .nav-menu.is-active summary {
    color: #fff !important;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
    box-shadow: none !important;
  }

  body .sidebar .nav-menu {
    position: relative !important;
    min-width: max-content !important;
  }

  body .sidebar .nav-menu summary::after {
    content: "" !important;
    display: none !important;
  }

  body .sidebar .nav-menu-panel,
  body .sidebar .nav-menu[open] .nav-menu-panel,
  body .sidebar .nav-menu[open]:hover .nav-menu-panel,
  body .sidebar .nav-menu[open]:focus-within .nav-menu-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    width: max-content !important;
    min-width: 190px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    padding: 7px !important;
    background: var(--paper) !important;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14) !important;
  }

  body .sidebar .nav-menu:not([open]) .nav-menu-panel {
    display: none !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    background: transparent !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab:hover {
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--paper)) !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
  }

  body .shell-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: max-content !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body .shell-actions > *,
  body .shell-actions .secondary-button,
  body .shell-actions .primary-button,
  body .shell-actions .tab {
    width: auto !important;
    min-width: max-content !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    padding-inline: 10px !important;
  }

  body .shell-actions .shell-new-invoice {
    order: initial !important;
    grid-column: auto !important;
  }

  body .shell-actions .secondary-button {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: var(--paper) !important;
  }

  body .main {
    width: min(100%, 1760px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 14px clamp(14px, 1.7vw, 28px) 36px !important;
  }
}

/* V3.73 final cascade: keep the consolidated shell above legacy presentation rules. */
body .brand h1,
body .page-heading h1,
body #viewTitle {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

body .panel,
body .topbar,
body .metric,
body .month-card,
body .global-search-panel {
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.045) !important;
}

body .panel-header,
body .compact-panel-header {
  padding: 10px 12px !important;
}

body .panel-header h2,
body .compact-panel-header h2 {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

body .hint {
  max-width: 72ch;
  font-size: 12px;
}

body .primary-button,
body .secondary-button,
body .danger-button {
  min-height: 34px !important;
  border-radius: 8px !important;
  padding-inline: 11px !important;
  font-size: 12px !important;
}

body input,
body select,
body textarea {
  border-radius: 8px !important;
}

body #dashboard .metrics-grid {
  gap: 8px !important;
}

body #dashboard .metric {
  min-height: 92px !important;
  padding: 12px !important;
}

body #dashboard .metric strong {
  font-size: clamp(24px, 2.3vw, 38px) !important;
}

body #dashboard > .dashboard-actions {
  display: none !important;
}

body.task-workspace-open {
  overflow: hidden;
}

.task-workspace-backdrop {
  z-index: 160;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.5vw, 22px);
  background: rgba(10, 17, 14, 0.58);
  backdrop-filter: blur(5px);
}

.task-workspace-backdrop[hidden] {
  display: none !important;
}

.task-workspace-window {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1600px, 100%);
  height: calc(100dvh - clamp(20px, 3vw, 44px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 16px;
  background: var(--body);
  box-shadow: 0 28px 90px rgba(7, 13, 10, 0.3);
}

.task-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--paper) 94%, var(--body));
}

.task-workspace-header > div {
  min-width: 0;
}

.task-workspace-header h2 {
  margin: 1px 0 2px;
  font: 700 24px/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: -0.025em;
}

.task-workspace-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(10px, 1.4vw, 20px);
}

.task-workspace-content > .view.is-visible {
  display: grid !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
}

.task-workspace-content > .view > :first-child {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .task-workspace-backdrop {
    place-items: stretch;
    padding: 0;
  }

  .task-workspace-window {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .task-workspace-header {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 10px;
  }

  .task-workspace-header h2 {
    font-size: 20px;
  }

  .task-workspace-header .hint {
    display: none;
  }

  .task-workspace-content {
    padding: 8px;
  }
}

@media (min-width: 1181px) {
  body .app-shell {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body .sidebar {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 248px !important;
    height: 100vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(246, 241, 231, 0.12) !important;
    padding: 18px 13px !important;
    color: #f6f1e7 !important;
    background: #17211d !important;
    box-shadow: 8px 0 28px rgba(17, 24, 39, 0.08) !important;
    overflow: hidden !important;
  }

  body .brand {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    border-bottom: 1px solid rgba(246, 241, 231, 0.12) !important;
    padding: 0 3px 14px !important;
  }

  body .brand h1 { color: #f6f1e7 !important; font-size: 20px !important; }
  body .brand p { color: #aebbb5 !important; }
  body .brand-mark { width: 44px !important; min-width: 44px !important; height: 44px !important; border-color: rgba(246, 241, 231, 0.18) !important; border-radius: 10px !important; background: transparent !important; }

  body .tabs.simple-tabs,
  body .tabs {
    display: grid !important;
    align-content: start !important;
    gap: 3px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 2px 8px !important;
    background: transparent !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .sidebar .tab,
  body .sidebar .nav-menu summary {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    padding: 0 11px !important;
    color: #b9c5c0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  body .sidebar .tab:hover,
  body .sidebar .nav-menu summary:hover,
  body .sidebar .nav-menu[open] summary { color: #f6f1e7 !important; background: rgba(246, 241, 231, 0.07) !important; }

  body .sidebar .tab.is-active,
  body .sidebar .nav-menu.is-active summary { color: #fff !important; background: rgba(15, 143, 122, 0.28) !important; box-shadow: inset 3px 0 0 #38b990 !important; }

  body .sidebar .nav-menu { min-width: 0 !important; }
  body .sidebar .nav-menu summary::after { content: "+" !important; display: block !important; margin-left: auto !important; color: #82918b !important; transform: none !important; }
  body .sidebar .nav-menu[open] summary::after { content: "−" !important; }

  body .sidebar .nav-menu-panel,
  body .sidebar .nav-menu[open] .nav-menu-panel,
  body .sidebar .nav-menu[open]:hover .nav-menu-panel,
  body .sidebar .nav-menu[open]:focus-within .nav-menu-panel {
    position: static !important;
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 3px 0 5px 10px !important;
    border: 0 !important;
    border-left: 1px solid rgba(246, 241, 231, 0.15) !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 7px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .sidebar .nav-menu:not([open]) .nav-menu-panel { display: none !important; }
  body .sidebar .nav-menu-panel .nav-subtab { min-height: 34px !important; color: #aebbb5 !important; background: transparent !important; }
  body .sidebar .nav-menu-panel .nav-subtab:hover { color: #f6f1e7 !important; background: rgba(246, 241, 231, 0.06) !important; }
  body .sidebar .nav-menu-panel .nav-subtab.is-active { color: #fff !important; background: rgba(15, 143, 122, 0.24) !important; }

  body .shell-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(246, 241, 231, 0.12) !important;
    border-radius: 0 !important;
    padding: 13px 2px 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body .shell-actions > * { width: 100% !important; min-width: 0 !important; }
  body .shell-actions .shell-new-invoice { grid-column: 1 / -1 !important; order: -1 !important; }
  body .shell-actions .secondary-button { border-color: rgba(246, 241, 231, 0.14) !important; color: #dbe4e0 !important; background: rgba(246, 241, 231, 0.06) !important; }

  body .main { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 18px clamp(14px, 1.7vw, 28px) 36px !important; }
  body .topbar { margin-bottom: 12px !important; padding: 12px 14px !important; }
  body .page-heading h1 { font-size: clamp(30px, 3vw, 42px) !important; line-height: 1 !important; }
  body #dashboard.view.is-visible { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important; gap: 12px !important; }
}

/* Final bulk-import sizing override: keep this after every shared modal rule. */
#bulkRecipeModal.bulk-recipe-backdrop {
  place-items: stretch !important;
  padding: clamp(8px, 1.25vw, 18px) !important;
}

#bulkRecipeModal .modal.bulk-recipe-modal {
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - clamp(16px, 2.5vw, 36px)) !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#bulkRecipeModal .bulk-recipe-workspace {
  grid-template-columns: minmax(0, 2fr) minmax(360px, 0.8fr);
}

body #recipeViewerModal { z-index: 26000 !important; isolation: isolate; padding: clamp(8px, 2vw, 24px); }
body #recipePrintModal { z-index: 27000 !important; isolation: isolate; padding: clamp(8px, 2vw, 24px); }

.recipe-type-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.recipe-type-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.recipe-type-filters button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.recipe-type-filters button.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.recipe-type-filters svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recipe-type-filters button:first-child svg { fill: currentColor; stroke: none; }
.recipe-type-filters strong { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-size: 11px; line-height: 1.35; }
@media (max-width: 620px) { .recipe-type-filters { width: 100%; } .recipe-type-filters button { flex: 1; min-width: 0; padding-inline: 8px; } }
.modal.recipe-viewer-modal { width: min(1120px, 96vw); max-width: none; max-height: 94vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.recipe-viewer-content { overflow: auto; padding: 8px; }
#recipeEditorPanel { display: none; }
.modal.recipe-viewer-modal.is-editing { width: min(1500px, 98vw); height: min(94vh, 980px); }
.recipe-viewer-content.is-editor { padding: 0; }
.recipe-viewer-content.is-editor > #recipeEditorPanel { display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.recipe-viewer-modal.is-editing #printRecipe { display: none; }
.recipe-viewer-hero { display: flex; justify-content: space-between; gap: 18px; padding: 20px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
.recipe-viewer-hero span, .recipe-viewer-hero strong { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.recipe-viewer-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; padding: 20px 8px; }
.viewer-ingredient { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.viewer-ingredient > strong small { display: block; margin-top: 3px; color: var(--accent-dark); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.viewer-ingredient.is-component { border-left: 3px solid var(--accent); padding-left: 10px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.viewer-ingredient span { color: var(--muted); text-align: right; }
.recipe-used-by { display: grid; gap: 4px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.recipe-used-by span { color: var(--muted); font-size: 12px; }
.recipe-components-section { padding: 4px 8px 18px; }
.recipe-components-section .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 4px 0 10px; }
.recipe-components-section h3 { margin: 2px 0 0; }
.recipe-component-detail { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: var(--subtle); overflow: hidden; }
.recipe-component-detail > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; cursor: pointer; list-style: none; }
.recipe-component-detail > summary::-webkit-details-marker { display: none; }
.recipe-component-detail > summary > span:first-child { display: grid; gap: 3px; }
.recipe-component-detail > summary small { color: var(--muted); }
.recipe-component-detail > summary > span:last-child { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.recipe-component-detail[open] > summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.recipe-component-detail-body { padding: 12px; background: var(--paper); }
.recipe-component-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recipe-component-meta span { border-radius: 999px; padding: 4px 8px; color: var(--muted); background: var(--raised); font-size: 10px; font-weight: 800; }
.recipe-scale-toolbar { display:flex; align-items:end; gap:8px; flex-wrap:wrap; padding:12px 8px; border-bottom:1px solid var(--line); }
.recipe-scale-toolbar label { display:grid; gap:4px; margin-left:auto; font-size:12px; font-weight:800; }
.recipe-scale-toolbar input { width:110px; }
.recipe-scale-toolbar select { min-width: 190px; }
.recipe-print-sheet { padding:18px; }
.recipe-print-sheet + .recipe-print-sheet { border-top: 8px solid var(--body); margin-top: 10px; }
.recipe-print-sheet.is-nested-component { margin-left: 14px; }
.recipe-print-sheet > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:2px solid var(--line); }
.recipe-print-sheet > header h2 { margin:0 0 4px; }
.recipe-print-sheet > header div:last-child { text-align:right; }
.recipe-print-sheet > header strong, .recipe-print-sheet > header small { display:block; }
@media (max-width:620px) { .recipe-scale-toolbar label { margin-left:0; } .recipe-print-sheet > header { flex-direction:column; } .recipe-print-sheet > header div:last-child { text-align:left; } }
.staff-recipe-scale { display:flex; align-items:end; gap:6px; flex-wrap:wrap; margin:12px 0; }
.staff-recipe-scale label { display:grid; gap:3px; margin-left:auto; font-size:11px; font-weight:800; }
.staff-recipe-scale input { width:92px; }
.staff-scaled-ingredients { list-style:none; padding:0; }
.staff-scaled-ingredients li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.staff-scaled-ingredients strong { text-align:right; }
.staff-recipe-components { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.staff-recipe-components > h4 { margin: 0 0 8px; }
.staff-recipe-component { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: var(--subtle); overflow: hidden; }
.staff-recipe-component > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; cursor: pointer; list-style: none; }
.staff-recipe-component > summary::-webkit-details-marker { display: none; }
.staff-recipe-component > summary span:first-child { display: grid; gap: 2px; }
.staff-recipe-component > summary small { color: var(--muted); }
.staff-recipe-component > summary span:last-child { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.staff-recipe-component[open] > summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.staff-recipe-component > div { padding: 11px; background: var(--paper); }
.staff-recipe-component ul { list-style: none; padding: 0; }
.staff-recipe-component ul li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.staff-recipe-component ul li strong { text-align: right; }
.staff-recipe-suggestion { display:grid; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.staff-recipe-suggestion h4 { margin:0; }
.staff-recipe-suggestion textarea { width:100%; }
.staff-recipe-suggestion > div { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
@media (max-width:620px) { .staff-recipe-scale label { margin-left:0; width:100%; } }
@media (max-width: 720px) { body #recipeViewerModal, body #recipePrintModal { padding: 0; } .modal.recipe-viewer-modal { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; } .recipe-viewer-grid { grid-template-columns: 1fr; } }

@media (max-width: 850px) {
  #bulkRecipeModal.bulk-recipe-backdrop { padding: 0 !important; }
  #bulkRecipeModal .modal.bulk-recipe-modal { width: 100vw !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; }
  #bulkRecipeModal .bulk-recipe-workspace { grid-template-columns: 1fr; }
}

/* V3.38 medium-density invoice rows and clean pack-definition popover. */
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) td,
body #invoice .invoice-line-table tbody tr.is-costing-open td {
  height: 66px !important;
  padding: 7px 6px !important;
  vertical-align: middle !important;
}

body #invoice .invoice-line-table input,
body #invoice .invoice-line-table select {
  min-height: 32px !important;
  height: 32px !important;
  padding: 5px 7px !important;
  font-size: 12px !important;
}

body #invoice .invoice-line-table .item-code-input {
  min-height: 21px !important;
  height: 21px !important;
  margin-top: 3px;
  font-size: 10px !important;
}

body #invoice .invoice-line-table .package-cell {
  position: relative;
  display: table-cell !important;
  min-width: 170px !important;
}

body #invoice .invoice-line-table .package-cell > label,
body #invoice .invoice-line-table tr.is-costing-open .package-cell > label {
  display: none !important;
}

body #invoice .invoice-line-table .package-preview {
  display: flex !important;
  align-items: center;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 5px 28px 5px 8px !important;
  font-size: 10px !important;
}

body #invoice .invoice-line-table tr.is-costing-open td {
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 62%, transparent);
}

body #invoice .costing-definition-popover {
  position: fixed;
  z-index: 4500;
  top: var(--costing-popover-top, 120px);
  left: var(--costing-popover-left, 12px);
  display: none;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 9px;
  width: min(520px, calc(100vw - 24px));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--ui-line, var(--line)));
  border-radius: 12px;
  padding: 12px;
  background: var(--paper);
  box-shadow: 0 18px 52px rgba(18, 32, 25, .22);
}

body #invoice tr.is-costing-open .costing-definition-popover {
  display: grid;
}

body #invoice .costing-definition-heading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-line, var(--line));
}

body #invoice .costing-definition-heading strong {
  color: var(--ink);
  font-size: 14px;
}

body #invoice .costing-definition-heading span {
  grid-column: 1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

body #invoice .close-costing-popover {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 8px;
  padding: 0;
  color: var(--muted);
  background: var(--paper);
  font-size: 18px;
}

body #invoice .costing-definition-popover label {
  display: grid !important;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

body #invoice .costing-definition-popover input {
  width: 100%;
}

body #invoice .costing-definition-result {
  grid-column: 1 / -1;
  display: block;
  min-height: 32px;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  font-size: 11px;
  font-weight: 850;
}

@media (max-width: 620px) {
  body #invoice .costing-definition-popover {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body #invoice .invoice-line-table tbody tr .item-cell,
body #invoice .invoice-line-table tbody tr .status-cell,
body #invoice .invoice-line-table tbody tr .line-action-cell {
  display: table-cell !important;
}

body #invoice .invoice-line-table tbody tr .item-cell input {
  display: block;
  width: 100%;
}

body #invoice .invoice-line-table tbody tr .line-status-badge {
  margin-top: 3px;
}

body #invoice .invoice-line-table tbody tr .line-action-cell .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* V3.37 compact rows — final cascade position. */
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-cell > label {
  display: none !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-cell,
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .item-cell,
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .status-cell,
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .line-action-cell {
  display: table-cell !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) td {
  height: 44px !important;
  padding: 4px 5px !important;
  vertical-align: middle !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-preview {
  display: flex !important;
  min-height: 28px !important;
  margin: 0 !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .item-cell input {
  display: block;
  width: 100%;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .item-code-input,
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .line-status-badge {
  margin-top: 2px;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .line-action-cell .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body #invoice .invoice-line-table tbody tr.is-costing-open .package-cell > label {
  display: grid !important;
}

/* V3.37 authoritative compact invoice-row overrides. */
body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-cell > label {
  display: none !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-cell {
  display: table-cell !important;
  min-width: 150px !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) td {
  height: 44px !important;
  padding-block: 4px !important;
  vertical-align: middle !important;
}

body #invoice .invoice-line-table tbody tr:not(.is-costing-open) .package-preview {
  display: flex !important;
  min-height: 28px !important;
  margin: 0 !important;
}

body #invoice .invoice-line-table tbody tr.is-costing-open .package-cell > label {
  display: grid !important;
}

/* V3.17 resumable invoice-scan checkpoints. */
body .bulk-group.is-completed,
body .bulk-queue-card.is-saved {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper)) !important;
  box-shadow: none !important;
}

body .bulk-group.is-completed {
  padding-block: 9px;
}

.bulk-complete-check {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--accent);
  font-weight: 900;
}

body .bulk-queue-card.is-saved .bulk-status {
  color: #ffffff !important;
  background: var(--accent) !important;
}

body .bulk-queue-card.is-saved p {
  margin: 0;
  color: var(--accent-dark) !important;
  font-weight: 800;
}

@media (max-width: 620px) {
  body .bulk-group.is-completed .bulk-group-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  body .bulk-group.is-completed .bulk-group-header button {
    grid-column: 2;
    justify-self: start;
  }
}

/* V3.14 practical recipe yield reference. */
.kitchen-yield-reference {
  overflow: hidden;
  padding: 0 !important;
}

.kitchen-yield-reference > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.kitchen-yield-reference > summary::-webkit-details-marker { display: none; }
.kitchen-yield-reference > summary span:first-child { display: grid; gap: 3px; }
.kitchen-yield-reference > summary small { color: var(--muted); font-weight: 700; }
.kitchen-yield-reference > summary span:last-child { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--accent-dark); background: var(--button); font-size: 11px; font-weight: 900; white-space: nowrap; }
.kitchen-yield-reference[open] > summary { border-bottom: 1px solid var(--line); }
.kitchen-yield-reference[open] > summary span:last-child { font-size: 0; }
.kitchen-yield-reference[open] > summary span:last-child::after { content: "Close Table"; font-size: 11px; }
.kitchen-yield-note { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--muted); background: color-mix(in srgb, var(--gold) 8%, var(--paper)); font-size: 12px; }
.kitchen-yield-note strong { color: var(--gold); }
.kitchen-yield-table { min-width: 760px; }
.kitchen-yield-table td:first-child { font-weight: 900; }

@media (max-width: 620px) {
  .kitchen-yield-reference > summary { align-items: flex-start; padding: 12px; }
  .kitchen-yield-note { display: grid; gap: 3px; padding: 10px 12px; }
}

/* V3.15 compact page selection and working-page preview. */
body .bulk-page-picker {
  gap: 4px;
}

body .bulk-page-chip,
body .bulk-page-picker .compact-button {
  width: auto !important;
  min-height: 26px !important;
  gap: 4px;
  justify-content: flex-start;
  border-radius: 7px;
  padding: 3px 6px !important;
  font-size: 10px;
  line-height: 1.15;
}

body .bulk-page-chip input {
  width: 14px;
  height: 14px;
  min-height: 14px;
}

body .bulk-page-chip small {
  font-size: 8px;
}

.invoice-work-page-preview {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.invoice-work-page-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.invoice-work-page-preview-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invoice-work-page-preview-head small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-work-page-preview-head > span {
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.invoice-work-page-preview-stage {
  display: grid;
  place-items: center;
  min-height: 300px;
  height: min(46vh, 520px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--body);
}

.invoice-work-page-preview-stage img,
.invoice-work-page-preview-stage object {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.invoice-work-page-preview-stage p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  body .bulk-page-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body .bulk-page-chip,
  body .bulk-page-picker .compact-button {
    width: 100% !important;
    min-width: 0;
  }

  body .bulk-page-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .invoice-work-page-preview-stage {
    min-height: 240px;
    height: 42vh;
  }
}

/* Standalone staff page: match the focused Staff Pocket workspace. */
.staff-page .staff-page-shell {
  display: block;
  gap: 0;
}

.staff-standalone-header h1 {
  margin: 2px 0;
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  line-height: 1;
}

.staff-standalone-status {
  padding-inline: 2px;
}

.staff-pocket-tonight small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.staff-standalone-window .staff-card {
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.staff-standalone-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 18px;
}

.staff-standalone-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--raised);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

@media (max-width: 620px) {
  .staff-page {
    padding-bottom: 18px;
  }

  .staff-page .staff-page-shell {
    width: min(100vw - 18px, 520px);
    gap: 10px;
    padding-top: 10px;
  }

  .staff-standalone-header {
    align-items: center;
    padding: 14px;
  }

  .staff-standalone-header h1 {
    font-size: 1.65rem;
  }

  .staff-page .staff-standalone-app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .staff-page .staff-standalone-app-grid .staff-app-tile {
    min-height: 82px;
    gap: 4px;
    border-radius: 14px;
    padding: 9px;
  }

  .staff-page .staff-standalone-app-grid .staff-app-icon {
    min-width: 34px;
    height: 28px;
  }

  .staff-standalone-window {
    border-radius: 16px;
  }

  .staff-standalone-window .staff-pocket-window-body {
    padding: 11px;
  }

  .staff-standalone-window .staff-note-grid,
  .staff-standalone-window .staff-menu-grid,
  .staff-standalone-window .staff-request-grid {
    grid-template-columns: 1fr;
  }

  .staff-standalone-window .staff-week-strip {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(48px, 1fr));
    padding-bottom: 3px;
  }

  /* Keep mobile invoice intake focused: one swipeable preview, no duplicate
     filename editor beneath the same controls. */
  body .invoice-image-name-manager {
    display: none !important;
  }

  body #preview.preview:has(.page-preview) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 330px);
    justify-content: start;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding: 2px 10px 10px;
  }

  body #preview .page-preview {
    min-width: 0;
    scroll-snap-align: start;
  }

  body #preview .page-preview img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
  }

  body #preview .page-preview-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

body .template-visual-builder {
  display: grid;
  gap: 12px;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 15px;
  padding: 12px;
  background: color-mix(in srgb, var(--body) 75%, var(--paper));
}

body .template-visual-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

body .template-visual-toolbar > label {
  min-width: 180px;
}

body .template-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  min-height: 36px;
  border-radius: 9px;
  padding: 7px 12px;
  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

body .template-visual-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
  min-height: 440px;
}

body .template-canvas-viewport {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 12px;
  padding: 18px;
  background: #dfe5e1;
}

body .template-canvas {
  display: grid;
  place-items: center;
  min-height: 400px;
  user-select: none;
  touch-action: none;
}

body .template-canvas-empty {
  display: grid;
  gap: 5px;
  color: #66736b;
  text-align: center;
}

body .template-document-layer {
  position: relative;
  width: fit-content;
  max-width: none;
  transform: scale(var(--template-zoom, 1)) rotate(var(--template-rotation, 0deg));
  transform-origin: center;
  transition: transform 160ms ease;
}

body .template-document-layer > img,
body .template-document-layer > object {
  display: block;
  width: min(760px, 62vw);
  height: auto;
  max-height: 900px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 12px 36px rgba(17, 24, 39, 0.18);
}

body .template-document-layer > object {
  height: 760px;
}

body .template-region-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

body .template-region-box {
  position: absolute;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  border: 2px solid #087f5b;
  border-radius: 4px;
  padding: 0;
  background: rgba(18, 146, 125, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  cursor: move;
}

body .template-region-box span {
  position: absolute;
  top: -23px;
  left: -2px;
  border-radius: 5px 5px 0 0;
  padding: 3px 6px;
  color: #fff;
  background: #087f5b;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

body .template-region-box:hover span,
body .template-region-box:focus-visible span,
body .template-region-box.is-adjusting span {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body .template-region-box.is-selected {
  z-index: 4;
  border-color: #d18412;
  background: rgba(212, 145, 31, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(209, 132, 18, 0.45);
}

body .template-region-box > i {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d18412;
}

body .template-region-box.is-selected > i { display: block; }
body .template-region-box > i[data-region-resize="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
body .template-region-box > i[data-region-resize="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
body .template-region-box > i[data-region-resize="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
body .template-region-box > i[data-region-resize="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

body .template-region-draft {
  pointer-events: none;
  border-style: dashed;
  background: rgba(212, 145, 31, 0.15);
}

body .template-region-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 12px;
  padding: 13px;
  background: var(--paper);
}

body .template-region-sidebar > div:first-child {
  display: grid;
  gap: 2px;
}

body .template-region-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 520px;
  overflow: auto;
}

body .template-region-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 7px;
  align-items: center;
  border-radius: 8px;
  padding: 7px 8px;
  background: var(--body);
  font-size: 11px;
  font-weight: 850;
}

body .template-region-row button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  padding: 0;
  color: var(--danger);
  background: var(--paper);
  font-size: 18px;
}

body .template-region-row.is-selected {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
}

body .template-region-inspector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

body .template-region-inspector > strong { grid-column: 1 / -1; font-size: 11px; }
body .template-region-inspector label { gap: 3px; font-size: 9px; text-transform: uppercase; }
body .template-region-inspector input { width: 100%; min-width: 0; padding: 6px; }

body .template-test-results {
  display: grid;
  gap: 11px;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 12px;
  padding: 13px;
  background: var(--paper);
}

body .template-test-results[hidden] { display: none; }

body .invoice-template-test-lab {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  padding: clamp(14px, 2vw, 20px);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

body .invoice-template-test-lab h3,
body .invoice-template-test-lab p {
  margin: 0;
}

body .template-lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

body .template-test-findings {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

body .template-test-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

body .template-test-heading > div { display: grid; gap: 2px; }
body .template-test-heading > span { border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
body .template-test-heading > span.good { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
body .template-test-heading > span.warning { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--paper)); }

body .template-test-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

body .template-test-grid article {
  display: grid;
  gap: 3px;
  border-radius: 9px;
  padding: 9px;
  background: var(--body);
}

body .template-test-grid span { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
body .template-test-grid strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

body .invoice-accuracy-panel {
  display: grid;
  gap: 11px;
  margin: 12px 16px;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 13px;
  padding: 13px;
  background: color-mix(in srgb, var(--accent) 3%, var(--paper));
}

body .invoice-accuracy-panel[hidden] { display: none; }
body .invoice-accuracy-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
body .invoice-accuracy-heading > div { display: grid; gap: 2px; }
body .invoice-accuracy-heading p { margin: 0; }
body .invoice-accuracy-checks { display: grid; gap: 6px; }
body .invoice-accuracy-checks article { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr) auto; gap: 9px; align-items: center; border-left: 4px solid var(--accent); border-radius: 9px; padding: 9px 10px; background: var(--paper); }
body .invoice-accuracy-checks article.warning { border-left-color: var(--gold); }
body .invoice-accuracy-checks article.bad { border-left-color: var(--danger); }
body .invoice-accuracy-checks article span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
body .invoice-accuracy-checks article strong { font-size: 12px; font-weight: 750; }
body .invoice-accuracy-checks article button { border: 0; padding: 4px 7px; color: var(--accent-dark); background: transparent; font-size: 11px; font-weight: 900; }
body #invoiceLineRows tr.is-accuracy-target { outline: 3px solid color-mix(in srgb, var(--gold) 50%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--gold) 8%, var(--paper)); }

@media (max-width: 980px) {
  body .template-visual-layout { grid-template-columns: 1fr; }
  body .template-region-sidebar { grid-template-rows: auto auto auto auto; }
  body .template-test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body .template-visual-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  body .template-visual-toolbar > label { min-width: 0; }
  body .template-upload-button, body .template-visual-toolbar > label:first-child { grid-column: 1 / -1; }
  body .template-canvas-viewport { padding: 8px; }
  body .template-document-layer > img, body .template-document-layer > object { width: 82vw; }
  body .template-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .invoice-accuracy-heading { align-items: stretch; flex-direction: column; }
  body .invoice-accuracy-checks article { grid-template-columns: 1fr; }
}

.global-invoice-card {
  align-items: start;
}

.global-invoice-card .issue-chip-row,
.global-invoice-card .status-badge-row {
  margin-top: 7px;
}

.invoice-audit-card.duplicate,
.invoice-audit-card.warning {
  background: color-mix(in srgb, var(--gold) 8%, var(--paper));
}

.invoice-audit-card.good {
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

.invoice-audit-card span,
.invoice-audit-card small {
  display: block;
}

.invoice-audit-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-audit-card strong {
  display: block;
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.invoice-audit-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.muted-row td {
  opacity: 0.62;
  background: var(--subtle);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-pill.good {
  color: #12614f;
  background: rgba(28, 122, 103, 0.11);
}

.status-pill.muted {
  color: var(--muted);
  background: var(--raised);
}

.cell-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.percent-card {
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: grid;
  gap: 5px;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--subtle);
}

.percent-card-button {
  width: 100%;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.percent-card-button:hover,
.percent-card-button:focus-visible,
.percent-card-button.is-active {
  border-color: var(--accent);
  box-shadow: var(--soft-shadow);
  outline: none;
}

.percent-card-button:hover,
.percent-card-button:focus-visible {
  transform: translateY(-1px);
}

.percent-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.percent-card strong {
  font-size: 21px;
  line-height: 1;
}

.percent-card small {
  color: var(--muted);
  font-size: 12px;
}

.metric-button,
.bar-row-button,
.trend-bar-button,
.trend-category-button {
  width: 100%;
  border: inherit;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.metric-button:hover,
.bar-row-button:hover,
.trend-bar-button:hover,
.trend-category-button:hover {
  border-color: var(--accent);
  box-shadow: var(--soft-shadow);
}

.confidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.confidence-card {
  display: grid;
  gap: 5px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--subtle);
}

.confidence-card span,
.basis-badge,
.confidence-badge,
.status-badge,
.issue-chip {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.confidence-card span {
  color: var(--muted);
}

.confidence-card strong {
  font-size: 18px;
}

.confidence-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.confidence-card.good {
  border-color: rgba(33, 111, 93, 0.22);
}

.confidence-card.warning {
  border-color: rgba(168, 61, 52, 0.24);
}

.confidence-badge,
.basis-badge,
.status-badge,
.issue-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--muted);
  background: var(--raised);
  line-height: 1;
}

.confidence-badge.good,
.status-badge.good {
  border-color: rgba(33, 111, 93, 0.24);
  color: var(--accent-dark);
  background: rgba(33, 111, 93, 0.08);
}

.confidence-badge.warning,
.status-badge.warning,
.issue-chip {
  border-color: rgba(168, 61, 52, 0.24);
  color: var(--danger);
  background: rgba(168, 61, 52, 0.08);
}

.status-badge.credit {
  border-color: rgba(143, 112, 66, 0.3);
  color: #73572c;
  background: rgba(143, 112, 66, 0.1);
}

.status-badge.muted {
  color: var(--muted);
  background: var(--subtle);
}

.status-badge-row,
.issue-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

button.issue-chip {
  gap: 7px;
  max-width: 100%;
  cursor: pointer;
  text-align: left;
}

button.issue-chip span {
  overflow-wrap: anywhere;
}

button.issue-chip b {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  opacity: 0.72;
  text-transform: uppercase;
  white-space: nowrap;
}

button.issue-chip:hover,
button.issue-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: rgba(15, 143, 122, 0.08);
  outline: none;
}

.liquor-tax-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.keg-deposit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.keg-deposit-summary article,
.liquor-tax-card {
  display: grid;
  gap: 5px;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--subtle);
}

.keg-deposit-summary span,
.liquor-tax-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.keg-deposit-summary strong,
.liquor-tax-card strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.keg-deposit-summary small,
.liquor-tax-card small {
  color: var(--muted);
  font-size: 12px;
}

.saved-invoice-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(100%, 420px);
}

.saved-invoice-tools .search {
  min-width: 260px;
}

.dashboard-grid,
.intake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 12px;
}

.menu-workspace-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(520px, 1.42fr);
  gap: 12px;
  align-items: start;
}

.panel {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  min-height: 54px;
  padding: 12px 14px;
  margin-bottom: 0;
  background: var(--raised);
  box-shadow: none;
}

.panel-header h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}

.trend-panel-header {
  align-items: flex-start;
}

.trend-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 260px;
}

.trend-controls select {
  min-width: 118px;
}

.trend-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.trend-controls input {
  width: 72px;
}

.trend-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.trend-stat {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--subtle);
}

.trend-stat span,
.trend-category-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-stat strong {
  font-size: 20px;
  line-height: 1.1;
}

.trend-stat small,
.trend-category-card small,
.trend-period-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.trend-bars {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.trend-bar-row {
  display: grid;
  grid-template-columns: 110px minmax(120px, 1fr) 100px 148px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--paper);
}

.trend-period-label {
  display: grid;
  gap: 2px;
}

.trend-period-label strong {
  font-size: 13px;
}

.trend-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ece7;
}

.trend-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.trend-bar-row > strong {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.trend-change {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.trend-change.is-up {
  color: var(--danger);
}

.trend-change.is-down {
  color: var(--accent-dark);
}

.trend-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.trend-category-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--raised);
}

.trend-category-card > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.trend-category-card strong {
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

.global-search-results {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.global-answer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.global-answer-card,
.global-result-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--subtle);
}

.global-answer-card {
  display: grid;
  gap: 4px;
}

.global-answer-card span,
.global-result-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.global-answer-card strong {
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.1;
}

.global-answer-card small,
.global-result-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.global-result-list {
  display: grid;
  gap: 8px;
}

.global-result-list h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13px;
}

.global-result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.global-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.global-usage-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.global-usage-mini-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
}

.global-usage-mini-list strong {
  color: var(--ink);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.global-hal-card {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(180, 35, 24, 0.22);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--ink);
  background: rgba(180, 35, 24, 0.06);
}

.global-hal-card strong {
  font-size: 16px;
}

.global-hal-card small {
  color: var(--muted);
  font-weight: 700;
}

.global-result-card strong {
  display: block;
  overflow-wrap: anywhere;
  margin-bottom: 2px;
}

.global-result-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.panel-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.panel > :not(.panel-header) {
  margin-left: 14px;
  margin-right: 14px;
}

.panel > :last-child {
  margin-bottom: 14px;
}

.panel > .form-grid,
.panel > .menu-form-grid,
.panel > .invoice-header-grid,
.panel > .line-toolbar,
.panel > label,
.panel > .ordering-note-grid,
.panel > .excel-preview,
.panel > .preview,
.panel > .drop-zone,
.panel > .menu-photo-editor,
.panel > .search-field,
.panel > .hint,
.panel > .status-line,
.panel > .extract-progress,
.panel > .invoice-review-workspace {
  margin-top: 12px;
}

.panel > .table-wrap,
.panel > .bulk-groups,
.panel > .pl-table,
.panel > .bars,
.panel > .recipe-list {
  margin-left: 0;
  margin-right: 0;
}

.secondary-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--button);
  box-shadow: var(--button-shadow);
}

.primary-button {
  border: 1px solid var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: var(--button-shadow);
}

.secondary-button:hover {
  background: var(--raised);
}

.primary-button:hover {
  background: var(--accent-dark);
}

.secondary-button:focus-visible,
.primary-button:focus-visible,
.danger-button:focus-visible,
.tab:focus-visible,
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.invoice-header-grid {
  grid-template-columns: minmax(220px, 1.45fr) 150px minmax(170px, 0.9fr) 112px 104px 104px;
  gap: 9px;
  align-items: end;
}

.invoice-header-grid label {
  min-width: 0;
}

.invoice-header-grid input {
  height: 42px;
}

.compact-money-field input {
  width: 104px;
  max-width: 100%;
}

.field-warning {
  display: block;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
  margin-top: 5px;
}

.invoice-balance-status {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.invoice-balance-row {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  text-align: left;
  overflow-wrap: anywhere;
}

.invoice-balance-row[hidden] {
  display: none;
}

.invoice-balance-status.is-balanced {
  color: var(--accent-dark);
}

.invoice-balance-status.is-off {
  color: var(--danger);
}

.extract-progress {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: -4px 0 12px;
}

.extract-progress[hidden] {
  display: none;
}

.extract-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--button);
}

.extract-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 260ms ease;
}

.extract-progress > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.line-count-status {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-count-status.is-balanced {
  color: var(--accent-dark);
}

.line-count-status.is-off {
  color: var(--danger);
}

input.has-warning {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.invoice-review-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  background: var(--paper);
}

.invoice-review-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.invoice-learning-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--subtle) 82%, #ffffff), var(--paper));
  box-shadow: var(--soft-shadow);
}

.invoice-learning-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.invoice-learning-summary strong {
  display: block;
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 0.98rem;
}

.invoice-learning-summary span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.invoice-learning-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.invoice-learning-chips .learning-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  background: var(--raised);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-learning-chips b {
  color: var(--ink);
  font-size: 0.82rem;
}

.invoice-learning-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.invoice-learning-list li {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper);
  font-size: 0.86rem;
}

.verification-line-head {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(160px, 1fr) minmax(96px, auto);
  gap: 10px;
  align-items: center;
}

.invoice-learning-list strong,
.verification-line-head strong {
  color: var(--accent-dark);
}

.invoice-learning-list span,
.verification-line-head span {
  min-width: 0;
  color: var(--ink);
}

.verification-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}

.invoice-learning-list li.has-verification-change {
  border-color: color-mix(in srgb, var(--warning, #d98619) 45%, var(--line));
  background: color-mix(in srgb, var(--warning, #d98619) 6%, var(--paper));
}

.verification-simple-change {
  display: grid;
  grid-template-columns: minmax(92px, 0.55fr) minmax(140px, 1fr) minmax(140px, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
}

.verification-simple-change span {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.verification-simple-change strong,
.verification-simple-change b {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-simple-change strong {
  background: var(--subtle);
  color: var(--muted);
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.verification-simple-change b {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  color: var(--ink);
  font-weight: 900;
}

.verification-simple-change.rule-line {
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  align-items: start;
}

.verification-simple-change.rule-line span {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  text-align: center;
}

.verification-simple-change.rule-line b {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.save-rule-summary {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

.save-rule-summary strong {
  color: var(--ink);
  font-size: 12px;
}

.save-rule-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.save-rule-summary ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.save-rule-summary li {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.save-rule-summary li span {
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.save-rule-summary li b {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.verification-field-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  background: var(--surface);
}

.verification-field-card span,
.verification-rule-note > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.verification-field-card del {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.verification-field-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-rule-note {
  display: grid;
  gap: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.invoice-learning-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.invoice-learning-list em,
.verification-line-head em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.menu-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.menu-form-grid label {
  min-width: 0;
}

.menu-form-grid .wide-field {
  grid-column: 1 / -1;
}

.menu-type-select {
  width: min(220px, 100%);
}

.menu-photo-editor {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 110px auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
}

.menu-photo-picker {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: #f4f8f4;
  font-weight: 800;
  cursor: pointer;
}

.menu-photo-picker input {
  display: none;
}

.menu-photo-preview {
  display: grid;
  width: 110px;
  height: 82px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}

.menu-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-input-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pl-input-group {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fbfcfa;
}

.pl-input-group-wide {
  grid-column: 1 / -1;
}

.pl-input-group-compact {
  align-self: start;
}

.pl-group-heading {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf1ee;
}

.pl-group-heading h3,
.pl-group-heading p {
  margin: 0;
}

.pl-group-heading h3 {
  color: var(--ink);
  font-size: 15px;
}

.pl-group-heading p {
  color: var(--muted);
  font-size: 12px;
}

.pl-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
}

.pl-input-group-wide .pl-field-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

#plInputPanel input[inputmode="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.drop-zone {
  display: grid;
  min-height: 78px;
  place-items: center;
  border: 1px dashed #8aa59a;
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: linear-gradient(180deg, #fbfdfb, #f4f8f5);
  font-weight: 800;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.drop-zone.is-dragging {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #edf8f4;
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.extract-option-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--raised) 56%, var(--paper));
  color: var(--ink);
  cursor: pointer;
}

.extract-option-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.extract-option-toggle span {
  display: grid;
  gap: 2px;
}

.extract-option-toggle strong {
  font-size: 12px;
}

.extract-option-toggle small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.preview {
  display: grid;
  gap: 10px;
  min-height: 240px;
  margin-top: 12px;
  place-items: center;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: #f7f9f8;
}

.preview img,
.preview object {
  display: block;
  width: 100%;
  max-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  object-fit: contain;
}

.preview img {
  height: auto;
}

.preview object {
  height: 360px;
}

.page-preview {
  width: 100%;
}

.duplicate-file-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  border: 1px solid color-mix(in srgb, #d98619 55%, var(--line));
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in srgb, #d98619 8%, var(--paper));
}

.duplicate-file-panel strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  text-transform: none;
}

.duplicate-file-panel p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.duplicate-file-list {
  display: grid;
  gap: 8px;
}

.duplicate-file-list label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.duplicate-file-list input {
  min-height: 38px;
  background: var(--paper);
}

.page-preview.has-duplicate-name {
  border: 1px solid color-mix(in srgb, #d98619 45%, var(--line));
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, #d98619 5%, transparent);
}

.page-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 8px;
}

.page-preview strong {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.page-preview strong span {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, #d98619 14%, var(--paper));
  color: #9a5a00;
  font-size: 10px;
  font-weight: 900;
}

.page-preview-header label {
  gap: 3px;
  font-size: 11px;
}

.page-preview-header input {
  min-height: 30px;
}

.page-preview-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.page-preview-tools .danger-button {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--paper));
}

.line-source-page .page-preview-header label {
  display: none;
}

.invoice-image-name-manager {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px;
  background: color-mix(in srgb, var(--raised) 72%, var(--paper));
}

.invoice-image-name-manager[hidden] {
  display: none;
}

.invoice-image-name-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-image-name-head strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.invoice-image-name-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-image-name-head > span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.invoice-image-name-grid {
  display: grid;
  gap: 8px;
}

.invoice-image-name-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) minmax(180px, 1fr) auto minmax(90px, 0.28fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--paper);
}

.invoice-image-name-row.has-duplicate-name {
  border-color: color-mix(in srgb, var(--warning, #d98619) 52%, var(--line));
  background: color-mix(in srgb, var(--warning, #d98619) 7%, var(--paper));
}

.invoice-image-name-row label {
  display: block;
}

.invoice-image-name-row .danger-button {
  min-height: 34px;
  padding: 0 10px;
}

.invoice-image-name-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invoice-image-name-grid b {
  color: var(--ink);
  font-size: 12px;
}

.invoice-image-name-grid em,
.invoice-image-name-grid small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.invoice-image-name-grid input {
  width: 100%;
  min-height: 34px;
}

html.dark-mode .invoice-image-name-manager {
  background: color-mix(in srgb, var(--paper) 88%, #000000);
}

html.dark-mode .invoice-image-name-row,
html.dark-mode .invoice-image-name-head > span {
  background: color-mix(in srgb, var(--paper) 94%, var(--raised));
}

.excel-preview {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.excel-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7f9f5;
}

.excel-preview-header strong {
  color: var(--ink);
  font-size: 13px;
}

.excel-preview-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.excel-preview-scroll {
  max-height: 220px;
  overflow: auto;
}

.excel-preview table {
  min-width: 520px;
  font-size: 12px;
}

.excel-preview th,
.excel-preview td {
  max-width: 180px;
  padding: 7px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-groups {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.bulk-workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7faf8;
}

.bulk-workflow-steps div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.bulk-workflow-steps span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 900;
}

.bulk-workflow-steps .is-active { color: var(--ink); }
.bulk-workflow-steps .is-active span { border-color: var(--accent); background: var(--accent); color: #fff; }
.bulk-workflow-steps .is-complete span { border-color: var(--accent); color: var(--accent); }

.bulk-invoice-selector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.bulk-invoice-selector input { width: auto; margin: 0; }
.bulk-group-edit-card.is-not-selected { opacity: 0.62; background: #f4f5f4; }

.bulk-group {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  background: #fff;
}

.bulk-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bulk-group-title {
  display: grid;
  gap: 2px;
}

.bulk-group-title strong {
  color: var(--ink);
}

.bulk-group-title span,
.bulk-group p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.bulk-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  background: #f4f8f6;
}

.bulk-queue-header div {
  display: grid;
  gap: 3px;
}

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

.bulk-group-editor {
  display: grid;
  gap: 9px;
}

.bulk-group-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bulk-group-fields label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.bulk-page-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bulk-page-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bulk-page-summary span {
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 11%, var(--paper));
  font-size: 11px;
  font-weight: 850;
}

.bulk-assignment-editor {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.bulk-assignment-editor[hidden] { display: none; }

.bulk-page-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.bulk-page-chip span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.bulk-page-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: none;
}

.bulk-page-chip.is-selected {
  border-color: var(--accent);
  background: rgba(25, 121, 92, 0.1);
  color: var(--ink);
}

.bulk-page-chip input {
  width: auto;
  margin: 0;
}

@media (max-width: 760px) {
  .bulk-workflow-steps { grid-template-columns: 1fr 1fr; }
  .bulk-group-fields {
    grid-template-columns: 1fr;
  }

  .bulk-page-chip,
  .bulk-page-picker .compact-button {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Command workspaces: polished, distraction-free overlays. */
body .command-work-backdrop,
body .repair-destination-backdrop {
  background: rgba(15, 23, 20, 0.66);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body .command-work-backdrop {
  z-index: 20000 !important;
  padding: clamp(12px, 2.2vw, 28px);
}

body .modal.command-work-modal {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: 1120px !important;
  height: min(88vh, 900px) !important;
  max-height: 900px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--ui-line)) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  background: var(--paper) !important;
  box-shadow: 0 32px 90px rgba(8, 20, 15, 0.28) !important;
}

body .command-work-header,
body .repair-destination-header {
  margin: 0 !important;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--paper) 91%, var(--body))) !important;
}

body .command-work-header h2,
body .repair-destination-header h2 {
  margin: 2px 0 3px !important;
  color: var(--ink);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.12;
}

body .command-work-header .eyebrow,
body .repair-destination-header .eyebrow {
  color: var(--accent-dark);
  letter-spacing: 0.1em;
}

body .command-work-close-x,
body .repair-destination-header .icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 11px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  font-size: 25px;
  line-height: 1;
}

body .command-work-tabs {
  gap: 6px;
  padding: 11px 20px 12px;
  background: color-mix(in srgb, var(--paper) 93%, var(--body));
}

body .command-work-tabs button {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--ink);
  background: transparent;
  font-weight: 800;
  box-shadow: none;
}

body .command-work-tabs button.is-active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 11%, var(--paper));
  box-shadow: inset 0 -2px 0 var(--accent);
}

body .command-work-tabs button strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0 6px;
  color: inherit;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 12px;
}

body .command-work-content {
  padding: clamp(14px, 2vw, 22px);
  background: color-mix(in srgb, var(--body) 84%, var(--paper));
}

body .command-work-content .action-center-card,
body .command-work-content .needs-review-card,
body .command-work-content .ignored-issue-card {
  border-color: var(--ui-line) !important;
  border-radius: 14px !important;
  background: var(--paper) !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.045) !important;
}

body .command-work-footer,
body .repair-destination-footer {
  min-height: 62px;
  padding: 11px 20px !important;
  background: var(--paper);
}

body .repair-destination-backdrop {
  z-index: 21000 !important;
  padding: 12px;
}

body .modal.repair-destination-modal {
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  height: calc(100vh - 24px) !important;
  max-height: none !important;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--ui-line)) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: var(--paper) !important;
  box-shadow: 0 36px 110px rgba(8, 20, 15, 0.34) !important;
}

body .repair-destination-header {
  position: relative;
  z-index: 2;
  min-height: 78px;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: 0 5px 18px rgba(17, 24, 39, 0.04);
}

body .repair-destination-header::before {
  content: "";
  position: absolute;
  inset: 13px auto 13px 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

body .repair-destination-content {
  padding: clamp(10px, 1.5vw, 18px) !important;
  background: color-mix(in srgb, var(--body) 88%, var(--paper));
  scrollbar-gutter: stable;
}

body .repair-destination-content > .view {
  max-width: 1500px;
  margin: 0 auto;
}

.data-health-center {
  margin-bottom: 18px;
}

.health-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.health-counts span,
.health-severity {
  border-radius: 999px;
  background: var(--surface-muted, #eef2f5);
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.health-counts .urgent,
.health-issue.urgent .health-severity { background: #fee2e2; color: #991b1b; }
.health-counts .warning,
.health-issue.warning .health-severity { background: #fef3c7; color: #92400e; }
.health-issue.info .health-severity { background: #e0f2fe; color: #075985; }

.health-issue-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.health-issue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border, #dbe2e8);
  border-left: 4px solid #0ea5e9;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface, #fff);
}

.health-issue.urgent { border-left-color: #dc2626; }
.health-issue.warning { border-left-color: #d97706; }
.health-issue div { min-width: 0; }
.health-issue strong,
.health-issue small { display: block; }
.health-issue small { margin-top: 3px; color: var(--muted, #64748b); }
.health-all-clear { display: flex; gap: 8px; align-items: baseline; padding: 14px; border-radius: 12px; background: #ecfdf5; color: #065f46; }

.sales-menu-reconciliation { margin-bottom: 18px; }
.reconciliation-list { display: grid; gap: 8px; max-height: 440px; overflow: auto; padding-right: 4px; }
.reconciliation-row { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(240px, 1.4fr) auto; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid var(--border, #dbe2e8); border-left: 4px solid #d97706; border-radius: 12px; background: var(--surface, #fff); }
.reconciliation-row.connected { border-left-color: #059669; }
.reconciliation-sale strong,
.reconciliation-sale span,
.reconciliation-link small { display: block; }
.reconciliation-sale span,
.reconciliation-link small { margin-top: 4px; color: var(--muted, #64748b); font-size: 0.78rem; }
.reconciliation-link select { width: 100%; min-width: 0; }
.reconciliation-actions { display: flex; gap: 7px; justify-content: flex-end; }

@media (max-width: 680px) {
  .data-health-center .panel-header { align-items: flex-start; }
  .health-counts { justify-content: flex-start; }
  .health-issue { grid-template-columns: 1fr auto; }
  .health-issue .health-severity { grid-column: 1 / -1; justify-self: start; }
  .reconciliation-row { grid-template-columns: 1fr; gap: 9px; }
  .reconciliation-actions { justify-content: stretch; }
  .reconciliation-actions button { flex: 1; }
}

body .repair-destination-content .panel {
  border-radius: 14px !important;
  box-shadow: 0 7px 20px rgba(17, 24, 39, 0.045) !important;
}

@media (min-width: 761px) and (max-width: 1350px) {
  body .sidebar {
    grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1.65fr) !important;
    row-gap: 8px;
  }

  body .shell-actions {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 700px) {
  body .command-work-backdrop,
  body .repair-destination-backdrop {
    padding: 0;
  }

  body .modal.command-work-modal,
  body .modal.repair-destination-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body .command-work-header,
  body .repair-destination-header {
    padding: 13px 14px !important;
  }

  body .command-work-header .hint,
  body .repair-destination-header .hint,
  body .command-work-footer .hint,
  body .repair-destination-footer .hint {
    display: none;
  }

  body .command-work-footer,
  body .repair-destination-footer {
    min-height: 54px;
    justify-content: flex-end;
  }
}

.staff-admin-shell,
.staff-admin-form,
.staff-admin-preview,
.staff-card,
.staff-page-loading {
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  background: var(--panel, #fff);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(15, 23, 42, 0.08));
}

.staff-admin-shell {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.staff-admin-hero {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel, #fff);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(15, 23, 42, 0.08));
}

.staff-admin-hero h2 {
  margin: 2px 0 4px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
}

.staff-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.5fr);
  gap: 12px;
  align-items: start;
}

.staff-manager-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staff-manager-summary article,
.staff-admin-section,
.staff-file-list article,
.staff-file-link-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel, #fff);
}

.staff-manager-summary article {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
}

.staff-manager-summary span,
.staff-file-list span,
.staff-file-link-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.staff-manager-summary strong {
  font-size: 22px;
  line-height: 1;
}

.staff-manager-summary small,
.staff-file-list small,
.staff-file-link-list small {
  color: var(--muted);
  font-weight: 700;
}

.staff-admin-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: start;
}

.staff-admin-section {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.staff-admin-section h3 {
  margin: 0;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.staff-admin-request-list,
.staff-file-list,
.staff-file-link-list {
  display: grid;
  gap: 8px;
}

.time-off-requester {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  color: var(--ink);
  font-size: 15px;
}

.time-off-requester span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.time-off-request-account {
  color: var(--muted);
  font-size: 11px;
}

.staff-file-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr);
  gap: 8px;
}

.staff-file-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-file-form .field-wide {
  grid-column: 1 / -1;
}

.staff-file-form textarea {
  min-height: 70px;
  resize: vertical;
}

.staff-file-list article,
.staff-file-link-list article {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
}

.staff-file-link-list a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

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

.stack-actions {
  justify-content: flex-end;
}

.staff-admin-form {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.staff-admin-form label,
.staff-request-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-admin-form textarea,
.staff-request-grid textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
}

.staff-admin-preview {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 110px),
    var(--panel, #fff);
}

.staff-admin-preview h3 {
  margin: 0;
  font-size: 20px;
}

.staff-preview-phone-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.staff-preview-phone-bar strong {
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-dark, var(--accent));
}

.staff-admin-preview-list {
  display: grid;
  gap: 7px;
}

.staff-admin-preview-list article,
.staff-note-stack article,
.staff-note-grid article {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--wash, #f7f9f6);
}

.staff-admin-preview-list span,
.staff-note-stack span,
.staff-note-grid span,
.staff-mini-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.staff-admin-preview-list p,
.staff-note-stack p,
.staff-note-grid p,
.staff-card p {
  margin: 0;
  white-space: pre-wrap;
}

.staff-page {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34rem),
    var(--wash, #f5f7f2);
}

.staff-page-shell {
  width: min(1040px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 14px 0 32px;
}

.staff-page-loading {
  width: min(420px, calc(100vw - 32px));
  margin: 12vh auto 0;
  padding: 22px;
}

.staff-page-loading h1,
.staff-page-loading p {
  margin: 0 0 8px;
}

.staff-page-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 14px 2px 14px;
}

.staff-page-hero span,
.staff-card-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.staff-page-hero h1 {
  margin: 4px 0 2px;
  font-size: clamp(28px, 6vw, 48px);
  line-height: 0.95;
}

.staff-page-hero p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.staff-page-user {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.staff-page-user strong,
.staff-page-user a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: var(--panel, #fff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.staff-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.staff-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.staff-today-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
    var(--panel, #fff);
}

.staff-span-2 {
  grid-column: span 2;
}

.staff-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.staff-card-header h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.staff-card-header strong {
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-dark, var(--accent));
  font-size: 12px;
}

.staff-card-header strong:empty {
  display: none;
}

.staff-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.staff-day-pill {
  display: grid;
  gap: 2px;
  min-height: 60px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 4px;
  background: var(--wash, #f7f9f6);
  color: var(--ink);
  text-align: center;
}

.staff-day-pill span,
.staff-day-pill small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.staff-day-pill strong {
  font-size: 20px;
}

.staff-day-pill.is-active,
.staff-day-pill.is-mine {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.staff-line-list {
  display: grid;
  gap: 6px;
}

.staff-line-list article,
.staff-line-list button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: var(--panel, #fff);
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.staff-line-list.compact {
  max-height: 312px;
  overflow: auto;
}

.staff-line-list button.is-active,
.staff-line-list article.is-mine {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.staff-line-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.staff-file-list small,
.staff-file-link-list small {
  display: block;
  margin-top: 2px;
}

.staff-search-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--panel, #fff);
  color: var(--ink);
  font: inherit;
}

.staff-menu-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.staff-menu-detail {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--wash, #f7f9f6);
}

.staff-menu-detail h3 {
  margin: 4px 0 10px;
}

.staff-menu-detail ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.staff-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.staff-chip-row b {
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--panel, #fff);
  color: var(--accent-dark, var(--accent));
  font-size: 12px;
}

.staff-note-stack {
  display: grid;
  gap: 8px;
}

.staff-note-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staff-card hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
}

.staff-request-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.staff-request-grid .staff-span-2 {
  grid-column: span 2;
}

.staff-request-grid button {
  min-height: 42px;
}

@media (max-width: 900px) {
  .staff-admin-hero,
  .section-title-row {
    display: grid;
    align-items: start;
  }

  .stack-actions {
    justify-content: start;
  }

  .staff-admin-grid,
  .staff-admin-manager-grid,
  .staff-page-grid,
  .staff-menu-grid,
  .staff-manager-summary,
  .staff-note-grid,
  .staff-request-grid {
    grid-template-columns: 1fr;
  }

  .staff-span-2,
  .staff-request-grid .staff-span-2 {
    grid-column: auto;
  }

  .staff-admin-preview {
    position: static;
  }

  .staff-file-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .staff-page-shell {
    width: min(100vw - 14px, 520px);
    padding-top: 8px;
  }

  .staff-page-hero {
    display: grid;
    align-items: start;
  }

  .staff-page-user {
    justify-content: flex-start;
  }

  .staff-card {
    padding: 10px;
  }

  .staff-week-strip {
    gap: 4px;
  }

  .staff-day-pill {
    min-height: 58px;
    padding: 6px 2px;
  }

  .staff-day-pill strong {
    font-size: 17px;
  }

  .staff-day-pill span,
  .staff-day-pill small {
    font-size: 10px;
  }

  .staff-menu-detail ul {
    grid-template-columns: 1fr;
  }

  .staff-file-list article,
  .staff-file-link-list article {
    display: grid;
  }

  .staff-page-user strong,
  .staff-page-user a {
    min-height: 30px;
    padding-inline: 10px;
    font-size: 12px;
  }
}

.bulk-queue-header span,
.bulk-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bulk-queue-card.is-duplicate {
  border-color: #d89a35;
  background: #fff8ea;
}

.bulk-queue-card.is-error {
  border-color: #c45656;
  background: #fff1f1;
}

.bulk-queue-card.is-waiting {
  border-style: dashed;
  opacity: 0.82;
}

.bulk-queue-card.is-loading {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}

.bulk-queue-card.is-loading .bulk-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: queuePulse 1s ease-in-out infinite;
}

@keyframes queuePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.08); }
}

.bulk-queue-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(45, 111, 82, 0.14);
}

.bulk-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-review-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.invoice-review-workspace.has-reference {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.invoice-review-table-wrap {
  order: 1;
  max-height: min(72vh, 760px);
}

.invoice-line-reference {
  position: sticky;
  top: 14px;
  order: 2;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 32px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.invoice-line-reference[hidden] {
  display: none;
}

.reference-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reference-header strong {
  font-size: 13px;
}

.reference-zoom-toolbar {
  display: flex;
  gap: 6px;
}

.reference-preview {
  min-height: 460px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: grab;
}

.reference-preview.is-panning {
  cursor: grabbing;
}

.reference-preview-inner {
  width: 135%;
  min-height: 100%;
  transform: rotate(var(--invoice-reference-rotation, 0deg));
  transform-origin: center center;
}

.reference-preview .page-preview {
  padding: 8px;
  margin: 0;
}

.reference-preview img,
.reference-preview object {
  display: block;
  width: 100%;
  max-height: none;
  border: 0;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

@media (max-width: 860px) {
  .invoice-review-workspace,
  .invoice-review-workspace.has-reference {
    grid-template-columns: 1fr;
  }

  .invoice-line-reference {
    position: relative;
    top: auto;
    max-height: none;
  }

  .reference-preview {
    min-height: 320px;
    max-height: 520px;
  }
}

.recipe-list {
  display: grid;
  gap: 10px;
}

.recipe-library-toolbar { display: grid; grid-template-columns: minmax(260px, 560px) minmax(240px, 1fr); align-items: end; gap: 12px 20px; margin-bottom: 14px; }
.recipe-library-search { display: grid; gap: 5px; color: var(--ink); font-size: 12px; font-weight: 800; }
.recipe-library-search input { width: 100%; min-height: 42px; }
.recipe-library-organize-hint { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0 0 9px; text-align: right; }
.recipe-drag-symbol, .recipe-card-drag { color: var(--muted); font-weight: 900; letter-spacing: -3px; }
@media (max-width: 760px) { .recipe-library-toolbar { grid-template-columns: 1fr; } .recipe-library-organize-hint { display: none; } }

/* V4.78 focused recipe library. */
.recipe-library-panel { width: 100%; }
.recipe-library-toolbar { grid-template-columns: minmax(260px, 1fr) 150px auto auto; align-items: stretch; gap: 8px; }
.recipe-library-search { position: relative; display: block; height: 40px; margin: 0; }
.recipe-library-search input { display: block; width: 100%; height: 40px; min-height: 40px; padding: 0 42px 0 40px; appearance: none; -webkit-appearance: none; }
.recipe-library-search > svg { position: absolute; z-index: 1; top: 12px; left: 13px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.recipe-library-search > button { position: absolute; z-index: 1; top: 5px; right: 5px; display: grid; width: 30px; min-width: 30px; height: 30px; min-height: 30px; place-items: center; border: 0; border-radius: 7px; padding: 0; color: var(--muted); background: transparent; font-size: 18px; }
#recipeTypeFilter { width: 100%; height: 40px; min-height: 40px; margin: 0; }
.recipe-filter-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-height: 40px; margin: 0; }
.recipe-filter-button strong { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; color: var(--accent-contrast); background: var(--accent-dark); font-size: 11px; }
.recipe-category-controls { display: grid; grid-template-columns: 1fr 1fr; height: 40px; }
.recipe-category-controls button { height: 40px; min-height: 40px; margin: 0; border-radius: 0; white-space: nowrap; }
.recipe-category-controls button:first-child { border-radius: 9px 0 0 9px; }
.recipe-category-controls button:last-child { margin-left: -1px; border-radius: 0 9px 9px 0; }
.recipe-filter-chips, .recipe-ingredient-selections { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.recipe-filter-chips[hidden], .recipe-advanced-filters[hidden] { display: none !important; }
.recipe-filter-chips > span, .recipe-ingredient-selections > span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 5px 3px 10px; color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); font-size: 12px; font-weight: 700; }
.recipe-filter-chips > span button, .recipe-ingredient-selections > span button { display: grid; width: 22px; min-width: 22px; height: 22px; min-height: 22px; place-items: center; border: 0; padding: 0; color: var(--muted); background: transparent; }
.recipe-filter-chips > button { min-height: 30px; border: 0; padding: 4px 8px; color: var(--accent-dark); background: transparent; }
.recipe-advanced-filters { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--paper); box-shadow: var(--shadow-soft); }
.recipe-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; }
.recipe-filter-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.recipe-filter-grid input, .recipe-filter-grid select { width: 100%; min-height: 38px; color: var(--ink); background: var(--body); }
.recipe-ingredient-selections { margin: 10px 0; }
.recipe-empty-state { display: grid; place-items: center; gap: 7px; min-height: 190px; padding: 25px; text-align: center; color: var(--muted); }
.recipe-empty-state strong { color: var(--ink); font-size: 18px; }
.recipe-empty-state > div { display: flex; gap: 7px; }
.recipe-category-list { gap: 0; padding: 0; border-top: 1px solid var(--line); }
.recipe-card.recipe-list-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 7px 10px; background: var(--paper); }
.recipe-card.recipe-list-row:last-child { border-bottom: 0; }
.recipe-card.recipe-list-row:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
.recipe-row-main, .recipe-quick-note { min-width: 0; min-height: 38px; border: 0; padding: 0; text-align: left; color: var(--ink); background: transparent; }
.recipe-row-main .recipe-card-name > span:last-child { min-width: 0; }
.recipe-row-main strong, .recipe-row-main small, .recipe-quick-note span, .recipe-quick-note small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-row-main small, .recipe-quick-note small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.recipe-quick-note span { color: var(--muted); font-size: 12px; }
.recipe-row-actions { display: flex; align-items: center; gap: 5px; }
.recipe-import-backdrop { z-index: 26500 !important; padding: clamp(8px, 2vw, 24px); }
.recipe-import-modal { width: min(980px, 96vw); max-width: none; max-height: calc(100dvh - 24px); overflow: auto; }
.recipe-import-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.recipe-import-choice { display: grid; gap: 5px; min-height: 100px; align-content: center; border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: left; color: var(--ink); background: var(--subtle); }
.recipe-import-choice span { color: var(--muted); }
body.recipe-import-open { overflow: hidden; }
html.dark-mode .recipe-advanced-filters, html.dark-mode .recipe-card.recipe-list-row, html.dark-mode .recipe-import-modal, html.dark-mode .recipe-import-choice { color: var(--ink); background: var(--paper); }
@media (max-width: 780px) {
  .recipe-library-toolbar { grid-template-columns: 1fr 1fr; }
  .recipe-library-search { grid-column: 1 / -1; }
  .recipe-filter-grid { grid-template-columns: 1fr 1fr; }
  .recipe-card.recipe-list-row { grid-template-columns: minmax(0, 1fr) auto; }
  .recipe-quick-note { grid-column: 1; }
  .recipe-card-badges { display: none; }
  .recipe-row-actions { grid-column: 2; grid-row: 1 / span 2; }
  .recipe-row-actions [data-recipe-edit] { display: none; }
}
@media (max-width: 520px) {
  .recipe-filter-grid, .recipe-import-choices { grid-template-columns: 1fr; }
  .recipe-import-backdrop { place-items: stretch !important; padding: 0; }
  .recipe-import-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
}

.search-field {
  margin-bottom: 14px;
}

.recipe-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  overflow: hidden;
}

.recipe-library-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  color: var(--muted);
}

.health-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.health-disclosure > summary::-webkit-details-marker { display: none; }
.health-disclosure > summary > span:first-child { display: grid; gap: 4px; }
.health-disclosure > summary small { color: var(--muted); font-weight: 500; }
.health-disclosure > summary > span:last-child { color: var(--accent); font-weight: 800; }
.health-disclosure[open] > summary { margin-bottom: 18px; }
.health-disclosure[open] > summary > span:last-child::before { content: "Close"; font-size: 0.92rem; }
.health-disclosure[open] > summary > span:last-child { font-size: 0; }

.performance-diagnostics {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft, #f8faf8);
}

.performance-diagnostics td,
.performance-diagnostics th { white-space: nowrap; }

.recipe-category summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.recipe-category summary::-webkit-details-marker {
  display: none;
}

.recipe-category summary::before {
  content: ">";
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.recipe-category[open] summary::before {
  transform: rotate(90deg);
}

.recipe-category.is-drop-target {
  border-color: var(--accent);
  background: #eef8f3;
}

.recipe-category summary span {
  flex: 1;
}

.recipe-category summary strong {
  display: grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: #edf1ee;
  font-size: 12px;
}

.recipe-category-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
  min-height: 18px;
}

.learning-rule-textarea {
  min-height: 62px;
  resize: vertical;
}

.category-edit-button {
  min-height: 28px;
  border-radius: 6px;
  padding: 0 9px;
  color: var(--accent-dark);
  background: #eaf3ef;
  font-size: 12px;
  font-weight: 800;
}

.learning-groups {
  display: grid;
  gap: 12px;
}

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

.settings-placeholder-grid article,
.settings-action-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--subtle);
}

.settings-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.settings-action-grid article {
  align-content: start;
}

.settings-action-grid button {
  width: 100%;
  margin-top: 4px;
}

.recovery-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.settings-collapsible-panel {
  overflow: hidden;
  padding: 0 !important;
}

.settings-collapsible-panel > summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.settings-collapsible-panel > summary::-webkit-details-marker { display: none; }

.settings-collapsible-panel > summary > span {
  display: grid;
  gap: 3px;
}

.settings-collapsible-panel > summary strong {
  color: var(--ink);
  font-size: 16px;
}

.settings-collapsible-panel > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-collapsible-panel > summary b {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--accent-dark);
  background: var(--paper);
  font-size: 11px;
  white-space: nowrap;
}

.settings-collapsible-panel[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}

.settings-collapsible-content {
  padding: 16px 18px 20px;
}

.recovery-controls label { flex: 1 1 320px; }
.audit-filter-bar { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr auto; align-items: end; gap: 10px; margin: 18px 0 12px; }
.audit-history-table td { vertical-align: top; }
.audit-history-table td small { display: block; color: var(--muted); margin-top: 3px; }
@media (max-width: 900px) { .audit-filter-bar { grid-template-columns: 1fr 1fr; } }

.command-work-backdrop { z-index: 1200; padding: 22px; }
.command-work-modal { width: min(1180px, 96vw); max-width: 1180px; height: min(88vh, 920px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.command-work-header { align-items: flex-start; }
.command-work-header h2 { margin: 3px 0; }
.command-work-close-x { font-size: 28px; line-height: 1; }
.command-work-tabs { display: flex; gap: 8px; padding: 0 20px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.command-work-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: var(--subtle); color: var(--text); white-space: nowrap; }
.command-work-tabs button.is-active { background: var(--accent); color: white; border-color: var(--accent); }
.command-work-tabs strong { min-width: 22px; text-align: center; }
.command-work-content { overflow: auto; padding: 20px; background: var(--body); }
.command-work-content .action-center-grid { display: block; }
.command-work-content [data-work-section] { display: none; }
.command-work-content [data-work-section].is-active { display: block; }
.command-work-footer { justify-content: space-between; border-top: 1px solid var(--line); }
body.command-work-open { overflow: hidden; }
@media (max-width: 700px) { .command-work-backdrop { padding: 0; } .command-work-modal { width: 100vw; height: 100vh; max-height: none; border-radius: 0; } .command-work-tabs { padding-inline: 12px; } .command-work-content { padding: 12px; } }

.repair-destination-backdrop { z-index: 1300; padding: 10px; }
.modal.repair-destination-modal { width: calc(100vw - 20px); max-width: none; height: calc(100vh - 20px); max-height: none; padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.repair-destination-header { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.repair-destination-header h2 { margin: 3px 0; }
.repair-destination-content { min-width: 0; min-height: 0; overflow: auto; padding: 14px; background: var(--body); }
.repair-destination-content > .view { display: block !important; width: 100%; }
.repair-destination-content > .view > .panel:first-child { margin-top: 0; }
.repair-destination-footer { margin: 0; padding: 12px 18px; justify-content: space-between; border-top: 1px solid var(--line); }
body.repair-destination-open { overflow: hidden; }
@media (max-width: 700px) { .repair-destination-backdrop { padding: 0; } .repair-destination-modal { width: 100vw; height: 100vh; max-height: none; border-radius: 0; } .repair-destination-content { padding: 8px; } }

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

.email-finder-controls {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(140px, 180px);
  gap: 12px;
  padding: 12px 12px 0;
}

.email-finder-controls .email-finder-vendor-search {
  grid-column: span 2;
}

.email-finder-controls label small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.field-optional {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-candidate-card.is-deep-review {
  border-left: 3px solid color-mix(in srgb, var(--olive, #63704a) 62%, var(--line));
}

.email-candidate-identity > strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-review-badge {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-review-badge.likely {
  color: var(--olive-dark, #40512d);
  background: color-mix(in srgb, var(--olive, #63704a) 16%, transparent);
}

.email-review-badge.manual {
  color: var(--muted);
  background: var(--subtle);
}

.email-review-badge.duplicate {
  border-color: color-mix(in srgb, var(--warning, #d98619) 48%, var(--line));
  background: color-mix(in srgb, var(--warning, #d98619) 12%, var(--panel));
  color: var(--warning, #9a6500);
}

.email-deep-from {
  overflow-wrap: anywhere;
}

.bulk-queue-card.is-manual-review {
  border-left: 4px solid var(--gold, #ad7b24);
}

.bulk-queue-card.is-resolved-without-save {
  opacity: 0.78;
  border-left: 4px solid var(--muted);
  background: var(--subtle);
}

.email-candidate-preview-action {
  align-self: center;
  white-space: nowrap;
}

body .email-preview-backdrop {
  z-index: 23000 !important;
  padding: 3vh 3vw;
  isolation: isolate;
  background: rgba(15, 23, 20, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body .email-preview-modal {
  position: relative;
  z-index: 1;
  width: min(1500px, 94vw);
  height: min(920px, 94vh);
  max-width: none;
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.email-preview-header,
.email-preview-modal > .status-line {
  margin: 0;
  padding: 14px 18px;
}

.email-preview-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(440px, 1.28fr);
  gap: 14px;
  padding: 0 18px 18px;
}

.email-preview-message,
.email-preview-files {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}

.email-preview-message-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.email-preview-message-header h3 {
  margin: 0;
}

.email-preview-message-header small {
  color: var(--muted);
  text-align: right;
}

.email-preview-message-frame {
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.email-preview-message pre {
  min-height: 0;
  margin: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--subtle);
  border-radius: 10px;
}

.email-preview-files {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.email-preview-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.email-preview-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
  max-height: 126px;
  overflow: auto;
  padding-bottom: 3px;
}

.email-preview-attachment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  box-shadow: none;
}

.email-preview-attachment > span {
  grid-row: 1 / span 2;
  border-radius: 6px;
  padding: 4px 5px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  font-size: 0.64rem;
  font-weight: 900;
}

.email-preview-attachment strong,
.email-preview-attachment small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-preview-tabs button.is-active {
  border-color: var(--teal, #187f70);
  background: color-mix(in srgb, var(--teal, #187f70) 9%, var(--paper));
  box-shadow: inset 0 0 0 1px var(--teal, #187f70);
}

.email-preview-tabs small {
  opacity: 0.72;
}

.email-preview-frame {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ece9e2;
}

.email-preview-frame iframe,
.email-preview-frame img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  object-fit: contain;
}

.email-preview-prompt,
.email-preview-loading {
  display: grid;
  place-items: center;
  gap: 6px;
  max-width: 420px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.email-preview-prompt strong,
.email-preview-loading strong {
  color: var(--ink);
}

.email-preview-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--raised);
}

.email-preview-actions > div {
  display: flex;
  gap: 8px;
}

@media (max-width: 760px) {
  body .email-preview-backdrop { padding: 0; }
  body .email-preview-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; padding: 0; }
  .email-preview-layout { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 0.55fr) minmax(300px, 1fr); padding: 0 8px 8px; }
  .email-preview-header, .email-preview-modal > .status-line { padding: 10px 12px; }
  .email-preview-frame iframe, .email-preview-frame img { min-height: 300px; }
  .email-preview-message-frame { min-height: 300px; }
  .email-preview-actions { display: grid; grid-template-columns: 1fr; align-items: stretch; padding: 8px; }
  .email-preview-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .email-preview-actions button { min-width: 0; white-space: normal; }
}

.email-connection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
}

.email-connection-grid label {
  min-width: 0;
}

.email-connection-grid .checkbox-line {
  min-height: 44px;
  align-content: center;
}

.email-connection-grid button {
  width: 100%;
  min-height: 44px;
}

.email-finder-results {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.email-finder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 12px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--subtle) 72%, var(--panel));
}

.email-finder-actions[hidden] {
  display: none !important;
}

.email-finder-actions .email-select-all {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  color: var(--ink);
  font-weight: 850;
}

#emailFinderSelectionCount {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.email-account-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.email-account-summary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  background: var(--subtle);
}

.email-account-summary span.good {
  border-color: rgba(47, 123, 86, 0.35);
  color: var(--good);
}

.email-account-summary span.bad {
  border-color: rgba(168, 61, 52, 0.35);
  color: var(--danger);
}

.email-candidate-card,
.email-finder-empty {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--subtle);
}

.email-candidate-card {
  grid-template-columns: 30px minmax(220px, 1fr) minmax(260px, 0.9fr) auto;
  align-items: center;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.email-candidate-card:has([data-email-invoice-select]:checked) {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 11%, transparent);
}

.email-crosscheck-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning, #d98619) 42%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning, #d98619) 6%, var(--panel));
}

.email-crosscheck-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.email-crosscheck-heading > div,
.email-crosscheck-match,
.email-crosscheck-actions {
  display: grid;
  gap: 4px;
}

.email-crosscheck-heading > span,
.email-crosscheck-match > span,
.email-crosscheck-match small {
  color: var(--muted);
  font-size: 11px;
}

.email-candidate-card.is-crosscheck {
  grid-template-columns: 30px minmax(220px, 1fr) minmax(230px, .8fr) auto;
  border-color: color-mix(in srgb, var(--warning, #d98619) 38%, var(--line));
  background: var(--panel);
}

.email-candidate-card.is-crosscheck .email-candidate-select {
  cursor: not-allowed;
  opacity: .45;
}

.email-crosscheck-actions {
  grid-auto-flow: column;
  align-items: center;
}

.email-candidate-card.is-crosscheck-overridden {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.email-candidate-select {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 40px;
  cursor: pointer;
}

.email-candidate-select input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.email-selection-box {
  display: none;
}

.email-candidate-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.email-candidate-identity small {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.email-candidate-card strong,
.email-finder-empty strong {
  color: var(--ink);
}

.email-candidate-card span,
.email-finder-empty span {
  color: var(--muted);
  font-size: 12px;
}

.email-candidate-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.email-candidate-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.email-candidate-card dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.email-saved-matches {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.email-saved-matches summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.email-saved-matches > div {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.email-saved-matches article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--subtle);
}

.email-saved-matches article span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.drive-upload-grid,
.drive-tools,
.drive-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.drive-folder-create {
  display: grid;
  grid-template-columns: minmax(180px, 320px) auto;
  gap: 8px;
  align-items: center;
  padding: 0 12px 12px;
}

.drive-folder-create input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.drive-tools {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.35fr) minmax(160px, 0.35fr);
  align-items: end;
}

.drive-file-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--raised);
}

.drive-file-toolbar span {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.drive-file-toolbar select {
  width: auto;
  min-width: 142px;
  min-height: 34px;
}

.drive-upload-grid label,
.drive-edit-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.drive-upload-grid input,
.drive-upload-grid select,
.drive-tools input,
.drive-tools select,
.drive-edit-grid input,
.drive-edit-grid select,
.drive-file-main > input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.drive-folder-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

.drive-folder-stats button {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--raised);
  cursor: pointer;
  font: inherit;
}

.drive-folder-stats button.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.drive-folder-stats strong {
  color: var(--accent-dark);
}

.drive-folder-stats small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.drive-file-list {
  display: grid;
  gap: 10px;
  min-height: 132px;
  border: 1px dashed transparent;
  border-radius: 10px;
  padding: 0 12px 12px;
}

.drive-file-list.is-drag-over {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.drive-file-card {
  display: grid;
  grid-template-columns: 24px 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--paper);
  cursor: default;
  user-select: none;
}

.drive-file-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
}

.drive-file-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.drive-file-check {
  display: grid;
  place-items: start center;
  padding-top: 16px;
}

.drive-file-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.drive-file-check span {
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--field);
}

.drive-file-check input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.drive-file-icon {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: var(--subtle);
  font-size: 11px;
  font-weight: 950;
}

.drive-file-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.drive-file-main > input {
  font-weight: 900;
}

.drive-file-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drive-file-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--subtle);
  font-size: 11px;
  font-weight: 850;
}

.drive-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

.drive-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 180px;
}

.drive-file-actions a {
  text-align: center;
  text-decoration: none;
}

.drive-context-menu {
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 4px;
  min-width: 210px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: var(--paper);
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
}

.drive-context-menu[hidden] {
  display: none;
}

.drive-context-menu button,
.drive-context-menu label {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 8px 9px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.drive-context-menu button:hover {
  background: var(--raised);
}

.drive-context-menu label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.drive-context-menu select {
  width: 100%;
  min-height: 32px;
  text-transform: none;
}

.drive-context-menu hr {
  width: 100%;
  height: 1px;
  margin: 3px 0;
  border: 0;
  background: var(--line);
}

.drive-context-menu .danger-menu-item {
  color: var(--danger);
}

.ignored-issues-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ignored-issue-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.25fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid rgba(168, 61, 52, 0.55);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--subtle);
}

.ignored-issue-card strong,
.ignored-issue-card span {
  min-width: 0;
}

.ignored-issue-card > div:first-child {
  display: grid;
  gap: 2px;
}

.ignored-issue-card > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.data-health-grid article {
  display: grid;
  gap: 5px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--subtle);
}

.data-health-grid article.is-warning {
  border-color: rgba(212, 168, 75, 0.55);
  background: rgba(212, 168, 75, 0.12);
}

.data-health-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.data-health-grid strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.data-health-grid small {
  color: var(--muted);
  font-size: 12px;
}

.settings-placeholder-grid strong,
.settings-action-grid strong {
  color: var(--ink);
}

.settings-placeholder-grid span,
.settings-action-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.learning-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  overflow: hidden;
}

.learning-category summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.learning-category summary::-webkit-details-marker {
  display: none;
}

.learning-category summary::before {
  content: ">";
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.learning-category[open] summary::before {
  transform: rotate(90deg);
}

.learning-category summary span {
  flex: 1;
}

.learning-category summary strong {
  display: grid;
  min-width: 34px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: #edf1ee;
  font-size: 12px;
}

.learning-category .table-wrap {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.training-card-list {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.training-vendor-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.training-vendor-header,
.training-example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.training-vendor-header div,
.training-example div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.training-vendor-header strong,
.training-example strong {
  color: var(--ink);
}

.training-vendor-header span,
.training-example span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.training-vendor-card textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
}

.training-example-list {
  display: grid;
  gap: 8px;
}

.training-example {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.item-cost-groups {
  display: grid;
  gap: 12px;
}

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

.vendor-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
}

.vendor-price-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.vendor-price-summary-grid article,
.vendor-sheet-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--subtle);
  padding: 12px;
}

.vendor-price-summary-grid span,
.vendor-sheet-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.vendor-price-summary-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1;
}

.vendor-price-summary-grid small,
.vendor-sheet-card small,
.vendor-sheet-card p,
.vendor-pricing-table small,
.muted-cell {
  color: var(--muted);
}

.vendor-price-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vendor-price-form .field-wide {
  grid-column: 1 / -1;
}

.vendor-sheet-list {
  display: grid;
  gap: 10px;
}

.vendor-pricing-email-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.vendor-price-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.vendor-website-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.vendor-website-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.vendor-website-results {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.vendor-website-results[hidden] {
  display: none;
}

.vendor-website-results-header,
.vendor-website-result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.vendor-website-results-header span,
.vendor-website-result-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.vendor-website-results-header strong,
.vendor-website-result-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.vendor-website-results-header small,
.vendor-website-result-card small,
.vendor-website-result-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vendor-website-result-list {
  display: grid;
  gap: 8px;
}

.vendor-website-result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--subtle);
}

.vendor-website-result-card code {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vendor-capture-options {
  margin-bottom: 12px;
}

.vendor-extension-install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
}

.vendor-extension-install h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.vendor-extension-download {
  display: inline-grid;
  min-width: 150px;
  place-items: center;
  text-decoration: none;
}

.vendor-extension-steps {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 12px 12px 30px;
  color: var(--muted);
  background: var(--subtle);
  font-size: 12px;
  font-weight: 700;
}

.vendor-capture-panel,
.vendor-capture-review,
.vendor-capture-review-header,
.vendor-capture-price-row {
  display: grid;
  gap: 10px;
}

.vendor-capture-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
}

.vendor-capture-panel h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.vendor-capture-bookmarklet {
  display: inline-grid;
  place-items: center;
  min-width: 132px;
  text-decoration: none;
}

.vendor-capture-review {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
}

.vendor-capture-review[hidden] {
  display: none;
}

.vendor-capture-review-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.vendor-capture-review-header span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.vendor-capture-review-header small,
.vendor-capture-price-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vendor-capture-result-list {
  display: grid;
  gap: 8px;
}

.vendor-capture-price-row {
  grid-template-columns: 28px 92px minmax(220px, 1fr) 110px 90px minmax(100px, 0.45fr);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--subtle);
}

.vendor-capture-price-row .checkbox-row {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.vendor-capture-price-row > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: var(--raised);
  font-size: 11px;
  font-weight: 900;
}

.vendor-capture-price-row b {
  white-space: nowrap;
}

.vendor-capture-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.vendor-source-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vendor-source-columns h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.vendor-website-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--subtle);
  padding: 10px 12px;
}

.vendor-website-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.vendor-website-card strong,
.vendor-website-card small {
  display: block;
}

.vendor-website-card small {
  color: var(--muted);
  margin-top: 3px;
}

.vendor-website-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.vendor-price-decision-grid section {
  display: grid;
  gap: 8px;
  align-content: start;
}

.vendor-price-decision-grid h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--ink);
  font-weight: 700;
}

.checkbox-row input {
  width: auto;
  min-height: 0;
}

.row-action-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}

.vendor-sheet-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.vendor-sheet-card strong {
  display: block;
  margin: 4px 0;
}

.vendor-sheet-card p {
  margin: 6px 0 0;
}

.vendor-pricing-table td {
  vertical-align: top;
}

.vendor-pricing-table .is-positive {
  color: #167a5b;
}

.vendor-pricing-table .is-negative {
  color: #b43c30;
}

.price-overview-grid > section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--subtle);
}

.price-focus-list {
  display: grid;
  gap: 8px;
}

.price-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper);
}

.price-focus-card.up {
  border-left-color: var(--danger);
}

.price-focus-card.down,
.price-focus-card.best {
  border-left-color: var(--accent);
}

.price-focus-card.recent {
  border-left-color: var(--gold);
}

.price-focus-card div {
  min-width: 0;
}

.price-focus-card strong,
.price-focus-card span,
.price-focus-card b,
.price-focus-card small {
  display: block;
  overflow-wrap: anywhere;
}

.price-focus-card strong {
  font-size: 13px;
}

.price-focus-card span,
.price-focus-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.price-focus-card b {
  color: var(--ink);
  font-size: 13px;
}

.nested-report-section {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.nested-report-section + .nested-report-section,
.nested-report-section + .panel-header {
  margin-top: 14px;
}

.item-cost-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  overflow: hidden;
}

.item-cost-category summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.item-cost-category summary::-webkit-details-marker {
  display: none;
}

.item-cost-category summary::before {
  content: ">";
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.item-cost-category[open] summary::before {
  transform: rotate(90deg);
}

.item-cost-category summary span {
  flex: 1;
}

.item-cost-category summary strong {
  display: grid;
  min-width: 34px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: #edf1ee;
  font-size: 12px;
}

.item-cost-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.price-graph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.price-graph-grid section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--subtle);
}

.price-graph-grid h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13px;
}

.price-bars {
  display: grid;
  gap: 10px;
}

.price-bar-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.85fr) auto;
  gap: 10px;
  align-items: center;
}

.price-bar-row strong,
.price-bar-row span {
  display: block;
  overflow-wrap: anywhere;
}

.price-bar-row strong {
  font-size: 12px;
}

.price-bar-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.price-bar-row b {
  white-space: nowrap;
  font-size: 12px;
}

.price-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--button);
}

.price-bar-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--accent);
}

.price-bar-fill.spread {
  background: var(--gold);
}

.price-bar-fill.up {
  background: var(--danger);
}

.price-bar-fill.down {
  background: var(--accent);
}

.item-cost-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.3fr);
  gap: 14px;
  align-items: center;
  border: 1px solid #edf1ee;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.item-cost-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.item-cost-card strong {
  overflow-wrap: anywhere;
}

.item-cost-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.item-cost-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.item-cost-card dl div {
  min-width: 0;
  border-radius: 6px;
  padding: 7px 8px;
  background: #f3f6f2;
}

.item-cost-card dt {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.item-cost-card dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 800;
}

.price-date {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.price-link {
  min-height: 0;
  border-radius: 6px;
  padding: 0;
  color: var(--accent-dark);
  background: transparent;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-link:hover {
  color: var(--accent);
}

.empty-note {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.pricing-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 6px;
  min-width: 260px;
}

.pricing-editor input {
  min-width: 0;
}

.pricing-variable-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pricing-variable-toggle input {
  min-width: 0;
  width: auto;
}

.learning-protect-toggle {
  color: var(--text);
}

.learning-workbench-help {
  margin: -2px 0 12px;
  max-width: 1050px;
}

.pricing-editor span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.recipe-card {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  background: var(--paper);
}

.recipe-card[draggable="true"] {
  cursor: grab;
}

.recipe-card.is-dragging {
  opacity: 0.55;
}

.recipe-card strong {
  color: var(--ink);
}

.recipe-card span {
  color: var(--muted);
  font-size: 12px;
}

.recipe-card .recipe-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recipe-card-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.recipe-card-drag { flex: 0 0 auto; font-size: 16px !important; cursor: grab; }
.recipe-card-badges { display:flex; align-items:center; gap:5px; }
.recipe-card .recipe-card-title small.publish-draft { background:#fef3c7; color:#92400e; }
.recipe-card .recipe-card-title small.publish-archived { opacity:.68; }
.recipe-card .recipe-card-title small.publish-published { background:#d1fae5; color:#065f46; }
.recipe-card .recipe-card-title small { border-radius: 999px; padding: 3px 7px; background: var(--body); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.recipe-card .recipe-card-meta { line-height: 1.45; }
.recipe-add-row-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.recipe-add-row-actions .ghost-add-line-button { width: auto; min-width: 180px; }
.recipe-cost-match { font-style: normal; font-weight: 800; }
.recipe-cost-match.cost-matched { color: #047857; }
.recipe-cost-match.needs-cost { color: #b45309; }
.recipe-cost-match.no-ingredients { color: var(--muted); }
.recipe-version-history { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.recipe-version-history summary { cursor:pointer; font-weight:800; }
.recipe-version-history summary strong { margin-left:6px; }
.recipe-version-history article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.recipe-version-history article small, .recipe-version-history article span { display:block; margin-top:3px; color:var(--muted); }

.field-help { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.beverage-recipe-fields { margin: 14px 0; padding: clamp(13px, 2vw, 20px); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
.beverage-recipe-fields .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.beverage-recipe-fields h3 { margin: 2px 0 0; }
.beverage-form-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 680px) { .beverage-recipe-fields .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; } }

body.bulk-recipe-open { overflow: hidden; }
.bulk-recipe-backdrop { z-index: 1700; padding: clamp(8px, 2vw, 22px); }
.bulk-recipe-modal { display: flex; flex-direction: column; width: min(1500px, 98vw); height: min(920px, 96vh); max-width: none; overflow: hidden; }
.bulk-recipe-header { flex: 0 0 auto; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.bulk-recipe-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.bulk-recipe-toolbar .status-line { margin: 0 0 0 auto; }
.bulk-recipe-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr); min-height: 0; flex: 1; }
.bulk-recipe-table-wrap { min-width: 0; overflow: auto; padding: 12px; }
.bulk-recipe-table { width: 100%; min-width: 820px; }
.bulk-recipe-table th { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.bulk-recipe-table td { vertical-align: middle; }
.bulk-recipe-table td input:not([type="checkbox"]) { width: 100%; min-width: 150px; }
.bulk-recipe-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.bulk-status { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; }
.bulk-status.success { background: #d1fae5; color: #065f46; }
.bulk-status.warning { background: #fef3c7; color: #92400e; }
.bulk-status.error { background: #fee2e2; color: #991b1b; }
.bulk-status.loading { background: #e0f2fe; color: #075985; }
.bulk-recipe-quick-view { min-width: 0; overflow: auto; padding: 16px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--body) 70%, var(--paper)); }
.bulk-quick-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bulk-recipe-quick-view h3 { margin: 3px 0; }
.bulk-recipe-quick-view h4 { margin: 18px 0 8px; }
.bulk-quick-list { display: grid; gap: 7px; }
.bulk-quick-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.bulk-quick-list span { color: var(--muted); text-align: right; }
.bulk-recipe-footer { flex: 0 0 auto; border-top: 1px solid var(--line); }
@media (max-width: 850px) { .bulk-recipe-workspace { grid-template-columns: 1fr; } .bulk-recipe-quick-view { border-left: 0; border-top: 1px solid var(--line); max-height: 42vh; } .bulk-recipe-toolbar .status-line { width: 100%; margin-left: 0; } }

.menu-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  text-align: left;
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.menu-card:hover,
.recipe-card:hover {
  border-color: rgba(18, 146, 125, 0.45);
  box-shadow: 0 5px 16px rgba(26, 36, 33, 0.08);
  transform: translateY(-1px);
}

.recipe-card.is-current {
  border-color: var(--accent, #b45309);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #b45309) 20%, transparent);
  background: color-mix(in srgb, var(--accent, #b45309) 7%, var(--paper, #fff));
}

.menu-card-photo {
  display: grid;
  width: 58px;
  height: 52px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
  overflow: hidden;
}

.menu-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card-body {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.menu-card-body strong {
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.menu-card-body span,
.menu-card-body small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.line-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.table-wrap {
  overflow: auto;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}

.invoice-line-table {
  min-width: 1280px;
}

.invoice-line-table th:first-child,
.invoice-line-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--paper);
}

.invoice-line-table th:first-child {
  z-index: 4;
  background: var(--raised);
}

.history-table {
  min-width: 720px;
}

.price-history-table {
  min-width: 1040px;
}

.vendor-price-table {
  min-width: 980px;
}

.price-history-table .price-date,
.vendor-price-table .price-date {
  white-space: nowrap;
}

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

th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  background: var(--raised);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

tbody tr:hover td {
  background: rgba(15, 143, 122, 0.045);
}

tbody tr.is-line-warning td {
  background: rgba(190, 83, 66, 0.06);
}

tbody tr.is-sent-back td {
  background: rgba(166, 111, 27, 0.08);
}

tbody tr.is-sent-back td:first-child {
  box-shadow: inset 4px 0 0 var(--gold);
}

tbody tr.is-keg-deposit td {
  background: #eef6fb;
}

tbody tr.is-keg-deposit td:first-child {
  box-shadow: inset 4px 0 0 #4d91b8;
}

tbody tr.is-line-warning td:first-child {
  box-shadow: inset 4px 0 0 #be5342;
}

tbody tr.is-manual-insert td {
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

tbody tr.is-manual-insert td:first-child {
  box-shadow: inset 4px 0 0 var(--accent);
}

tbody tr.is-line-math-warning .money-cell input {
  border-color: #be5342;
  box-shadow: 0 0 0 2px rgba(190, 83, 66, 0.12);
}

.line-action-cell[data-issue]:not([data-issue=""])::before {
  content: attr(data-issue);
  display: block;
  max-width: 150px;
  margin-bottom: 5px;
  color: #9d382b;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

td input,
td select {
  min-width: 120px;
}

.invoice-line-table .item-cell input {
  min-width: 260px;
}

.invoice-line-table .item-cell {
  display: grid;
  gap: 6px;
}

.invoice-line-table .item-code-input {
  min-width: 120px;
  height: 32px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  background: var(--subtle);
}

.invoice-line-table .qty-cell input {
  min-width: 64px;
  width: 72px;
}

.invoice-line-table .unit-cell input {
  min-width: 66px;
  width: 78px;
}

.invoice-line-table .status-cell select {
  min-width: 96px;
  width: 108px;
}

.invoice-line-table td select {
  min-width: 104px;
}

.invoice-line-table .money-cell input {
  min-width: 86px;
  width: 96px;
}

.line-action-cell {
  white-space: nowrap;
}

.insert-line-button {
  margin-right: 4px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

.source-button {
  margin-right: 4px;
}

.not-shipped-button {
  margin-right: 4px;
  color: #7a4d18;
  background: #fff4df;
}

.invoice-line-table tr.is-not-shipped {
  background: #fffaf0;
}

.invoice-line-table tr.is-price-check-target td {
  background: #eaf6f1;
  box-shadow: inset 0 2px 0 rgba(28, 122, 103, 0.18), inset 0 -2px 0 rgba(28, 122, 103, 0.18);
}

.invoice-line-table tr.is-not-shipped .item-cell input {
  color: #7a4d18;
  font-weight: 800;
}

.invoice-add-line-row td,
.ghost-add-row td {
  padding: 10px;
  background: var(--subtle);
}

.ghost-add-row-split td {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ghost-add-line-button {
  width: 100%;
  min-height: 42px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(102, 116, 111, 0.06);
  font-weight: 900;
}

.ghost-add-line-button:hover,
.ghost-add-line-button:focus-visible {
  color: var(--accent-dark);
  background: var(--button-active);
}

.package-cell {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 6px;
  min-width: 330px;
}

.package-cell label {
  display: grid;
  gap: 3px;
  margin: 0;
}

.package-cell label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.package-cell input {
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
}

.package-preview {
  grid-column: 1 / -1;
  color: var(--accent-dark);
  background: #eef7f1;
  border: 1px solid #cfe4d6;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.recipe-source-cell {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.recipe-source-cell select,
.recipe-source-cell input {
  width: 100%;
  min-width: 0;
}

.recipe-source-cell .is-hidden {
  display: none;
}

.case-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 6px;
}

.case-price-grid input {
  min-height: 34px;
  padding: 0 8px;
}

.recipe-line-cost {
  min-width: 220px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.costing-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.costing-summary-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: var(--subtle);
}

.costing-summary-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.costing-summary-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.05;
}

.costing-summary-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
}

.costing-summary-card.good {
  border-color: rgba(33, 111, 93, 0.22);
  background: rgba(33, 111, 93, 0.06);
}

.costing-summary-card.warning {
  border-color: rgba(168, 61, 52, 0.24);
  background: rgba(168, 61, 52, 0.07);
}

.costing-summary-card.muted {
  background: var(--paper);
}

.ingredient-cost-readout {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ingredient-cost-readout strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
}

.ingredient-cost-readout small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.ingredient-status-badge {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--muted);
  background: rgba(102, 116, 111, 0.1);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ingredient-status-badge.good {
  color: var(--accent-dark);
  background: rgba(33, 111, 93, 0.1);
}

.ingredient-status-badge.warning {
  color: var(--danger);
  background: rgba(168, 61, 52, 0.09);
}

.primary-button.is-saving::after,
.secondary-button.is-saving::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

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

.icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--danger);
  background: #fff1f0;
  font-weight: 800;
}

.link-button {
  min-height: 0;
  border-radius: 0;
  padding: 0;
  color: var(--accent-dark);
  background: transparent;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

tr.is-selected-row td {
  background: #edf8f4;
}

.pl-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pl-summary-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcf8;
}

.pl-summary-card.result {
  background: #f2f7f3;
  border-color: #cdded3;
}

.pl-summary-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf1ee;
  padding-bottom: 10px;
}

.pl-summary-card-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pl-summary-card-header strong {
  font-size: 18px;
  line-height: 1.1;
  text-align: right;
}

.pl-summary-rows {
  display: grid;
  gap: 2px;
}

.pl-summary-row,
.bar-row {
  display: grid;
  align-items: center;
  gap: 12px;
}

.pl-summary-row {
  grid-template-columns: 1fr auto;
  min-height: 30px;
  border-radius: 6px;
  padding: 6px 8px;
  color: #41514b;
}

.pl-summary-row:nth-child(even) {
  background: rgba(236, 241, 237, 0.55);
}

.pl-summary-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
}

.pl-summary-row strong {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.pl-summary-row.is-total {
  margin-top: 4px;
  background: #e8efe9;
  font-weight: 800;
}

.pl-summary-row.is-total span,
.pl-summary-row.is-total strong {
  font-size: 14px;
}

.pl-summary-row strong.is-positive {
  color: var(--accent-dark);
}

.pl-summary-row strong.is-negative {
  color: var(--danger);
}

.bars {
  display: grid;
  gap: 14px;
}

.bar-row {
  grid-template-columns: 120px 1fr auto;
}

.bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ece7;
}

.bar-fill {
  height: 100%;
  background: var(--gold);
}

.search {
  max-width: 280px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 41, 51, 0.5);
  z-index: 20;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(520px, 100%);
  border: 1px solid rgba(216, 222, 233, 0.95);
  border-radius: 8px;
  padding: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.source-modal {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: hidden;
}

.invoice-detail-modal {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

.invoice-preview-modal {
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: hidden;
}

.drive-preview-modal {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: hidden;
}

.drive-preview-modal .panel-header {
  gap: 12px;
}

.drive-preview-content {
  display: grid;
  min-height: 320px;
  max-height: min(74vh, 780px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--subtle);
}

.drive-preview-loading,
.drive-preview-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 24px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.drive-preview-image {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.drive-preview-image img {
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.drive-preview-image figcaption,
.drive-preview-note {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.drive-preview-frame {
  width: 100%;
  min-height: min(74vh, 780px);
  border: 0;
  background: #fff;
}

.drive-preview-table-wrap {
  overflow: auto;
}

.drive-preview-table {
  min-width: 720px;
  border-collapse: collapse;
  background: var(--paper);
  font-size: 12px;
}

.drive-preview-table td {
  max-width: 260px;
  border: 1px solid var(--line);
  padding: 7px 9px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-preview-table tr:first-child td {
  background: var(--raised);
  font-weight: 900;
}

.drive-preview-text {
  min-height: 100%;
  margin: 0;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.invoice-preview-content {
  display: grid;
  gap: 10px;
  min-height: 280px;
}

.invoice-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--raised);
}

.invoice-preview-toolbar strong {
  color: var(--ink);
  font-size: 13px;
}

.invoice-preview-stage {
  max-height: min(72vh, 760px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--subtle);
}

.invoice-preview-stage .page-preview {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.invoice-preview-stage img,
.invoice-preview-stage object {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: #fff;
}

.invoice-detail-content {
  display: grid;
  gap: 12px;
}

.invoice-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.invoice-detail-summary article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: var(--subtle);
}

.invoice-detail-summary span,
.invoice-detail-grid h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-detail-summary strong {
  font-size: 20px;
}

.invoice-detail-alert,
.invoice-detail-ok {
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

.invoice-detail-alert {
  border: 1px solid rgba(190, 83, 66, 0.24);
  color: #7d2c22;
  background: #fff0ec;
}

.invoice-detail-alert p {
  margin: 4px 0 0;
}

.invoice-detail-ok {
  color: #12614f;
  background: rgba(28, 122, 103, 0.1);
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr);
  gap: 12px;
}

.invoice-detail-grid section {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: var(--paper);
}

.invoice-detail-mini-table {
  display: grid;
  gap: 5px;
}

.invoice-detail-mini-table div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

.invoice-detail-lines {
  border: 1px solid var(--line);
  border-radius: 7px;
}

.line-source-content {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  min-height: 0;
}

.line-source-page-shell {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.line-source-zoom-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.line-source-zoom-toolbar .secondary-button {
  min-height: 34px;
  padding: 6px 10px;
}

.line-source-page {
  max-height: 74vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  cursor: grab;
}

.line-source-page.is-panning {
  cursor: grabbing;
}

.line-source-page-inner {
  width: 180%;
  transform: scale(1.8);
  transform-origin: top left;
}

.line-source-page .page-preview {
  margin: 0;
  padding: 10px;
}

.line-source-page img,
.line-source-page object {
  width: 100%;
  max-height: none;
}

.line-source-details {
  display: grid;
  gap: 12px;
  align-content: start;
  max-height: 74vh;
  overflow: auto;
}

.line-source-details section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.line-source-details h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.line-source-details dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.line-source-details dl div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
}

.line-source-details dt {
  color: var(--muted);
  font-size: 12px;
}

.line-source-details dd {
  margin: 0;
  font-weight: 700;
}

.line-source-details pre {
  margin: 0;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 240px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.positive {
  color: var(--danger);
}

.negative {
  color: var(--accent-dark);
}


html.dark-mode .menu-photo-picker,
html.dark-mode .drop-zone,
html.dark-mode .preview,
html.dark-mode .invoice-learning-panel,
html.dark-mode .invoice-line-reference,
html.dark-mode .line-source-page {
  background: var(--wash);
}

html.dark-mode .menu-photo-preview,
html.dark-mode .pl-input-group,
html.dark-mode .excel-preview,
html.dark-mode .bulk-group,
html.dark-mode .recipe-category,
html.dark-mode .learning-category,
html.dark-mode .training-vendor-card,
html.dark-mode .item-cost-category,
html.dark-mode .item-cost-card,
html.dark-mode .recipe-card,
html.dark-mode .menu-card,
html.dark-mode .table-wrap,
html.dark-mode .line-source-details section {
  background: var(--subtle);
}

html.dark-mode .invoice-learning-summary span {
  background: var(--subtle);
}

html.dark-mode .excel-preview-header,
html.dark-mode th,
html.dark-mode .bulk-queue-header,
html.dark-mode .status-chip,
html.dark-mode .item-cost-card dl div,
html.dark-mode .pl-summary-card,
html.dark-mode .pl-summary-row.is-total,
html.dark-mode .bar-track,
html.dark-mode .learning-category summary strong,
html.dark-mode .item-cost-category summary strong,
html.dark-mode .recipe-category summary strong {
  background: var(--raised);
}

html.dark-mode .pl-summary-card.result,
html.dark-mode tr.is-selected-row td,
html.dark-mode .drop-zone.is-dragging,
html.dark-mode .recipe-category.is-drop-target,
html.dark-mode .package-preview {
  border-color: rgba(56, 185, 144, 0.38);
  background: #102820;
}

html.dark-mode .status-chip.is-good {
  border-color: rgba(56, 185, 144, 0.34);
  color: #9be1c2;
  background: rgba(56, 185, 144, 0.12);
}

html.dark-mode .status-chip.is-waiting {
  border-color: rgba(212, 168, 75, 0.36);
  color: #f2c96d;
  background: rgba(212, 168, 75, 0.1);
}

html.dark-mode .status-chip.is-bad {
  border-color: rgba(240, 113, 103, 0.42);
  color: #f3aca6;
  background: rgba(240, 113, 103, 0.12);
}

html.dark-mode .bulk-queue-card.is-duplicate,
html.dark-mode .not-shipped-button,
html.dark-mode .invoice-line-table tr.is-not-shipped {
  border-color: rgba(212, 168, 75, 0.54);
  color: #f2c96d;
  background: #302611;
}

html.dark-mode tbody tr.is-sent-back td {
  color: var(--ink);
  background: rgba(212, 168, 75, 0.1);
}

html.dark-mode tbody tr.is-keg-deposit td {
  background: rgba(77, 145, 184, 0.13);
}

html.dark-mode .bulk-queue-card.is-error,
html.dark-mode .icon-button {
  border-color: rgba(240, 113, 103, 0.45);
  background: #351816;
}

html.dark-mode .needs-review-card,
html.dark-mode .return-credit-card.is-open,
html.dark-mode tbody tr.is-line-warning td,
html.dark-mode .invoice-detail-alert {
  border-color: rgba(240, 113, 103, 0.4);
  color: #f3aca6;
  background: #351816;
}

html.dark-mode .return-credit-card {
  background: var(--paper);
}

html.dark-mode .keg-deposit-summary article {
  background: var(--paper);
}

html.dark-mode .return-credit-card.is-matched {
  border-color: rgba(56, 185, 144, 0.38);
}

html.dark-mode .invoice-detail-ok {
  color: #9be1c2;
  background: rgba(56, 185, 144, 0.14);
}

html.dark-mode .invoice-detail-summary article,
html.dark-mode .invoice-detail-grid section {
  background: var(--paper);
}

html.dark-mode .preview img,
html.dark-mode .preview object,
html.dark-mode .reference-preview,
html.dark-mode .reference-preview img,
html.dark-mode .reference-preview object {
  background: #0a0f0d;
}

html.dark-mode .pl-summary-row {
  color: var(--ink);
}

html.dark-mode .pl-summary-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.035);
}

html.dark-mode .modal-backdrop {
  background: rgba(0, 0, 0, 0.68);
}

html.dark-mode input.has-warning {
  box-shadow: 0 0 0 3px rgba(240, 113, 103, 0.18);
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

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

  .nav-group {
    align-content: start;
  }

  .metrics-grid,
  .dashboard-feed-grid,
  .percent-grid,
  .liquor-tax-grid,
  .keg-deposit-summary,
  .invoice-detail-summary,
  .invoice-detail-grid,
  .invoice-workflow-strip,
  .ordering-note-grid,
  .settings-placeholder-grid,
  .settings-action-grid,
  .data-health-grid,
  .price-graph-grid,
  .trend-summary-grid,
  .trend-category-grid,
  .global-search,
  .global-answer-grid,
  .global-result-card,
  .dashboard-grid,
  .intake-grid,
  .menu-workspace-grid,
  .workbar,
  .form-grid,
  .menu-form-grid,
  .pl-table,
  .item-cost-card,
  .inline-add-form,
  .pl-input-layout,
  .line-source-content,
  .pl-field-grid,
  .pl-input-group-wide .pl-field-grid {
    grid-template-columns: 1fr;
  }

  .invoice-balance-row {
    max-width: none;
    text-align: left;
  }

  .saved-invoice-tools {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .saved-invoice-tools .search {
    flex: 1;
    min-width: 0;
  }

  .needs-review-card,
  .return-credit-card,
  .ignored-issue-card {
    grid-template-columns: 1fr;
  }

  .needs-review-actions {
    justify-content: flex-start;
  }

  .invoice-review-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .price-bar-row {
    grid-template-columns: 1fr;
  }

  .trend-controls {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .trend-controls select,
  .trend-controls label {
    flex: 1;
  }

  .trend-bar-row {
    grid-template-columns: 1fr;
  }

  .trend-bar-row > strong,
  .trend-change {
    text-align: left;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 14px;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  input,
  select,
  textarea {
    min-height: 42px;
  }

  .app-shell {
    display: block;
  }

  .main,
  .sidebar {
    padding: 12px;
  }

  .sidebar {
    height: auto;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-line);
  }

  .brand {
    align-items: center;
  }

  .brand-mark {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .brand h1 {
    font-size: 14px;
  }

  .brand p,
  .nav-group p {
    display: none;
  }

  .tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nav-group {
    display: contents;
  }

  .tab {
    min-width: max-content;
    min-height: 38px;
    scroll-snap-align: start;
    padding: 0 12px;
  }

  .tabs.simple-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 7px;
  }

  .simple-tabs .tab,
  .simple-tabs .nav-menu,
  .simple-tabs .nav-menu summary {
    width: 100%;
    min-width: 0;
  }

  .simple-tabs .tab {
    white-space: normal;
  }

  .nav-menu-panel {
    padding: 5px;
  }

  .nav-subtab {
    min-height: 36px;
    font-size: 13px;
  }

  .main {
    padding-bottom: 88px;
  }

  .topbar,
  .panel-header,
  .month-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .trend-controls {
    flex-direction: column;
  }

  .trend-controls label,
  .trend-controls select,
  .trend-controls input {
    width: 100%;
  }

  .utility-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .deployment-status {
    align-items: stretch;
    flex-direction: column;
  }

  .status-chip {
    justify-content: center;
    width: 100%;
  }

  .utility-bar button,
  .panel-header button {
    width: 100%;
  }

  .workbar {
    gap: 8px;
  }

  .page-heading h1 {
    font-size: 20px;
  }

  .month-card {
    justify-self: stretch;
  }

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

  .metric {
    min-height: 86px;
    padding: 12px;
  }

  .metric strong {
    font-size: 22px;
  }

  .panel {
    border-radius: 0;
    margin-right: -12px;
    margin-left: -12px;
  }

  .panel > .form-grid,
  .panel > .menu-form-grid,
  .panel > .intake-grid,
  .panel > .preview,
  .panel > .invoice-review-workspace,
  .panel > .bulk-groups,
  .panel > .bulk-queue-list,
  .panel > .invoice-learning-panel,
  .panel > .hint,
  .panel > .invoice-review-bar {
    margin-right: 0;
    margin-left: 0;
  }

  .invoice-workflow-strip {
    display: none;
  }

  .drop-zone {
    min-height: 140px;
  }

  .invoice-review-table-wrap {
    overflow: visible;
  }

  .invoice-line-table,
  .invoice-line-table thead,
  .invoice-line-table tbody,
  .invoice-line-table tfoot,
  .invoice-line-table tr,
  .invoice-line-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .invoice-line-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
  }

  .invoice-line-table thead {
    display: none;
  }

  .invoice-line-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    background: var(--paper);
    box-shadow: var(--soft-shadow);
  }

  .invoice-line-table th:first-child,
  .invoice-line-table td:first-child {
    position: static;
    background: transparent;
    box-shadow: none;
  }

  .invoice-add-line-row {
    background: transparent !important;
  }

  .ghost-add-row {
    background: transparent !important;
  }

  .ghost-add-row-split td {
    grid-template-columns: 1fr;
  }

  .invoice-line-table td {
    border-bottom: 0;
    padding: 5px 0;
  }

  .invoice-line-table td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .invoice-line-table td:nth-child(1)::before { content: "Item"; }
  .invoice-line-table td:nth-child(2)::before { content: "Qty"; }
  .invoice-line-table td:nth-child(3)::before { content: "Unit"; }
  .invoice-line-table td:nth-child(4)::before { content: "Unit Price"; }
  .invoice-line-table td:nth-child(5)::before { content: "Total"; }
  .invoice-line-table td:nth-child(6)::before { content: "Costing Definition"; }
  .invoice-line-table td:nth-child(7)::before { content: "Category"; }
  .invoice-line-table td:nth-child(8)::before { content: "Status"; }

  .invoice-add-line-row td::before,
  .ghost-add-row td::before {
    display: none;
    content: "";
  }

  .invoice-line-table td input,
  .invoice-line-table td select,
  .invoice-line-table .item-cell input,
  .invoice-line-table .item-code-input,
  .invoice-line-table .qty-cell input,
  .invoice-line-table .unit-cell input,
  .invoice-line-table .money-cell input,
  .invoice-line-table .status-cell select,
  .invoice-line-table td select {
    width: 100%;
    min-width: 0;
  }

  .package-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .line-action-cell {
    display: flex !important;
    gap: 8px;
    padding-top: 8px !important;
  }

  .line-action-cell .icon-button {
    flex: 1;
    min-height: 38px;
  }

  .invoice-learning-list li {
    grid-template-columns: 1fr;
  }

  .verification-line-head,
  .verification-field-grid,
  .verification-simple-change {
    grid-template-columns: 1fr;
  }

  .invoice-learning-list em,
  .verification-line-head em {
    text-align: left;
  }

  .item-cost-card dl {
    grid-template-columns: 1fr;
  }

  .menu-photo-editor,
  .menu-card {
    grid-template-columns: 1fr;
  }

  .menu-photo-preview,
  .menu-card-photo {
    width: 100%;
  }
}

html.dark-mode body {
  color: var(--ink);
  background: var(--body);
}

html.dark-mode .sidebar,
html.dark-mode .main {
  color: var(--ink);
  background: var(--body);
}

html.dark-mode .sidebar {
  background: var(--sidebar);
}

html.dark-mode .topbar {
  border-color: var(--line);
  background: rgba(16, 23, 20, 0.94);
}

html.dark-mode .page-heading,
html.dark-mode .month-card,
html.dark-mode .metric,
html.dark-mode .panel,
html.dark-mode .modal {
  border-color: var(--line);
  color: var(--ink);
  background: var(--paper);
}

html.dark-mode .page-heading {
  background: transparent;
}

html.dark-mode .percent-card,
html.dark-mode .pl-input-group,
html.dark-mode .bulk-group,
html.dark-mode .bulk-queue-card,
html.dark-mode .recipe-category,
html.dark-mode .learning-category,
html.dark-mode .training-vendor-card,
html.dark-mode .item-cost-category,
html.dark-mode .item-cost-card,
html.dark-mode .recipe-card,
html.dark-mode .menu-card,
html.dark-mode .pl-summary-card,
html.dark-mode .table-wrap,
html.dark-mode .excel-preview,
html.dark-mode .line-source-details section {
  border-color: var(--line);
  color: var(--ink);
  background: var(--subtle);
}

html.dark-mode select,
html.dark-mode input,
html.dark-mode textarea {
  border-color: var(--line);
  color: var(--ink);
  background: var(--field);
}

html.dark-mode select:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus {
  outline: 0;
  box-shadow: var(--focus-ring);
}

html.dark-mode th,
html.dark-mode .excel-preview-header,
html.dark-mode .bulk-queue-header,
html.dark-mode .invoice-balance-row,
html.dark-mode .extract-progress-track,
html.dark-mode .item-cost-card dl div,
html.dark-mode .pl-summary-row.is-total,
html.dark-mode .bar-track,
html.dark-mode .learning-category summary strong,
html.dark-mode .item-cost-category summary strong,
html.dark-mode .recipe-category summary strong {
  color: var(--ink);
  background: var(--raised);
}

html.dark-mode td {
  color: var(--ink);
}

html.dark-mode .secondary-button {
  color: var(--ink);
  background: var(--button);
}

html.dark-mode .tab,
html.dark-mode .category-edit-button {
  color: var(--sidebar-muted);
  background: transparent;
}

html.dark-mode .category-edit-button {
  background: var(--button-active);
}

html.dark-mode .tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

html.dark-mode .tab.is-active {
  border-color: rgba(56, 185, 144, 0.34);
  color: #fff;
  background: rgba(56, 185, 144, 0.18);
}


html.dark-mode .drop-zone,
html.dark-mode .preview,
html.dark-mode .invoice-line-reference,
html.dark-mode .reference-preview,
html.dark-mode .line-source-page,
html.dark-mode .menu-photo-picker,
html.dark-mode .menu-photo-preview {
  border-color: var(--line);
  color: var(--ink);
  background: var(--wash);
}

html.dark-mode .preview img,
html.dark-mode .preview object,
html.dark-mode .reference-preview img,
html.dark-mode .reference-preview object {
  background: #0a0f0d;
}

/* Invoice review polish */
.invoice-review-panel {
  overflow: visible;
}

.invoice-review-bar {
  top: 0;
  z-index: 25;
  border: 1px solid var(--line);
  border-right: 0;
  border-left: 0;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 18px rgba(23, 31, 28, 0.06);
}

.invoice-review-status {
  align-items: center;
}

.invoice-review-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 0.75fr));
  gap: 8px;
  margin-top: 12px;
}

.invoice-readiness-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--raised) 70%, var(--paper));
}

.invoice-readiness-strip span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 9px;
  background: var(--paper);
}

.invoice-readiness-strip b {
  min-width: 0;
  color: var(--ink);
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-readiness-strip em {
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  background: var(--subtle);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-readiness-strip small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.invoice-readiness-strip .ok {
  border-color: color-mix(in srgb, var(--good) 30%, var(--line));
}

.invoice-readiness-strip .ok em {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, var(--paper));
}

.invoice-readiness-strip .check {
  border-color: color-mix(in srgb, var(--warning, #d98619) 42%, var(--line));
}

.invoice-readiness-strip .check em {
  color: var(--warning, #9a6500);
  background: color-mix(in srgb, var(--warning, #d98619) 12%, var(--paper));
}

.invoice-readiness-strip .quiet {
  opacity: 0.78;
}

.invoice-review-summary-card {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--subtle);
}

.invoice-review-summary-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.invoice-review-summary-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.05;
}

.invoice-review-hero {
  min-height: 90px;
}

.invoice-review-hero strong {
  font-size: clamp(22px, 2.4vw, 30px);
}

.invoice-review-summary-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.invoice-review-summary-card.good {
  border-color: rgba(33, 111, 93, 0.22);
  background: rgba(33, 111, 93, 0.06);
}

.invoice-review-summary-card.warning {
  border-color: rgba(168, 61, 52, 0.24);
  background: rgba(168, 61, 52, 0.07);
}

.invoice-review-summary-card.credit {
  border-color: rgba(143, 112, 66, 0.28);
  background: rgba(143, 112, 66, 0.08);
}

.invoice-review-summary-card.muted {
  background: var(--paper);
}

.invoice-save-button {
  min-width: 132px;
}

.invoice-save-button.needs-review {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--warning, #d98619) 44%, var(--line));
  background: color-mix(in srgb, var(--warning, #d98619) 12%, var(--button));
}

.invoice-save-button.is-saving {
  cursor: wait;
}

.invoice-save-button.is-saving::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.invoice-save-progress-backdrop { z-index: 29500 !important; display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, var(--ink) 42%, transparent); backdrop-filter: blur(3px); }
.invoice-save-progress-backdrop[hidden] { display: none !important; }
.invoice-save-progress-card { display: flex; align-items: center; gap: 14px; width: min(460px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.invoice-save-progress-card strong { display: block; font-size: 1.08rem; }
.invoice-save-progress-card p { margin: 4px 0 0; color: var(--muted); }
.invoice-save-spinner { flex: 0 0 28px; width: 28px; height: 28px; border: 3px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-top-color: var(--accent-dark); border-radius: 999px; animation: invoice-save-spin .75s linear infinite; }
body.invoice-save-in-progress { overflow: hidden; }
@keyframes invoice-save-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .invoice-save-spinner { animation-duration: 1.8s; } }

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.invoice-balance-row,
.line-count-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.invoice-balance-status.is-balanced,
.line-count-status.is-balanced {
  border-color: rgba(33, 111, 93, 0.24);
  color: var(--accent-dark);
  background: rgba(33, 111, 93, 0.08);
}

.invoice-balance-status.is-off,
.line-count-status.is-off {
  border-color: rgba(168, 61, 52, 0.26);
  color: var(--danger);
  background: rgba(168, 61, 52, 0.08);
}

.invoice-review-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invoice-line-table tbody tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.invoice-line-table tbody tr:hover td {
  background: rgba(33, 111, 93, 0.045);
}

.invoice-line-table tbody tr.is-charge-line td {
  background: color-mix(in srgb, var(--paper) 84%, var(--subtle));
}

.invoice-line-table tbody tr.is-charge-line td:first-child {
  border-left: 4px solid rgba(99, 118, 138, 0.45);
}

.invoice-line-table tbody tr.is-charge-line input,
.invoice-line-table tbody tr.is-charge-line select {
  color: var(--muted);
}

.status-cell {
  display: grid;
  gap: 6px;
  align-content: center;
}

.line-status-badge {
  width: max-content;
  max-width: 100%;
}

.line-action-cell {
  min-width: 112px;
}

.line-action-cell[data-issue]:not([data-issue=""])::before {
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--danger);
  background: rgba(168, 61, 52, 0.08);
}

.ghost-add-line-button {
  min-height: 38px;
}

html.dark-mode .invoice-review-bar {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

html.dark-mode .invoice-review-summary-card {
  border-color: var(--line);
  background: var(--paper);
}

html.dark-mode .invoice-readiness-strip {
  background: color-mix(in srgb, var(--paper) 82%, #000000);
}

html.dark-mode .invoice-readiness-strip span {
  background: color-mix(in srgb, var(--paper) 90%, #000000);
}

html.dark-mode .invoice-save-button.needs-review {
  color: var(--ink);
  background: rgba(212, 168, 75, 0.14);
}

html.dark-mode .costing-summary-card {
  border-color: var(--line);
  background: var(--paper);
}

html.dark-mode .costing-summary-card.good {
  background: rgba(110, 195, 168, 0.09);
}

html.dark-mode .costing-summary-card.warning {
  background: rgba(240, 113, 103, 0.1);
}

html.dark-mode .sales-menu-reconciliation {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
}

html.dark-mode .sales-menu-reconciliation .reconciliation-row {
  border-color: var(--line);
  color: var(--ink);
  background: var(--subtle);
}

html.dark-mode .sales-menu-reconciliation .reconciliation-row.unmatched {
  border-left-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, var(--subtle));
}

html.dark-mode .sales-menu-reconciliation .reconciliation-row.connected {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--subtle));
}

html.dark-mode .sales-menu-reconciliation .health-all-clear {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--subtle));
}

html.dark-mode body .section-overview-tab[data-menu-type="cocktail"].is-active,
html.dark-mode body .nav-subtab[data-menu-type="cocktail"].is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  color: var(--sage-selected-ink) !important;
  background: var(--sage-selected) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

html.dark-mode .ingredient-status-badge.good {
  color: #99dec8;
  background: rgba(110, 195, 168, 0.1);
}

html.dark-mode .ingredient-status-badge.warning {
  color: #f5a19a;
  background: rgba(240, 113, 103, 0.1);
}

html.dark-mode .invoice-review-summary-card.good {
  background: rgba(110, 195, 168, 0.09);
}

html.dark-mode .invoice-review-summary-card.warning {
  background: rgba(240, 113, 103, 0.1);
}

html.dark-mode .invoice-review-summary-card.credit {
  background: rgba(189, 164, 124, 0.11);
}

html.dark-mode .invoice-balance-status.is-balanced,
html.dark-mode .line-count-status.is-balanced {
  color: #99dec8;
  background: rgba(110, 195, 168, 0.1);
}

html.dark-mode .invoice-balance-status.is-off,
html.dark-mode .line-count-status.is-off {
  color: #f5a19a;
  background: rgba(240, 113, 103, 0.1);
}

/* V3.37 compact, flowing invoice-entry workspace */
body #invoice .invoice-space[data-invoice-space-panel="input"] {
  gap: 10px;
}

body #invoice .intake-grid {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.045);
}

body #invoice .intake-grid > .panel {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body #invoice .intake-grid > .panel + .panel {
  border-left: 1px solid var(--ui-line, var(--line)) !important;
}

body #invoice .intake-grid .panel-header {
  min-height: 46px;
  padding: 8px 10px !important;
}

body #invoice .intake-grid .panel-header h2 {
  font-size: 14px;
}

body #invoice .intake-grid .panel-actions {
  gap: 5px;
}

body #invoice .intake-grid .panel-actions button,
body #invoice #parseText {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
}

body #invoice .drop-zone {
  min-height: 58px;
  margin: 9px 10px 6px;
  padding: 9px 12px;
  border-radius: 9px;
}

body #invoice #extractStatus,
body #invoice .intake-grid > .panel > .hint {
  margin: 4px 10px 8px;
  font-size: 11px;
}

body #invoice .intake-grid > .panel > #preview {
  max-height: 250px;
  margin: 6px 10px 10px;
}

body #invoice #manualInvoiceText {
  min-height: 72px;
  max-height: 110px;
  margin: 9px 10px 4px;
  padding: 8px 10px;
}

body #invoice .invoice-work-page-preview {
  margin: 8px 10px 10px;
}

body #invoice .invoice-review-panel {
  margin-top: 10px;
  border-radius: 14px !important;
}

body #invoice .invoice-review-panel > .panel-header {
  min-height: 48px;
  padding: 9px 12px !important;
}

body #invoice .invoice-review-panel > .panel-header h2 {
  font-size: 17px;
}

body #invoice .invoice-review-panel > .panel-header .hint {
  margin-top: 1px;
  font-size: 10px;
}

body #invoice .invoice-header-grid {
  grid-template-columns: minmax(190px, 1.4fr) minmax(130px, .9fr) minmax(130px, .9fr) repeat(3, minmax(105px, .7fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 9px 12px 7px !important;
  border-bottom: 1px solid var(--ui-line, var(--line));
}

body #invoice .invoice-header-grid label {
  gap: 3px !important;
  font-size: 10px !important;
  letter-spacing: .025em;
  text-transform: uppercase;
}

body #invoice .invoice-header-grid input {
  min-height: 32px !important;
  height: 32px;
  padding: 5px 8px !important;
  font-size: 12px;
}

body #invoice .invoice-review-summary {
  grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(105px, .7fr));
  gap: 5px;
  margin: 7px 12px 0;
}

body #invoice .invoice-review-summary-card,
body #invoice .invoice-review-hero {
  min-height: 48px;
  gap: 1px;
  padding: 6px 8px;
}

body #invoice .invoice-review-summary-card span {
  font-size: 8px;
}

body #invoice .invoice-review-summary-card strong,
body #invoice .invoice-review-hero strong {
  font-size: 14px;
}

body #invoice .invoice-review-summary-card small {
  font-size: 9px;
}

body #invoice .invoice-readiness-strip {
  gap: 4px;
  padding: 4px;
}

body #invoice .invoice-readiness-strip span {
  min-height: 30px;
  padding: 4px 6px;
}

body #invoice .invoice-readiness-strip b,
body #invoice .invoice-readiness-strip small {
  font-size: 9px;
}

body #invoice .invoice-readiness-strip em {
  padding: 2px 5px;
  font-size: 8px;
}

body #invoice .invoice-review-bar {
  min-height: 42px;
  margin-top: 7px;
  padding: 5px 12px;
}

body #invoice .invoice-review-bar button,
body #invoice .invoice-review-bar .invoice-save-button {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

body #invoice .invoice-review-bar + .hint {
  margin: 5px 12px 7px;
  font-size: 10px;
}

body #invoice .invoice-review-workspace {
  gap: 8px !important;
  padding: 0 12px 12px;
}

body #invoice .invoice-review-workspace:not(.has-reference) {
  grid-template-columns: minmax(0, 1fr) !important;
}

body #invoice .invoice-review-workspace.has-reference {
  grid-template-columns: minmax(720px, 1.75fr) minmax(300px, .75fr) !important;
}

body #invoice .invoice-line-reference {
  min-height: 360px;
  max-height: 72vh;
  border-radius: 9px;
}

body #invoice .invoice-review-table-wrap {
  border-radius: 9px;
}

body #invoice .invoice-line-table {
  min-width: 940px;
  font-size: 11px;
}

body #invoice .invoice-line-table th {
  height: 30px;
  padding: 5px 6px;
  font-size: 9px;
  line-height: 1.05;
}

body #invoice .invoice-line-table tbody td {
  height: 44px;
  padding: 4px 5px;
}

body #invoice .invoice-line-table input,
body #invoice .invoice-line-table select {
  min-height: 28px !important;
  height: 28px;
  padding: 3px 5px !important;
  border-radius: 6px;
  font-size: 11px;
}

body #invoice .invoice-line-table .item-cell {
  gap: 2px;
}

body #invoice .invoice-line-table .item-cell input:first-child {
  font-weight: 800;
}

body #invoice .invoice-line-table .item-code-input {
  min-height: 18px !important;
  height: 18px;
  padding: 0 4px !important;
  border-color: transparent !important;
  color: var(--muted);
  background: transparent !important;
  font-size: 9px;
}

body #invoice .invoice-line-table .package-cell {
  position: relative;
  min-width: 150px;
}

body #invoice .invoice-line-table .package-cell > label {
  display: none;
}

body #invoice .invoice-line-table .package-preview {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 6px;
  padding: 4px 24px 4px 7px;
  color: var(--ink);
  background: var(--paper);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
}

body #invoice .invoice-line-table .package-preview::after {
  content: "⌄";
  position: absolute;
  right: 9px;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  font-size: 13px;
}

body #invoice .invoice-line-table tr.is-costing-open td {
  height: 82px;
  vertical-align: top;
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

body #invoice .invoice-line-table tr.is-costing-open .package-cell {
  display: grid;
  grid-template-columns: repeat(2, minmax(62px, 1fr));
  gap: 4px;
  min-width: 220px;
}

body #invoice .invoice-line-table tr.is-costing-open .package-cell > label {
  display: grid;
  gap: 2px;
  font-size: 8px;
}

body #invoice .invoice-line-table tr.is-costing-open .package-cell > label span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

body #invoice .invoice-line-table tr.is-costing-open .package-preview {
  grid-column: 1 / -1;
  order: -1;
}

body #invoice .invoice-line-table tr.is-costing-open .package-preview::after {
  content: "⌃";
}

body #invoice .status-cell {
  gap: 2px;
}

body #invoice .line-status-badge {
  min-height: 18px;
  padding: 3px 6px;
  font-size: 8px;
}

body #invoice .line-action-cell {
  min-width: 92px;
  white-space: nowrap;
}

body #invoice .line-action-cell .icon-button {
  width: 21px;
  min-width: 21px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 10px;
}

body #invoice .invoice-add-line-row td {
  height: 34px !important;
  padding: 3px 6px !important;
}

body #invoice .ghost-add-line-button {
  min-height: 26px;
  font-size: 10px;
}

@media (max-width: 1100px) {
  body #invoice .invoice-header-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body #invoice .invoice-review-workspace.has-reference {
    grid-template-columns: 1fr !important;
  }

  body #invoice .invoice-line-reference {
    order: 1;
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  body #invoice .intake-grid {
    border-radius: 12px;
  }

  body #invoice .intake-grid > .panel + .panel {
    border-top: 1px solid var(--ui-line, var(--line)) !important;
    border-left: 0 !important;
  }

  body #invoice .invoice-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #invoice .invoice-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #invoice .invoice-readiness-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #invoice .invoice-review-workspace {
    padding-inline: 6px;
  }
}

@media (max-width: 620px) {
  .price-focus-card {
    grid-template-columns: 1fr;
  }

  .price-focus-card .price-link {
    width: 100%;
  }

  .invoice-header-grid {
    grid-template-columns: 1fr;
  }

  .compact-money-field input,
  .invoice-header-grid input {
    width: 100%;
  }

  .invoice-review-summary {
    grid-template-columns: 1fr;
  }

  .costing-summary-strip {
    grid-template-columns: 1fr;
  }

  .invoice-review-bar {
    top: 0;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }

  .invoice-review-status,
  .line-toolbar {
    justify-content: stretch;
  }

  .invoice-review-status > *,
  .line-toolbar > * {
    width: 100%;
  }

  .invoice-save-button {
    min-width: 0;
  }

  .status-cell {
    justify-items: stretch;
  }

  .line-status-badge {
    width: 100%;
    justify-content: center;
  }
}

/* App organization pass */
:root {
  --content-max: 1500px;
  --row-hover: rgba(15, 143, 122, 0.055);
}


.main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

.topbar {
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.utility-bar {
  align-items: center;
}

.workbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.page-heading h1 {
  font-size: 22px;
}

.page-heading p:last-child {
  font-size: 13px;
  line-height: 1.25;
}

.month-card {
  min-width: 360px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.month-card .eyebrow,
.month-status {
  text-align: right;
}

.global-search {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.global-search input {
  min-height: 38px;
  border-color: transparent;
  background: var(--subtle);
}

.global-search button {
  min-height: 38px;
}

.view.is-visible {
  gap: 10px;
}

.panel,
.metric,
.dashboard-action,
.dashboard-details-panel,
.action-block,
.recipe-category,
.trend-stat,
.trend-category-card,
.percent-card,
.confidence-card,
.keg-deposit-summary article,
.liquor-tax-card {
  box-shadow: none;
}

.panel,
.dashboard-details-panel {
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
}

.panel-header {
  min-height: 48px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--raised) 74%, var(--paper));
}

.panel-header h2,
.dashboard-details-panel > summary h2 {
  font-size: 14px;
}

.hint,
.panel-note,
.status-line {
  line-height: 1.25;
}

.panel-actions {
  gap: 6px;
}

.primary-button,
.secondary-button,
.danger-button,
.tab {
  min-height: 34px;
}

.primary-button,
.secondary-button,
.danger-button {
  padding-inline: 11px;
}

.density-toggle.is-active {
  border-color: rgba(15, 143, 122, 0.28);
  color: var(--accent-dark);
  background: rgba(15, 143, 122, 0.09);
}

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

.metric {
  min-height: 70px;
  padding: 10px 12px;
}

.metric strong {
  font-size: clamp(20px, 2vw, 25px);
}

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

.dashboard-action {
  min-height: 62px;
  padding: 10px 12px;
}

.dashboard-action strong {
  font-size: 16px;
}

.action-center-grid,
.performance-grid,
.secondary-dashboard-grid,
.dashboard-grid,
.intake-grid,
.menu-workspace-grid,
.pl-input-layout {
  gap: 10px;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.panel > .table-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 8px 9px;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  background: color-mix(in srgb, var(--raised) 78%, var(--paper));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  background: var(--paper);
}

tbody tr:hover td {
  background: var(--row-hover);
}

.row-actions,
.line-action-cell {
  opacity: 0.72;
  transition: opacity 0.15s ease;
}

tr:hover .row-actions,
tr:focus-within .row-actions,
tr:hover .line-action-cell,
tr:focus-within .line-action-cell {
  opacity: 1;
}

.quick-invoice-input,
td input,
td select {
  min-height: 32px;
}

.form-grid,
.menu-form-grid,
.pl-field-grid,
.pl-input-group-wide .pl-field-grid {
  gap: 9px;
}

label {
  gap: 4px;
  font-size: 12px;
}

textarea {
  min-height: 72px;
}

.drop-zone {
  min-height: 64px;
  background: var(--subtle);
}

.preview {
  min-height: 170px;
  max-height: 360px;
  background: var(--subtle);
}

.invoice-workflow-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.invoice-workflow-strip article {
  opacity: 0.58;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
}

.invoice-workflow-strip article.is-active {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--paper) 82%, var(--accent) 18%);
}

.invoice-workflow-strip article.is-complete {
  opacity: 0.82;
}

#invoice[data-intake-stage="upload"] .invoice-review-panel,
#invoice[data-intake-stage="organize"] .invoice-review-panel,
#invoice[data-intake-stage="finish"] .invoice-review-panel {
  display: none;
}

#invoice[data-intake-stage="review"] .intake-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

#invoice[data-intake-stage="review"] .intake-grid > .panel:first-child,
#invoice[data-intake-stage="review"] .invoice-intake-preview-panel {
  display: none;
}

.drop-zone > span {
  display: grid;
  gap: 5px;
  text-align: center;
}

.drop-zone > span small {
  color: var(--muted);
  font-weight: 500;
}

.invoice-workflow-strip article {
  min-height: 56px;
  padding: 8px 10px;
}

.invoice-review-panel {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.invoice-header-grid {
  grid-template-columns: minmax(220px, 1.5fr) 140px minmax(155px, 0.9fr) 110px 96px 96px;
}

.invoice-review-bar {
  top: 0;
  min-height: 48px;
  padding: 8px 12px;
}

.invoice-review-summary {
  gap: 8px;
}

.invoice-review-summary-card {
  min-height: 74px;
  padding: 9px 10px;
}

.invoice-review-hero {
  min-height: 78px;
}

.invoice-review-table-wrap {
  max-height: min(76vh, 820px);
}

.invoice-line-table th,
.invoice-line-table td {
  padding: 7px 8px;
}

.invoice-line-table input,
.invoice-line-table select {
  min-height: 32px;
}

.ghost-add-line-button {
  min-height: 34px;
  color: var(--muted);
  background: color-mix(in srgb, var(--button) 68%, transparent);
}

.invoice-learning-panel,
.pl-input-group {
  padding: 10px;
}

.recipe-list {
  gap: 7px;
}

.recipe-card,
.menu-card {
  padding: 9px 10px;
}

.recipe-category summary {
  min-height: 38px;
  padding: 8px 10px;
}

.costing-summary-strip,
.price-overview-grid,
.trend-summary-grid,
.confidence-grid,
.percent-grid,
.liquor-tax-grid,
.keg-deposit-summary {
  gap: 8px;
}

.saved-invoice-tools {
  min-width: 0;
}

.status-footer {
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
}















html.dark-mode .global-search,
html.dark-mode .drop-zone,
html.dark-mode .preview,
html.dark-mode .table-wrap {
  border-color: var(--line);
  background: var(--paper);
}

html.dark-mode td {
  background: var(--paper);
}

html.dark-mode tbody tr:hover td {
  background: rgba(56, 185, 144, 0.08);
}

@media (max-width: 1180px) {
  .metrics-grid,
  .dashboard-actions,
  .attention-summary-grid,
  .invoice-workflow-strip,
  .price-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 980px) {

  .main {
    max-width: none;
  }

  .topbar {
    position: static;
  }

  .month-card {
    min-width: 0;
  }

  .month-card .eyebrow,
  .month-status {
    text-align: left;
  }

  .metrics-grid,
  .dashboard-actions,
  .attention-summary-grid,
  .invoice-workflow-strip,
  .invoice-header-grid {
    grid-template-columns: 1fr;
  }

  .invoice-review-table-wrap {
    max-height: none;
  }
}

@media (max-width: 620px) {

  .sidebar {
    overflow: hidden;
  }

  .tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }


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

  .utility-bar .secondary-button {
    min-width: 0;
    padding-inline: 8px;
  }

  .global-search {
    padding: 7px;
  }

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

  .metric {
    min-height: 72px;
  }

  .dashboard-action {
    min-height: 56px;
  }

  .panel-header {
    gap: 8px;
  }

  .panel,

  .panel-actions {
    width: 100%;
  }

  .panel-actions > * {
    flex: 1 1 auto;
  }

  .page-preview-header {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    margin-left: 0;
    margin-right: 0;
  }

  th,
  td {
    padding: 7px 8px;
  }

  .invoice-review-bar {
    position: sticky;
  }
}

/* Final layout normalization: keeps edited invoice rows aligned after feature additions. */
.invoice-review-panel {
  min-width: 0;
}

.invoice-review-workspace,
.invoice-review-table-wrap,
.table-wrap {
  min-width: 0;
}

.invoice-line-table {
  table-layout: fixed;
  min-width: 1240px;
}

.invoice-col-item { width: 270px; }
.invoice-col-qty { width: 84px; }
.invoice-col-unit { width: 96px; }
.invoice-col-price { width: 118px; }
.invoice-col-total { width: 112px; }
.invoice-col-costing { width: 360px; }
.invoice-col-category { width: 132px; }
.invoice-col-status { width: 150px; }
.invoice-col-actions { width: 126px; }

.invoice-line-table th,
.invoice-line-table td {
  vertical-align: top;
}

.invoice-line-table th {
  line-height: 1.2;
}

.invoice-line-table td {
  height: 1px;
}

.invoice-line-table input,
.invoice-line-table select,
.duplicate-file-list input,
.page-preview-header input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

.invoice-line-table .item-cell,
.status-cell,
.line-action-cell {
  min-width: 0;
}

.invoice-line-table .item-cell input,
.invoice-line-table .item-code-input,
.invoice-line-table .qty-cell input,
.invoice-line-table .unit-cell input,
.invoice-line-table .money-cell input,
.invoice-line-table .status-cell select,
.invoice-line-table td select {
  width: 100%;
  min-width: 0;
}

.invoice-line-table .item-cell {
  align-content: start;
}

.invoice-line-table .item-code-input {
  height: auto;
}

.package-cell {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  align-content: start;
}

.package-cell label,
.status-cell {
  min-width: 0;
}

.package-cell label span,
.package-preview,
.line-status-badge,
.line-action-cell[data-issue]:not([data-issue=""])::before {
  overflow-wrap: anywhere;
}

.line-action-cell {
  display: grid;
  grid-template-columns: repeat(3, 32px);
  justify-content: end;
  align-content: start;
  gap: 6px;
  min-width: 0;
  white-space: normal;
}

.line-action-cell[data-issue]:not([data-issue=""])::before {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
}

.line-action-cell .icon-button,
.source-button,
.not-shipped-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
}

.invoice-add-line-row td {
  position: static;
}

.duplicate-file-panel,
.page-preview,
.page-preview-header,
.verification-line-head,
.verification-simple-change {
  min-width: 0;
}

.page-preview-header {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
  align-items: start;
}

.page-preview-header strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.duplicate-file-list label {
  grid-template-columns: minmax(0, 1fr);
}

.verification-line-head {
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) minmax(92px, auto);
}

.verification-simple-change {
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 980px) {
  .invoice-review-workspace.has-reference {
    grid-template-columns: 1fr;
  }

  .invoice-line-reference {
    position: static;
    max-height: none;
  }
}

@media (max-width: 620px) {
  .invoice-line-table {
    min-width: 0;
  }

  .invoice-line-table colgroup {
    display: none;
  }

  .invoice-line-table tr {
    align-items: stretch;
  }

  .invoice-line-table td {
    min-height: 0;
  }

  .invoice-line-table td::before {
    align-self: center;
  }

  .package-cell,
  .line-action-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .line-action-cell .icon-button,
  .source-button,
  .not-shipped-button {
    width: 100%;
    min-width: 0;
  }

  .page-preview-header,
  .verification-line-head,
  .verification-simple-change {
    grid-template-columns: 1fr;
  }
}

/* Repair invoice row stacking: item name and item number must never overlap. */
.invoice-line-table {
  table-layout: auto;
  min-width: 1280px;
}

.invoice-col-item { width: 320px; }
.invoice-col-qty { width: 84px; }
.invoice-col-unit { width: 108px; }
.invoice-col-price { width: 118px; }
.invoice-col-total { width: 112px; }
.invoice-col-costing { width: 360px; }
.invoice-col-category { width: 132px; }
.invoice-col-status { width: 150px; }
.invoice-col-actions { width: 126px; }

.invoice-line-table td {
  height: auto;
}

.invoice-line-table .item-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 300px;
  min-height: 78px;
}

.invoice-line-table .item-cell input,
.invoice-line-table .item-code-input {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.invoice-line-table .item-cell input[data-field="item"] {
  min-height: 38px;
}

.invoice-line-table .item-code-input {
  min-height: 32px;
}

@media (max-width: 620px) {
  .invoice-line-table {
    min-width: 0;
  }

  .invoice-line-table .item-cell {
    min-width: 0;
    min-height: 0;
  }
}

/* Mobile repair pass: turn invoice tables into simple cards with no overlapping controls. */
@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .main,
  .panel,
  .table-wrap,
  .invoice-review-panel,
  .invoice-review-workspace,
  .invoice-review-table-wrap {
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .invoice-review-bar,
  .line-toolbar,
  .invoice-review-status,
  .panel-actions,
  .form-grid,
  .invoice-header-grid,
  .duplicate-file-panel,
  .duplicate-file-list,
  .page-preview-header,
  .verification-line-head,
  .verification-simple-change {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .invoice-review-bar {
    position: static !important;
  }

  .line-toolbar > *,
  .panel-actions > *,
  .invoice-header-grid label,
  .invoice-header-grid input,
  .duplicate-file-list label,
  .duplicate-file-list input,
  .page-preview-header label,
  .page-preview-header input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .invoice-line-table,
  .invoice-line-table thead,
  .invoice-line-table tbody,
  .invoice-line-table tfoot,
  .invoice-line-table tr,
  .invoice-line-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .invoice-line-table {
    table-layout: auto !important;
    border-spacing: 0 !important;
  }

  .invoice-line-table colgroup,
  .invoice-line-table thead {
    display: none !important;
  }

  .invoice-line-table tr {
    height: auto !important;
    margin: 0 0 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    padding: 10px !important;
    background: var(--paper) !important;
    box-shadow: var(--soft-shadow) !important;
  }

  .invoice-line-table td,
  .invoice-line-table th:first-child,
  .invoice-line-table td:first-child {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    height: auto !important;
    min-height: 0 !important;
    border-bottom: 0 !important;
    padding: 6px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .invoice-line-table td::before {
    display: block !important;
    margin: 0 0 5px !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .invoice-line-table .item-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .invoice-line-table input,
  .invoice-line-table select,
  .invoice-line-table textarea,
  .invoice-line-table .item-cell input,
  .invoice-line-table .item-code-input,
  .invoice-line-table .qty-cell input,
  .invoice-line-table .unit-cell input,
  .invoice-line-table .money-cell input,
  .invoice-line-table .status-cell select,
  .invoice-line-table td select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .invoice-line-table .item-code-input {
    min-height: 36px !important;
  }

  .package-cell,
  .status-cell,
  .line-action-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .package-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .package-preview {
    grid-column: 1 / -1 !important;
  }

  .line-action-cell {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-top: 8px !important;
    white-space: normal !important;
  }

  .line-action-cell[data-issue]:not([data-issue=""])::before {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .line-action-cell .icon-button,
  .source-button,
  .not-shipped-button,
  .remove-line-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
  }

  .invoice-add-line-row {
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .invoice-add-line-row td {
    padding: 0 !important;
  }

  .ghost-add-line-button {
    width: 100% !important;
  }

  .verification-simple-change strong,
  .verification-simple-change b,
  .page-preview-header strong,
  .duplicate-file-list span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .email-finder-controls,
  .email-connection-grid,
  .invoice-image-name-row,
  .email-candidate-card,
  .email-candidate-card dl {
    grid-template-columns: 1fr !important;
  }

  .email-finder-controls,
  .email-connection-grid,
  .email-finder-results {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 420px) {
  .package-cell,
  .line-action-cell {
    grid-template-columns: 1fr !important;
  }

  .metrics-grid,
  .utility-bar {
    grid-template-columns: 1fr !important;
  }
}

/* Deep mobile pass: phone-first layout overrides. Keep this block last so it wins over older responsive rules. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
    background: var(--body);
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  input,
  select,
  textarea {
    min-height: 44px;
  }

  .app-shell {
    display: block !important;
    min-width: 0;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    max-height: 178px;
    overflow: hidden;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-line);
    padding: 10px;
  }

  .brand {
    align-items: center;
    min-height: 0;
    padding-bottom: 8px;
  }

  .brand-mark {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .brand h1 {
    font-size: 14px;
  }

  .brand p,
  .nav-group p {
    display: none;
  }

  .tabs {
    display: flex !important;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nav-group {
    display: contents;
  }

  .tab {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 40px;
    padding: 0 12px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .tab.is-active {
    box-shadow: inset 0 -3px 0 var(--sidebar-active);
  }

  .tabs.simple-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 7px;
  }

  .simple-tabs .tab,
  .simple-tabs .nav-menu,
  .simple-tabs .nav-menu summary {
    width: 100%;
    min-width: 0;
  }

  .simple-tabs .tab {
    white-space: normal;
  }

  .simple-tabs .tab.is-active {
    box-shadow: inset 3px 0 0 var(--sidebar-active);
  }

  .nav-menu-panel {
    margin-top: 5px;
  }

  .nav-subtab {
    min-height: 36px;
    white-space: normal;
  }

  .main,

  .topbar,

  .utility-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .utility-bar button,
  .utility-bar .secondary-button,
  .month-controls button,
  .panel-actions button,
  .modal-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .workbar,
  .month-controls,
  .global-search,
  .panel-header,
  .saved-invoice-tools,
  .trend-controls,
  .panel-actions,
  .modal-actions,
  .row-actions,
  .needs-review-actions,
  .review-bulk-actions,
  .learning-conflict-options,
  .vendor-website-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .page-heading h1 {
    font-size: 22px;
    line-height: 1.15;
  }

  .page-heading p:last-child {
    max-width: none;
  }

  .month-card {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    border-radius: 10px !important;
  }

  .global-search {
    border-radius: 10px !important;
    padding: 8px;
  }

  .global-search button {
    width: 100%;
  }

  .view.is-visible {
    gap: 10px;
  }

  .metrics-grid,
  .dashboard-percent-grid,
  .percent-grid,
  .invoice-ops-grid,
  .attention-summary-grid,
  .dashboard-actions,
  .global-answer-grid,
  .costing-summary-strip,
  .liquor-tax-grid,
  .keg-deposit-summary,
  .trend-summary-grid,
  .trend-category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .dashboard-actions,
  .action-center-grid,
  .performance-grid,
  .secondary-dashboard-grid,
  .dashboard-grid,
  .global-result-card,
  .attention-summary-card,
  .review-bulk-bar,
  .needs-review-card,
  .return-credit-card,
  .ignored-issue-card,
  .invoice-audit-card,
  .learning-conflict-card,
  .intake-grid,
  .invoice-header-grid,
  .form-grid,
  .menu-form-grid,
  .menu-workspace-grid,
  .recipe-cost-grid,
  .ordering-note-grid,
  .settings-action-grid,
  .settings-placeholder-grid,
  .data-health-grid,
  .email-connection-grid,
  .email-finder-controls,
  .drive-upload-grid,
  .drive-tools,
  .drive-edit-grid,
  .pl-input-layout,
  .pl-field-grid,
  .price-graph-grid,
  .sheet-group-grid,
  .par-sheet-custom-form,
  .inline-add-form {
    grid-template-columns: 1fr !important;
  }

  .invoice-exception-fields,
  .invoice-exception-image-fields > div {
    grid-template-columns: 1fr !important;
  }

  .metric,
  .dashboard-action,
  .percent-card,
  .confidence-card,
  .attention-summary-card,
  .invoice-ops-card,
  .global-answer-card,
  .global-result-card,
  .trend-stat,
  .trend-category-card,
  .vendor-website-card,
  .vendor-sheet-card,
  .needs-review-card,
  .return-credit-card,
  .invoice-audit-card,
  .email-candidate-card,
  .drive-file-card,
  .settings-action-grid article,
  .settings-placeholder-grid article,
  .data-health-grid article {
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .metric,
  .dashboard-action,
  .attention-summary-card,
  .percent-card,
  .confidence-card,
  .invoice-ops-card {
    min-height: 70px;
    padding: 10px;
  }

  .metric strong,
  .dashboard-action strong,
  .percent-card strong,
  .confidence-card strong,
  .invoice-ops-card strong,
  .attention-summary-card strong {
    font-size: 20px;
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .attention-summary-card strong {
    grid-row: auto;
    min-width: 0;
  }

  .invoice-ops-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .panel,

  .panel-header {
    min-height: 0;
    padding: 12px;
  }

  .panel-header > *,
  .panel-header button,
  .panel-header select,
  .panel-header input {
    min-width: 0;
    max-width: 100%;
  }

  .panel > :not(.panel-header),

  .panel > .table-wrap,
  .panel > .invoice-review-table-wrap,
  .panel > .pl-table,
  .panel > .bars,
  .panel > .recipe-list,
  .panel > .invoice-review-workspace,
  .panel > .invoice-review-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .table-wrap,
  .pl-table {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  table:not(.invoice-line-table),
  .history-table,
  .price-history-table,
  .vendor-price-table,
  .vendor-pricing-table {
    min-width: 720px;
  }

  .invoice-review-workspace,
  .invoice-review-workspace.has-reference,
  .invoice-review-panel,
  .invoice-review-table-wrap,
  .invoice-learning-panel,
  .invoice-review-bar {
    width: 100%;
    min-width: 0;
  }

  .invoice-review-workspace,
  .invoice-review-workspace.has-reference {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .invoice-line-reference {
    position: static;
    width: 100%;
    max-height: 62vh;
    min-width: 0;
  }

  .invoice-review-table-wrap {
    border: 0;
    overflow: visible !important;
    background: transparent;
  }

  .invoice-line-table,
  .invoice-line-table thead,
  .invoice-line-table tbody,
  .invoice-line-table tfoot,
  .invoice-line-table tr,
  .invoice-line-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .invoice-line-table {
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  .invoice-line-table colgroup,
  .invoice-line-table thead {
    display: none !important;
  }

  .invoice-line-table tbody {
    display: grid !important;
    gap: 10px;
  }

  .invoice-line-table tr {
    border: 1px solid var(--line);
    border-left: 4px solid color-mix(in srgb, var(--accent) 44%, var(--line));
    border-radius: 10px;
    padding: 10px;
    background: var(--paper);
    box-shadow: var(--soft-shadow);
  }

  .invoice-line-table td,
  .invoice-line-table th:first-child,
  .invoice-line-table td:first-child {
    position: relative !important;
    left: auto !important;
    z-index: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .invoice-line-table td {
    display: grid !important;
    grid-template-columns: minmax(86px, 0.34fr) minmax(0, 0.66fr);
    gap: 8px;
    align-items: center;
    min-height: 0;
    padding: 7px 0 !important;
  }

  .invoice-line-table td::before {
    position: static !important;
    width: auto !important;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .invoice-line-table td:nth-child(1)::before { content: "Item"; }
  .invoice-line-table td:nth-child(2)::before { content: "Qty"; }
  .invoice-line-table td:nth-child(3)::before { content: "Unit"; }
  .invoice-line-table td:nth-child(4)::before { content: "Unit Price"; }
  .invoice-line-table td:nth-child(5)::before { content: "Total"; }
  .invoice-line-table td:nth-child(6)::before { content: "Costing"; }
  .invoice-line-table td:nth-child(7)::before { content: "Category"; }
  .invoice-line-table td:nth-child(8)::before { content: "Status"; }
  .invoice-line-table td:nth-child(9)::before { content: "Actions"; }

  .invoice-line-table .item-cell {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 7px;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .invoice-line-table input,
  .invoice-line-table select,
  .invoice-line-table textarea,
  .invoice-line-table .item-cell input,
  .invoice-line-table .item-code-input,
  .invoice-line-table .qty-cell input,
  .invoice-line-table .unit-cell input,
  .invoice-line-table .money-cell input,
  .invoice-line-table .status-cell select,
  .invoice-line-table td select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .package-cell,
  .line-action-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .line-action-cell {
    justify-content: stretch;
  }

  .line-action-cell .icon-button,
  .source-button,
  .not-shipped-button {
    width: 100%;
    min-width: 0;
  }

  .invoice-add-line-row tr,
  .invoice-add-line-row td {
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .invoice-review-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border-radius: 10px 10px 0 0;
    padding: 10px;
  }

  .invoice-review-status,
  .line-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
  }

  .line-toolbar button {
    width: 100%;
  }

  .global-result-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
  }

  .modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
    border-radius: 12px;
    padding: 12px;
  }

  .invoice-preview-modal {
    max-height: calc(100vh - 20px);
  }

  .invoice-preview-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .invoice-preview-toolbar button {
    width: 100%;
  }

  .invoice-preview-toolbar strong {
    text-align: center;
  }

  .invoice-preview-stage {
    max-height: 68vh;
  }
}

@media (max-width: 430px) {
  .utility-bar,
  .metrics-grid,
  .dashboard-percent-grid,
  .percent-grid,
  .invoice-ops-grid,
  .attention-summary-grid,
  .global-answer-grid,
  .costing-summary-strip,
  .liquor-tax-grid,
  .keg-deposit-summary {
    grid-template-columns: 1fr !important;
  }

  .main,

  .topbar,

  .panel-header,
  .metric,
  .dashboard-action,
  .attention-summary-card,
  .percent-card,
  .confidence-card,
  .invoice-ops-card,
  .trend-stat,
  .trend-category-card {
    padding: 10px;
  }

  .invoice-line-table td {
    grid-template-columns: 1fr;
  }

  .invoice-line-table td::before {
    margin-bottom: -2px;
  }
}

@media (max-width: 760px) {
  .global-invoice-card {
    grid-template-columns: 1fr !important;
  }

  .global-invoice-card .global-result-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .learning-conflict-panel,
  .learning-search-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .learning-conflict-options button {
    width: 100%;
  }

  .invoice-review-table-wrap {
    border: 0;
    background: transparent;
  }

  .invoice-line-table tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--paper);
    box-shadow: none;
  }

  .invoice-line-table td {
    display: grid !important;
    grid-template-columns: minmax(82px, 0.34fr) minmax(0, 0.66fr);
    gap: 8px;
    align-items: center;
    border: 0 !important;
    padding: 7px 0 !important;
    min-width: 0;
  }

  .invoice-line-table td::before {
    position: static !important;
    width: auto !important;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .invoice-line-table .item-cell {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .invoice-line-table input,
  .invoice-line-table select,
  .invoice-line-table textarea,
  .invoice-line-table .item-cell input,
  .invoice-line-table .item-code-input,
  .invoice-line-table .qty-cell input,
  .invoice-line-table .unit-cell input,
  .invoice-line-table .money-cell input,
  .invoice-line-table .status-cell select,
  .invoice-line-table td select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .line-action-cell {
    min-width: 0;
  }
}

/* Final polish pass: keep learning/review surfaces calm and aligned. */
.invoice-learning-panel {
  overflow: hidden;
}

.invoice-learning-summary > div:first-child,
.verification-line-head span,
.invoice-learning-list p {
  min-width: 0;
}

.invoice-learning-list li {
  box-shadow: 0 1px 0 rgba(24, 42, 35, 0.04);
}

.verification-line-head em {
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--raised);
  font-size: 0.74rem;
  white-space: nowrap;
}

.verification-simple-change strong,
.verification-simple-change b {
  min-height: 33px;
}

.email-connection-grid input,
.email-finder-controls input {
  width: 100%;
}

@media (max-width: 760px) {
  .invoice-readiness-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .invoice-learning-summary,
  .verification-line-head,
  .verification-simple-change {
    grid-template-columns: 1fr !important;
  }

  .invoice-learning-chips {
    justify-content: flex-start !important;
  }

  .verification-line-head em {
    justify-self: start !important;
  }

  .verification-simple-change strong,
  .verification-simple-change b {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 420px) {
  .invoice-readiness-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile refinement pass: prevent cramped cards, clipped controls, and overlapping review rows. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: var(--body);
  }

  .app-shell {
    display: block;
    width: 100%;
  }

  .sidebar {
    position: relative;
    height: auto;
    overflow: hidden;
    gap: 12px;
    padding: 12px;
  }

  .brand {
    min-height: auto;
    padding-bottom: 10px;
  }

  .tabs {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nav-group {
    display: contents;
  }

  .nav-group p {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    min-width: max-content;
    padding: 0 12px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .tab.is-active {
    box-shadow: inset 0 -3px 0 var(--sidebar-active);
  }

  .main,

  .topbar,

  .utility-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .utility-bar .secondary-button,
  .utility-bar button {
    min-width: 0;
    width: 100%;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .workbar,
  .global-search,
  .global-answer-grid,
  .global-result-card,
  .metrics-grid,
  .dashboard-feed-grid,
  .dashboard-actions,
  .attention-summary-grid,
  .dashboard-percent-grid,
  .percent-grid,
  .confidence-grid,
  .trend-summary-grid,
  .trend-category-grid,
  .performance-grid,
  .secondary-dashboard-grid,
  .dashboard-grid,
  .action-center-grid,
  .vendor-pricing-grid,
  .vendor-price-decision-grid,
  .vendor-source-columns,
  .vendor-price-summary-grid,
  .vendor-price-form,
  .learning-conflict-card,
  .vendor-website-search,
  .intake-grid,
  .invoice-header-grid,
  .form-grid,
  .menu-form-grid,
  .menu-workspace-grid,
  .recipe-cost-grid,
  .ordering-note-grid,
  .settings-action-grid,
  .settings-placeholder-grid,
  .data-health-grid,
  .invoice-audit-card,
  .email-connection-grid,
  .email-finder-controls,
  .pl-input-layout,
  .pl-field-grid,
  .liquor-tax-grid,
  .keg-deposit-summary,
  .price-graph-grid,
  .sheet-group-grid,
  .par-sheet-custom-form,
  .inline-add-form {
    grid-template-columns: 1fr !important;
  }

  .global-search {
    border-radius: 10px !important;
  }

  .global-search button,
  .month-controls button,
  .saved-invoice-tools button,
  .panel-actions button,
  .modal-actions button {
    width: 100%;
  }

  .month-card {
    width: 100%;
    justify-self: stretch;
    border-radius: 10px !important;
  }

  .month-controls,
  .saved-invoice-tools,
  .trend-controls,
  .panel-actions,
  .modal-actions,
  .row-actions,
  .needs-review-actions,
  .review-bulk-actions,
  .learning-conflict-options,
  .vendor-website-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    gap: 8px;
    justify-content: stretch;
  }

  .page-heading h1 {
    font-size: 22px;
    line-height: 1.15;
  }

  .page-heading p:last-child {
    max-width: none;
  }

  .panel,

  .panel-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }

  .panel-header > *,
  .panel-header button,
  .panel-header select,
  .panel-header input {
    min-width: 0;
    max-width: 100%;
  }

  .panel > :not(.panel-header),

  .panel > .table-wrap,
  .panel > .invoice-review-table-wrap,
  .panel > .pl-table,
  .panel > .bars,
  .panel > .recipe-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .metric,
  .dashboard-action,
  .attention-summary-card,
  .percent-card,
  .confidence-card,
  .trend-stat,
  .trend-category-card,
  .global-answer-card,
  .global-result-card,
  .price-focus-card,
  .vendor-website-card,
  .vendor-sheet-card,
  .needs-review-card,
  .return-credit-card,
  .invoice-audit-card,
  .email-candidate-card,
  .settings-action-grid article,
  .settings-placeholder-grid article,
  .data-health-grid article {
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .attention-summary-card,
  .review-bulk-bar,
  .global-result-card,
  .vendor-website-results-header,
  .vendor-website-result-card,
  .vendor-extension-install,
  .vendor-capture-panel,
  .vendor-capture-review-header,
  .needs-review-card,
  .return-credit-card,
  .ignored-issue-card,
  .email-candidate-card,
  .vendor-website-card {
    grid-template-columns: 1fr !important;
  }

  .drive-file-actions {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }

  .attention-summary-card strong {
    grid-row: auto;
    min-width: 0;
    text-align: left;
  }

  .vendor-capture-price-row {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  .vendor-capture-price-row > span {
    display: none;
  }

  .metric strong,
  .dashboard-action strong,
  .percent-card strong,
  .confidence-card strong {
    overflow-wrap: anywhere;
  }

  .table-wrap,
  .invoice-review-table-wrap,
  .pl-table {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .history-table,
  .price-history-table,
  .vendor-price-table,
  .vendor-pricing-table {
    min-width: 720px;
  }

  .invoice-line-table {
    min-width: 1120px;
  }

  .invoice-line-table,
  .invoice-line-table thead,
  .invoice-line-table tbody,
  .invoice-line-table tfoot,
  .invoice-line-table tr,
  .invoice-line-table td {
    display: revert !important;
  }

  th,
  td {
    white-space: normal;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  .invoice-review-workspace,
  .invoice-review-panel,
  .invoice-learning-panel,
  .invoice-review-bar {
    min-width: 0;
    width: 100%;
  }

  .invoice-review-bar {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 10px 10px 0 0;
    padding: 10px;
  }

  .invoice-reference-split {
    grid-template-columns: 1fr !important;
  }

  .invoice-reference-panel {
    max-height: 62vh;
  }

  .invoice-workflow-strip {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .utility-bar,
  .metrics-grid,
  .dashboard-feed-grid,
  .keg-deposit-summary {
    grid-template-columns: 1fr !important;
  }

  .main,

  .topbar,

  .panel-header,
  .metric,
  .dashboard-action,
  .attention-summary-card,
  .percent-card,
  .confidence-card,
  .trend-stat,
  .trend-category-card {
    padding: 10px;
  }

  .panel > :not(.panel-header),
}

/* File Finder */
.drive-finder-panel {
  overflow: hidden;
  padding: 0;
}

.drive-finder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 84%, var(--paper));
}

.drive-finder-toolbar h2,
.drive-finder-toolbar p {
  margin: 0;
}

.drive-finder-toolbar .drive-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px;
  gap: 6px;
  width: min(480px, 100%);
}

.drive-file-toolbar {
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.drive-file-toolbar .compact-button,
.drive-file-toolbar select {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
}

.drive-finder-shell {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) 252px;
  min-height: 500px;
}

.drive-finder-sidebar {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 72%, var(--paper));
  overflow: auto;
}

.drive-folder-stats {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.drive-folder-stats button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 8px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.drive-folder-stats button:hover,
.drive-folder-stats button.is-active {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

.drive-folder-stats button.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.drive-folder-stats span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.drive-folder-stats strong {
  color: var(--accent-dark);
  font-size: 11px;
}

.drive-folder-stats small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.drive-finder-browser {
  min-width: 0;
  overflow: auto;
  background: var(--paper);
}

.drive-file-header,
.drive-file-card.drive-file-row {
  display: grid;
  grid-template-columns: 22px 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.drive-file-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--raised) 88%, var(--paper));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.drive-file-list {
  display: grid;
  gap: 0;
  min-height: 410px;
  border: 1px dashed transparent;
  border-radius: 0;
  padding: 0;
}

.drive-file-list.is-drag-over {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.drive-file-card.drive-file-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 30px;
  padding: 3px 10px;
  background: transparent;
  box-shadow: none;
  cursor: default;
  user-select: none;
}

.drive-file-card.drive-file-row:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}

.drive-file-card.drive-file-row.is-selected {
  border-color: var(--line);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  box-shadow: inset 2px 0 0 var(--accent);
}

.drive-file-card.drive-file-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: -3px;
}

.drive-file-check {
  display: grid;
  place-items: center;
  padding: 0;
}

.drive-file-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.drive-file-check span {
  width: 13px;
  height: 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}

.drive-file-check input:checked + span {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, transparent 48%, var(--accent) 49% 60%, transparent 61%),
    linear-gradient(45deg, transparent 44%, var(--accent) 45% 58%, transparent 59%);
}

.drive-file-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  font-size: 7.5px;
  font-weight: 950;
}

.drive-file-main {
  min-width: 0;
}

.drive-file-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-file-main strong {
  display: block;
  font-size: 12.5px;
  font-weight: 850;
}

.drive-inspector {
  min-width: 0;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 72%, var(--paper));
  overflow: auto;
}

.drive-inspector-empty {
  margin: 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
}

.drive-inspector-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.drive-inspector-card label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.drive-inspector-preview {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.drive-inspector-preview img {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.drive-inspector-icon {
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  font-size: 18px;
  font-weight: 950;
}

.drive-inspector-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.drive-inspector-facts div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px;
  background: var(--paper);
}

.drive-inspector-facts span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.drive-inspector-facts strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.drive-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.drive-inspector-actions a,
.drive-inspector-actions button {
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
}

.user-admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
}

.user-account-form,
.user-account-list {
  min-width: 0;
}

.user-account-directory {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.user-account-directory > label {
  margin: 0;
}

.global-user-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 7px;
}

.global-user-facts small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.user-account-form {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--raised) 72%, var(--paper));
}

.user-account-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.user-account-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.user-account-card,
.user-account-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
}

.user-account-card.is-inactive {
  opacity: 0.68;
}

.user-account-card strong {
  display: block;
  font-weight: 900;
}

.user-account-card span,
.user-account-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.user-account-empty.is-warning {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--paper));
}

.user-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 1120px) {
  .drive-finder-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .drive-inspector {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .user-admin-layout {
    grid-template-columns: 1fr;
  }

  .user-account-card,
  .user-account-empty {
    align-items: stretch;
    flex-direction: column;
  }

  .user-account-actions {
    justify-content: stretch;
  }

  .user-account-actions button {
    flex: 1;
  }

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

  .drive-finder-toolbar .drive-tools {
    grid-template-columns: 1fr;
  }

  .drive-finder-shell {
    grid-template-columns: 1fr;
  }

  .drive-finder-sidebar {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .drive-finder-browser {
    max-width: 100%;
  }

  .drive-inspector {
    border-left: 0;
  }
}

/* Larder Staff workspace */
#staff.view.is-visible {
  padding: 0;
}

.staff-pocket-shell {
  width: 100%;
}

.staff-pocket-phone {
  display: grid;
  gap: 16px;
  width: 100%;
  color: var(--ink);
}

.staff-pocket-status,
.staff-pocket-header,
.staff-pocket-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.staff-pocket-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.staff-pocket-header,
.staff-pocket-tonight,
.staff-pocket-window {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: var(--shadow);
}

.staff-pocket-header {
  padding: 18px;
}

.staff-pocket-header h2 {
  margin: 2px 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  letter-spacing: 0;
}

.staff-pocket-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.staff-pocket-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--accent-dark);
  font-size: 18px;
  font-weight: 950;
  flex: 0 0 auto;
}

.staff-pocket-avatar.staff-brand-avatar { padding: 5px; overflow: hidden; }
.staff-pocket-avatar.staff-brand-avatar img { width: 100%; height: 100%; object-fit: contain; }

.staff-pocket-tonight {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.staff-pocket-tonight span,
.staff-pocket-card-grid article span,
.staff-pocket-mini strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-pocket-tonight strong {
  color: var(--ink);
  font-size: 1rem;
}

.staff-app-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.staff-app-tile {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 7px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
  background: var(--raised);
  box-shadow: var(--shadow);
  text-align: left;
}

.staff-app-tile:hover,
.staff-app-tile[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--raised));
}

.staff-app-icon {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 32px;
  border-radius: 10px;
  padding: 0 8px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.staff-app-tile strong,
.staff-app-tile small {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-app-tile strong {
  font-size: 13px;
}

.staff-app-tile small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.staff-window-stack {
  display: grid;
  gap: 14px;
}

.staff-pocket-window {
  overflow: hidden;
}

.staff-pocket-window-bar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 76%, var(--paper));
}

.staff-pocket-window-bar > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  min-width: 0;
}

.staff-pocket-window-bar > div span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  border-radius: 9px;
  padding: 0 7px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 950;
}

.staff-pocket-window-bar strong,
.staff-pocket-window-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-pocket-window-bar small {
  color: var(--muted);
  font-weight: 800;
}

.staff-pocket-window-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.staff-pocket-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.staff-pocket-card-grid article,
.staff-pocket-mini,
.staff-menu-detail,
.staff-timeoff-form {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
}

.staff-pocket-card-grid article strong {
  font-size: 18px;
}

.staff-pocket-card-grid article small,
.staff-pocket-mini span,
.staff-pocket-list small,
.staff-menu-detail small,
.staff-menu-detail p {
  color: var(--muted);
  font-weight: 750;
}

.staff-pocket-list {
  display: grid;
  gap: 8px;
}

.staff-pocket-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--paper);
}

.staff-pocket-list article.is-mine {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

.staff-pocket-list article.is-mine strong {
  color: var(--accent-dark);
}

.staff-pocket-list article div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.staff-pocket-list article > span {
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
}

.staff-pocket-search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-menu-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.staff-menu-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.staff-menu-list button {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}

.staff-menu-list button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent);
}

.staff-menu-list small {
  color: var(--muted);
}

.staff-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-pill-row span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--accent-dark);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.staff-menu-detail h3 {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-menu-detail ul {
  margin: 0;
  padding-left: 18px;
}

.staff-request-actions,
.staff-timeoff-form {
  display: grid;
  gap: 8px;
}

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

.staff-timeoff-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-field-wide {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .staff-app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .staff-menu-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  #staff.view.is-visible {
    padding: 0;
  }

  .staff-pocket-phone {
    gap: 12px;
  }

  .staff-pocket-status,
  .staff-pocket-header,
  .staff-pocket-window-bar {
    align-items: flex-start;
  }

  .staff-pocket-header {
    padding: 14px;
  }

  .staff-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .staff-app-tile {
    min-height: 86px;
    padding: 10px;
  }

  .staff-pocket-card-grid,
  .staff-timeoff-form,
  .staff-pocket-list article {
    grid-template-columns: 1fr;
  }
}

/* Search Engine command pane: keep universal search findable without occupying the dashboard. */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.aimici-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--paper) 88%, var(--accent) 12%);
  padding: 0;
}

.aimici-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aimici-toggle[aria-expanded="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 24px rgba(15, 143, 122, 0.22);
}

.global-search[hidden] {
  display: none !important;
}

.global-search-command {
  grid-template-columns: minmax(280px, 1fr) minmax(142px, 0.28fr) minmax(142px, 0.28fr) auto auto auto;
  align-items: end;
  margin-top: 12px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

.global-search-command label {
  min-width: 0;
}

.global-search-command .compact-button {
  min-height: 42px;
}

@media (max-width: 760px) {
  .page-title-row {
    justify-content: space-between;
  }

  .global-search-command {
    grid-template-columns: 1fr;
  }

  .global-search-date-note {
    grid-column: 1;
  }

  .global-search-command button {
    width: 100%;
  }
}

/* Larder unified product finish: one visual system across every workspace. */
:root {
  --larder-radius: 14px;
  --larder-radius-sm: 10px;
  --larder-hairline: color-mix(in srgb, var(--line) 78%, transparent);
  --larder-shell: linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, var(--wash)), var(--paper));
}

body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--body) 76%, #ffffff) 0, var(--body) 270px),
    var(--body);
}

html.dark-mode body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--body) 72%, #1d2924) 0, var(--body) 260px),
    var(--body);
}

.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 84%, #25342f), var(--sidebar)),
    var(--sidebar);
}

.brand-mark {
  border-radius: var(--larder-radius-sm);
}

.tab,
.nav-menu summary {
  border: 1px solid transparent;
  border-radius: var(--larder-radius-sm);
}

.tab:hover,
.nav-menu summary:hover,
.nav-subtab:hover {
  color: var(--sidebar-ink);
  background: color-mix(in srgb, var(--sidebar-active) 10%, transparent);
}

.tab.is-active,
.nav-menu.is-active summary {
  border-color: color-mix(in srgb, var(--sidebar-active) 34%, transparent);
  background: color-mix(in srgb, var(--sidebar-active) 15%, transparent);
  box-shadow: inset 3px 0 0 var(--sidebar-active);
}

.topbar,
.month-card,
.global-search,
.global-search-panel,
.panel,
.metric,
.dashboard-details-panel,
.dashboard-action,
.staff-card,
.staff-admin-section,
.staff-admin-form,
.staff-admin-preview,
.drive-finder-panel,
.drive-preview-panel {
  border: 1px solid var(--larder-hairline);
  border-radius: var(--larder-radius);
  background: var(--larder-shell);
  box-shadow: var(--soft-shadow);
}

.topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, var(--raised)), var(--paper));
}

.panel-header,
.compact-panel-header,
.dashboard-details-panel > summary,
.drive-finder-toolbar,
.drive-browser-toolbar,
.drive-inspector-header,
.staff-card-header {
  border-bottom: 1px solid var(--larder-hairline);
  background: color-mix(in srgb, var(--raised) 58%, var(--paper));
}

.panel-header h2,
.compact-panel-header h2,
.pl-group-heading h3,
.staff-card-header h2 {
  letter-spacing: -0.01em;
}

.hint,
.status-line,
.cell-note,
.month-status,
.panel-note {
  color: var(--muted);
}

.primary-button,
.secondary-button,
.danger-button,
.compact-button,
.icon-button,
.table-sort-button,
.review-filter-button,
.invoice-direction-card,
.ordering-space-tab,
.workspace-tab,
.drive-folder-row,
.staff-app-tile {
  border-radius: var(--larder-radius-sm);
  box-shadow: none;
}

.primary-button {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
}

.secondary-button,
.compact-button,
.icon-button,
.table-sort-button,
.review-filter-button {
  background: color-mix(in srgb, var(--button) 82%, var(--paper));
}

.invoice-direction-switch,
.ordering-space-tabs,
.workspace-strip {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--larder-hairline);
  border-radius: var(--larder-radius);
  background: color-mix(in srgb, var(--raised) 68%, var(--paper));
}

.invoice-direction-card,
.ordering-space-tab,
.workspace-tab {
  flex: 1 0 178px;
  min-width: 0;
  border: 1px solid transparent;
  background: var(--paper);
}

.invoice-direction-card.is-active,
.ordering-space-tab.is-active,
.workspace-tab.active {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

html.dark-mode .invoice-direction-card.is-active,
html.dark-mode .ordering-space-tab.is-active,
html.dark-mode .workspace-tab.active {
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
}

.invoice-review-panel,
.ordering-command-panel,
.ordering-space-panel,
.menu-workspace-grid > .panel,
#recipes > .panel,
#menus .panel,
#plInputs > .panel,
#settings > .panel,
#drive > .panel,
#vendors > .panel,
#items > .panel,
#vendorPricing > .panel,
#inventory > .panel,
#schedule > .panel {
  border-radius: var(--larder-radius);
}

.invoice-review-workspace,
.menu-workspace-grid,
.pl-input-layout,
.user-admin-layout,
.drive-finder-shell,
.staff-admin-grid,
.staff-admin-manager-grid {
  gap: 12px;
}

.pl-input-group,
.learning-conflict-panel,
.duplicate-file-panel,
.invoice-learning-panel,
.invoice-reference-panel,
.order-guide-review,
.staff-manager-summary article,
.staff-file-list article,
.staff-file-link-list article,
.drive-inspector-section {
  border: 1px solid var(--larder-hairline);
  border-radius: var(--larder-radius-sm);
  background: color-mix(in srgb, var(--paper) 88%, var(--wash));
}

input,
select,
textarea,
.quick-invoice-input {
  border-color: var(--larder-hairline);
  background: var(--field);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.tab:focus-visible,
.nav-menu summary:focus-visible,
.drive-file-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.table-wrap,
.invoice-review-table-wrap,
.pl-table,
.schedule-table-wrap,
.drive-preview-table-wrap {
  border: 1px solid var(--larder-hairline);
  border-radius: var(--larder-radius-sm);
  background: var(--paper);
}

th {
  color: color-mix(in srgb, var(--muted) 92%, var(--ink));
  background: color-mix(in srgb, var(--raised) 72%, var(--paper));
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}

.metric {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 98%, var(--raised)), var(--paper));
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--gold) 72%, var(--accent)));
  opacity: 0.72;
}

.drive-finder-shell {
  grid-template-columns: 210px minmax(0, 1fr) 270px;
}

.drive-file-card.drive-file-row,
.drive-file-card {
  min-height: 34px;
  padding: 6px 8px;
}

.drive-file-card.drive-file-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.drive-file-icon {
  width: 26px;
  min-width: 26px;
  height: 26px;
}

.staff-pocket-phone,
.staff-pocket-window,
.staff-app-tile {
  border-radius: var(--larder-radius);
}

@media (max-width: 1000px) {
  .drive-finder-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .drive-inspector {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .topbar,
  .global-search,
  .global-search-panel,
  .panel,
  .metric,
  .month-card,
  .drive-finder-panel {
    border-radius: 12px !important;
  }

  .invoice-direction-switch,
  .ordering-space-tabs,
  .workspace-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    overflow-x: auto;
  }

  .invoice-direction-card,
  .ordering-space-tab,
  .workspace-tab {
    flex: 0 0 164px;
  }

  .drive-finder-shell {
    grid-template-columns: 1fr;
  }

  .drive-file-card.drive-file-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }
}

/* Larder command redesign: final top-nav product shell. */
:root {
  --command-max: 1600px;
  --command-pad: clamp(14px, 1.65vw, 26px);
  --command-radius: 12px;
  --command-radius-sm: 10px;
  --command-panel: color-mix(in srgb, var(--paper) 94%, var(--body));
}

.app-shell {
  display: block !important;
  min-height: 100vh;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--body) 82%, #ffffff) 0, var(--body) 300px),
    var(--body);
}

html.dark-mode .app-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--body) 74%, #1f2b27) 0, var(--body) 300px),
    var(--body);
}

.sidebar {
  position: sticky !important;
  top: 0;
  z-index: 80;
  display: grid !important;
  grid-template-columns: minmax(158px, 0.8fr) minmax(0, 2.2fr) auto;
  align-items: center;
  gap: 10px;
  width: min(100%, var(--command-max));
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  margin: 0 auto;
  border: 0 !important;
  border-bottom: 1px solid var(--larder-hairline) !important;
  padding: 9px var(--command-pad) !important;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, var(--body)) !important;
  box-shadow: 0 3px 12px rgba(16, 24, 20, 0.045);
  overflow: visible !important;
}

html.dark-mode .sidebar {
  background: color-mix(in srgb, var(--paper) 90%, var(--body)) !important;
}

.brand {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0 !important;
  padding: 0 !important;
}

.brand-mark {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border-color: var(--larder-hairline);
  border-radius: 9px !important;
  background: var(--paper);
}

.brand h1 {
  color: var(--ink) !important;
  font-size: 16px !important;
  letter-spacing: -0.02em;
}

.brand p {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 800;
}

.tabs.simple-tabs,
.tabs {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--larder-hairline);
  border-radius: var(--command-radius-sm);
  padding: 4px !important;
  background: var(--paper);
  scrollbar-width: none;
}

@media (min-width: 1181px) {
  .tabs.simple-tabs,
  .tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab,
.nav-menu summary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: max-content !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: var(--command-radius-sm) !important;
  padding: 0 12px !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  white-space: nowrap;
}

.tab:hover,
.nav-menu summary:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--paper)) !important;
}

.tab.is-active,
.nav-menu.is-active summary {
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
}

.nav-menu {
  display: block;
  position: relative;
  min-width: max-content;
}

.nav-menu summary::after {
  content: "";
  display: none;
}

.sidebar .nav-menu-panel,
.nav-menu-panel {
  position: absolute !important;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  display: grid;
  width: max-content;
  min-width: 190px;
  margin: 0 !important;
  border: 1px solid var(--larder-hairline) !important;
  border-radius: 10px !important;
  padding: 7px !important;
  background: var(--paper) !important;
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12) !important;
}

.sidebar .nav-menu:not([open]) .nav-menu-panel {
  display: none !important;
}

@media (min-width: 761px) {
  .sidebar .nav-menu.is-active .nav-menu-panel {
    display: none !important;
  }

  .sidebar .nav-menu[open]:hover .nav-menu-panel,
  .sidebar .nav-menu[open]:focus-within .nav-menu-panel {
    display: grid !important;
  }
}

.nav-subtab {
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 11px !important;
}

.shell-actions {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  border-radius: var(--command-radius-sm);
  background: color-mix(in srgb, var(--paper) 88%, var(--body));
}

.shell-actions .secondary-button,
.shell-actions .primary-button,
.shell-actions .tab {
  width: auto !important;
  min-width: max-content !important;
  min-height: 36px !important;
  border-radius: var(--command-radius-sm) !important;
  padding: 0 13px !important;
}

.shell-actions .shell-new-invoice {
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
}

.main {
  width: min(100%, var(--command-max));
  margin: 0 auto;
  padding: 12px var(--command-pad) 32px !important;
}

.topbar {
  position: static !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--larder-hairline) !important;
  border-radius: var(--command-radius) !important;
  padding: 16px !important;
  background: color-mix(in srgb, var(--paper) 90%, var(--body)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.workbar {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  gap: 12px !important;
}

.page-heading h1 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.page-title-row {
  display: block !important;
}

.month-card {
  align-self: stretch;
  border-radius: 10px !important;
  background: var(--paper) !important;
}

.global-search-command {
  max-width: none !important;
  margin: 10px 0 0 !important;
  border-radius: 10px !important;
  background: var(--paper) !important;
}

#dashboard.view.is-visible {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
  gap: 12px;
  align-items: start;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#dashboard.view.is-visible > * {
  order: 10;
}

#dashboard .dashboard-workspace-strip,
#dashboard > .metrics-grid,
#dashboard > .dashboard-pl-feed-panel,
#dashboard > .action-center-panel {
  grid-column: 1;
}

#dashboard > .dashboard-percent-panel,
#dashboard > .dashboard-visual-grid,
#dashboard > .dashboard-actions,
#dashboard > .invoice-ops-panel {
  grid-column: 2;
}

#dashboard > .dashboard-workspace-strip {
  display: none !important;
  order: 99;
}

#dashboard > .metrics-grid {
  order: 1;
}

#dashboard > .action-center-panel {
  order: 2;
}

#dashboard > .dashboard-pl-feed-panel {
  order: 3;
}

#dashboard > .dashboard-percent-panel {
  order: 1;
}

#dashboard > .dashboard-visual-grid {
  order: 2;
}

#dashboard > .dashboard-actions {
  order: 3;
}

#dashboard > .invoice-ops-panel {
  order: 4;
}

#dashboard > .dashboard-details-panel {
  grid-column: 1 / -1;
  order: 20;
}

#dashboard > #savedInvoicesPanel {
  grid-column: 1 / -1;
  order: 12;
}

#dashboard .metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#dashboard .metric {
  min-height: 116px;
  border-radius: 10px !important;
  padding: 12px 14px;
}

#dashboard .metric strong {
  font-size: clamp(25px, 2.8vw, 48px);
  letter-spacing: -0.055em;
}

#dashboard .metric::before {
  display: none;
}

.dashboard-workspace-strip {
  border-radius: var(--command-radius-sm) !important;
  padding: 5px !important;
}

.workspace-tab {
  flex-basis: 142px !important;
  border-radius: var(--command-radius-sm) !important;
}

.panel,
.dashboard-action,
.global-search-panel,
.metric,
.month-card,
.invoice-direction-switch,
.ordering-space-tabs,
.workspace-strip {
  border-radius: var(--command-radius) !important;
}

.panel-header,
.compact-panel-header {
  padding: 11px 13px !important;
}

.action-center-panel .attention-summary-grid,
.dashboard-percent-grid,
.dashboard-feed-grid,
.invoice-ops-grid {
  grid-template-columns: 1fr !important;
}

.dashboard-visual-grid {
  grid-template-columns: 1fr !important;
}

.dashboard-actions {
  grid-template-columns: 1fr !important;
}

.invoice-workflow-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--command-radius) !important;
  background: color-mix(in srgb, var(--paper) 86%, var(--body));
}

.invoice-direction-switch {
  border-radius: var(--command-radius-sm) !important;
}

.invoice-direction-card {
  border-radius: var(--command-radius-sm) !important;
}

.invoice-space.is-active .intake-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.invoice-review-panel {
  margin-top: 14px;
}

.invoice-review-workspace.has-reference,
.invoice-review-workspace {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: start;
}

.invoice-line-reference {
  order: 2;
  min-height: 430px;
  border-radius: var(--command-radius);
}

.invoice-review-table-wrap {
  order: 1;
}

.staff-pocket-shell {
  display: grid;
  justify-items: center;
}

.staff-pocket-phone {
  width: min(420px, 100%);
  border-radius: 28px !important;
  background: color-mix(in srgb, var(--paper) 92%, var(--body));
}

.staff-pocket-header,
.staff-pocket-tonight {
  border-radius: 18px !important;
}

.staff-app-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.staff-app-tile {
  min-height: 104px;
  border-radius: 18px !important;
}

@media (max-width: 1180px) {
  .sidebar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .brand {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .shell-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  #dashboard.view.is-visible {
    grid-template-columns: 1fr;
  }

  #dashboard > .dashboard-workspace-strip,
  #dashboard > .metrics-grid,
  #dashboard > .dashboard-pl-feed-panel,
  #dashboard > .action-center-panel,
  #dashboard > .dashboard-percent-panel,
  #dashboard > .dashboard-visual-grid,
  #dashboard > .dashboard-actions,
  #dashboard > .invoice-ops-panel {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .sidebar {
    display: grid !important;
    gap: 8px;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  .tabs.simple-tabs,
  .tabs {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    padding: 4px !important;
  }

  body .sidebar .tab,
  body .sidebar .nav-menu summary,
  .tab,
  .nav-menu summary {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-menu-panel,
  .nav-menu-panel {
    position: static !important;
    min-width: 0;
    width: 100%;
    margin-top: 6px !important;
    box-shadow: none !important;
  }

  .shell-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .shell-actions .secondary-button,
  .shell-actions .primary-button,
  .shell-actions .tab {
    min-width: 0 !important;
    width: 100% !important;
  }

  .main {
    padding: 10px 10px 80px !important;
  }

  .topbar {
    margin-bottom: 10px !important;
    padding: 10px !important;
  }

  .workbar,
  .invoice-space.is-active .intake-grid,
  .invoice-review-workspace.has-reference,
  .invoice-review-workspace {
    grid-template-columns: 1fr !important;
  }

  #dashboard .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #dashboard .metric {
    min-height: 86px;
  }

  .invoice-workflow-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Final dashboard composition lock for the Larder command layout. */
body #dashboard.view.is-visible > .dashboard-workspace-strip {
  display: none !important;
  grid-column: 1 / -1 !important;
  order: 99 !important;
}

body #dashboard.view.is-visible {
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.82fr) !important;
  grid-template-areas: none !important;
  grid-auto-flow: row dense;
}

body #dashboard.view.is-visible > .metrics-grid {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  order: 1 !important;
}

/* Guided invoice intake: one clear decision at each recoverable stage. */
#invoice .invoice-workflow-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

#invoice .invoice-workflow-strip article {
  min-height: 50px;
  padding: 7px 9px;
  box-shadow: none;
}

#invoice .invoice-workflow-strip article.is-complete span {
  font-size: 0;
  background: var(--success, #2f6b5c);
}

#invoice .invoice-workflow-strip article.is-complete span::after {
  content: "✓";
  font-size: 13px;
}

.invoice-guided-flow {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 12px;
  padding: 13px 14px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--paper) 88%, var(--accent) 12%), var(--paper));
  box-shadow: 0 8px 24px rgba(24, 43, 37, 0.07);
}

.invoice-guided-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.invoice-guided-copy > strong {
  color: var(--ink);
  font-family: var(--display-font, inherit);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.05;
}

.invoice-guided-copy > small,
.invoice-guided-status small {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.35;
}

.invoice-guided-status {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 210px;
}

.invoice-guided-saved-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success, #2f6b5c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success, #2f6b5c) 14%, transparent);
}

.invoice-guided-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.invoice-guided-actions #invoiceFlowPrimary {
  min-width: 150px;
}

#invoice[data-intake-stage="upload"] .invoice-review-panel,
#invoice[data-intake-stage="organize"] .invoice-review-panel,
#invoice[data-intake-stage="reading"] .invoice-review-panel {
  display: none !important;
}

#invoice[data-intake-stage="review"] .intake-grid,
#invoice[data-intake-stage="finish"] .intake-grid {
  display: none !important;
}

#invoice[data-intake-stage="finish"] .invoice-review-panel {
  display: block !important;
}

#invoice[data-intake-stage="reading"] .drop-zone,
#invoice[data-intake-stage="reading"] #preview,
#invoice[data-intake-stage="reading"] #invoiceImageNameManager,
#invoice[data-intake-stage="reading"] .invoice-intake-preview-panel {
  display: none !important;
}

#invoice #extractAi,
#invoice #bulkQueueAi,
#invoice #saveInvoice {
  display: none !important;
}

html.dark-mode .invoice-guided-flow {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: linear-gradient(115deg, color-mix(in srgb, var(--paper) 82%, var(--accent) 18%), var(--paper));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

@media (max-width: 980px) {
  #invoice .invoice-workflow-strip {
    display: none;
  }

  .invoice-guided-flow {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .invoice-guided-status {
    max-width: none;
  }

  .invoice-guided-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-guided-actions #invoiceFlowPrimary {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: 46px;
  }
}

@media (max-width: 560px) {
  .invoice-guided-actions {
    grid-template-columns: 1fr;
  }

  .invoice-guided-actions #invoiceFlowPrimary {
    grid-column: auto;
  }
}

body #dashboard.view.is-visible > .action-center-panel {
  grid-area: auto !important;
  grid-column: 1 !important;
  order: 2 !important;
}

body #dashboard.view.is-visible > .dashboard-pl-snapshot-panel {
  display: block !important;
  grid-area: auto !important;
  grid-column: 2 !important;
  order: 2 !important;
}

body #dashboard.view.is-visible > .dashboard-recent-files-panel {
  display: block !important;
  grid-area: auto !important;
  grid-column: 1 !important;
  order: 3 !important;
}

body #dashboard.view.is-visible > .dashboard-recent-activity-panel {
  display: block !important;
  grid-area: auto !important;
  grid-column: 2 !important;
  order: 3 !important;
}

body #dashboard.view.is-visible > .dashboard-pl-feed-panel {
  grid-area: pl !important;
  grid-column: 1 !important;
  order: 3 !important;
}

body #dashboard.view.is-visible > .dashboard-percent-panel {
  grid-area: percent !important;
  grid-column: 2 !important;
  order: 1 !important;
}

body #dashboard.view.is-visible > .dashboard-visual-grid {
  grid-area: visual !important;
  grid-column: 2 !important;
  order: 2 !important;
}

body #dashboard.view.is-visible > .dashboard-actions {
  grid-area: actions !important;
  grid-column: 1 !important;
  order: 3 !important;
}

body #dashboard.view.is-visible > .invoice-ops-panel {
  grid-area: ops !important;
  grid-column: 2 !important;
  order: 4 !important;
}

body #dashboard.view.is-visible > #savedInvoicesPanel {
  grid-area: saved !important;
  grid-column: 1 / -1 !important;
  order: 12 !important;
}

body #dashboard.view.is-visible > .dashboard-details-panel {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  order: 20 !important;
}

body #dashboard.view.is-visible > .dashboard-pl-feed-panel,
body #dashboard.view.is-visible > .dashboard-percent-panel,
body #dashboard.view.is-visible > .dashboard-visual-grid,
body #dashboard.view.is-visible > .dashboard-actions,
body #dashboard.view.is-visible > .invoice-ops-panel,
body #dashboard.view.is-visible > #savedInvoicesPanel {
  display: none !important;
}

body .sidebar .nav-menu[open] > .nav-menu-panel {
  display: grid !important;
}

body #dashboard .metrics-grid {
  align-items: stretch !important;
}

body #dashboard .metric {
  display: grid !important;
  min-height: 72px !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 14px 16px !important;
}

body #dashboard .metric span {
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #dashboard .metric strong {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(22px, 2.1vw, 34px) !important;
  line-height: 1 !important;
  text-align: left;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: clip;
}

/* Spending wheel: restore the dashboard category chart as an actual donut. */
body .dashboard-spend-wheel {
  display: grid !important;
  grid-template-columns: minmax(170px, 0.62fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px 16px;
}

body .spend-wheel {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(100%, 220px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 62%, transparent),
    0 18px 34px rgba(12, 32, 27, 0.12);
}

body .spend-wheel::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 6px 16px rgba(12, 32, 27, 0.08);
}

body .spend-wheel > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  justify-items: center;
  max-width: 58%;
  text-align: center;
}

body .spend-wheel strong {
  max-width: 100%;
  color: var(--ink);
  font-size: clamp(17px, 1.35vw, 24px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .spend-wheel span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

body .spend-wheel-legend {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body .spend-wheel-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 94%, var(--body));
  text-align: left;
}

body .spend-wheel-row:hover,
body .spend-wheel-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  outline: none;
}

body .spend-wheel-row i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

body .spend-wheel-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .spend-wheel-row strong,
body .spend-wheel-row small {
  white-space: nowrap;
}

body .spend-wheel-row strong {
  font-size: 12px;
}

body .spend-wheel-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

@media (max-width: 1180px) {
  body #dashboard.view.is-visible {
    grid-template-areas:
      "metrics"
      "attention"
      "pl"
      "percent"
      "visual"
      "actions"
      "ops"
      "saved"
      "details" !important;
  }

  body #dashboard.view.is-visible > .metrics-grid,
  body #dashboard.view.is-visible > .action-center-panel,
  body #dashboard.view.is-visible > .dashboard-pl-feed-panel,
  body #dashboard.view.is-visible > .dashboard-percent-panel,
  body #dashboard.view.is-visible > .dashboard-visual-grid,
  body #dashboard.view.is-visible > .dashboard-actions,
  body #dashboard.view.is-visible > .invoice-ops-panel,
  body #dashboard.view.is-visible > #savedInvoicesPanel,
  body #dashboard.view.is-visible > .dashboard-details-panel {
    grid-column: 1 !important;
  }
}

@media (max-width: 760px) {
  body #dashboard .metric {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  body #dashboard .metric span {
    font-size: 9.8px !important;
  }

  body #dashboard .metric strong {
    font-size: clamp(19px, 5.7vw, 26px) !important;
  }

  body .dashboard-spend-wheel {
    grid-template-columns: 1fr;
  }

  body .spend-wheel {
    inline-size: min(78vw, 210px);
  }

  body .spend-wheel-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }

  body .spend-wheel-row small {
    display: none;
  }
}

/* Keep desktop navigation popovers outside the pill rail instead of clipping them. */
@media (min-width: 761px) {
  body .sidebar {
    grid-template-columns: 210px minmax(0, 1fr) max-content !important;
  }

  body .sidebar {
    overflow: visible !important;
    z-index: 1000 !important;
  }

  body .tabs.simple-tabs,
  body .tabs {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    z-index: 1001 !important;
  }

  body .sidebar .tab,
  body .sidebar .nav-menu summary {
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  body .shell-actions {
    gap: 6px !important;
  }

  body .shell-actions .secondary-button,
  body .shell-actions .primary-button,
  body .shell-actions .tab {
    min-height: 34px !important;
    padding-inline: 11px !important;
    font-size: 12px !important;
  }

  body .sidebar .nav-menu {
    position: relative !important;
    z-index: 1002 !important;
  }

  body .sidebar .nav-menu[open] > .nav-menu-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    display: grid !important;
    z-index: 2000 !important;
  }
}

/* Keep issue action buttons visible without requiring hover. */
body .needs-review-actions .primary-button,
body .needs-review-actions .secondary-button,
body .invoice-audit-card .primary-button,
body .invoice-audit-card .secondary-button,
body .ignored-issue-card .primary-button,
body .ignored-issue-card .secondary-button {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

body .needs-review-actions .primary-button,
body .invoice-audit-card .primary-button,
body .ignored-issue-card .primary-button {
  border-color: var(--accent-dark) !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
}

body .needs-review-actions .secondary-button,
body .invoice-audit-card .secondary-button,
body .ignored-issue-card .secondary-button {
  border-color: var(--larder-hairline, var(--line)) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
}

.category-filter-items {
  margin: 0 14px 12px;
}

.category-filter-items details {
  border: 1px solid var(--larder-hairline, var(--line));
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 94%, var(--body));
}

.category-filter-items summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 13px;
  cursor: pointer;
  list-style: none;
}

.category-filter-items summary::-webkit-details-marker {
  display: none;
}

.category-filter-items summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.category-filter-items summary strong {
  color: var(--ink);
  font-size: 13px;
}

.category-filter-item-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid var(--larder-hairline, var(--line));
  padding: 8px;
}

.category-filter-item-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--larder-hairline, var(--line));
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--paper);
}

.category-filter-item-list article > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.category-filter-item-list article > div:last-child {
  justify-items: end;
}

.category-filter-item-list strong {
  color: var(--ink);
}

.category-filter-item-list span,
.category-filter-item-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .category-filter-items {
    margin-inline: 10px;
  }

  .category-filter-items summary,
  .category-filter-item-list article {
    grid-template-columns: 1fr;
  }

  .category-filter-items summary {
    display: grid;
    align-content: center;
    padding: 9px 11px;
  }

  .category-filter-item-list article > div:last-child {
    justify-items: start;
  }
}

/* Final UI legibility pass for action buttons and invoice work areas. */
body .danger-button,
body button.danger-button,
body .row-actions .danger-button,
body .modal-actions .danger-button,
body .page-preview-tools .danger-button,
body .invoice-image-name-row .danger-button {
  border: 1px solid #a92920 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #d84d40, #a92920) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 18px rgba(169, 41, 32, 0.16) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body .danger-button:hover,
body button.danger-button:hover,
body .danger-button:focus-visible {
  border-color: #8f1f18 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #bf382f, #8f1f18) !important;
}

body .invoice-direction-card,
body .ordering-space-tab,
body .review-filter-button,
body .invoice-audit-card,
body .audit-section > summary,
body .bulk-group,
body .bulk-queue-card,
body .drop-zone {
  color: var(--ink) !important;
}

body .invoice-direction-card strong,
body .invoice-direction-card span,
body .invoice-direction-card small,
body .ordering-space-tab span,
body .ordering-space-tab strong,
body .ordering-space-tab small {
  opacity: 1 !important;
}

body .invoice-direction-card.is-active,
body .ordering-space-tab.is-active {
  border-color: var(--accent-dark) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d1b22, #0f6658) !important;
  box-shadow: 0 14px 32px rgba(15, 102, 88, 0.22) !important;
}

body .invoice-direction-card.is-active strong,
body .invoice-direction-card.is-active span,
body .invoice-direction-card.is-active small,
body .ordering-space-tab.is-active span,
body .ordering-space-tab.is-active strong,
body .ordering-space-tab.is-active small {
  color: #ffffff !important;
}

body .invoice-direction-card.is-active small,
body .ordering-space-tab.is-active small {
  color: rgba(255, 255, 255, 0.84) !important;
}

body .review-filter-button {
  border: 1px solid var(--larder-hairline, var(--line)) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
}

body .review-filter-button:hover,
body .review-filter-button.is-active {
  border-color: var(--accent-dark) !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
}

body .invoice-audit-card {
  border: 1px solid var(--larder-hairline, var(--line)) !important;
  border-left: 4px solid var(--warning, #d98619) !important;
  border-radius: 12px !important;
  margin: 8px !important;
  background: var(--paper) !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06) !important;
}

body .invoice-audit-card.good {
  border-left-color: var(--accent-dark) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper)) !important;
}

body .invoice-audit-card strong {
  color: var(--ink) !important;
}

body .invoice-audit-card span,
body .invoice-audit-card small,
body .audit-line-editor label,
body .bulk-group-title span,
body .bulk-group p,
body .bulk-status {
  color: var(--muted) !important;
}

body .audit-section {
  border-color: var(--larder-hairline, var(--line)) !important;
  border-radius: 14px !important;
  background: var(--paper) !important;
}

body .audit-section > summary {
  border-bottom: 1px solid var(--larder-hairline, var(--line));
  background: color-mix(in srgb, var(--paper) 92%, var(--body)) !important;
}

body .audit-section[open] > summary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #14222a, #0f6658) !important;
}

body .audit-section[open] > summary b,
body .audit-section[open] > summary span,
body .audit-section[open] > summary small {
  color: #ffffff !important;
}

body .drop-zone {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper)) !important;
}

body .drop-zone:hover,
body .drop-zone.is-dragging {
  border-color: var(--accent-dark) !important;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper)) !important;
}

body .bulk-group,
body .bulk-queue-card {
  border-color: var(--larder-hairline, var(--line)) !important;
  background: var(--paper) !important;
}

body .bulk-queue-card.is-active,
body .bulk-page-chip.is-selected {
  border-color: var(--accent-dark) !important;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper)) !important;
}

/* Deep visual systems pass: one clean set of connections, controls, and page chrome. */
body {
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-line: color-mix(in srgb, var(--line) 82%, transparent);
  --ui-muted-panel: color-mix(in srgb, var(--paper) 90%, var(--body));
}

body .sidebar {
  isolation: isolate;
}

body .tabs.simple-tabs,
body .tabs {
  gap: 4px !important;
  min-height: 44px;
  border-color: var(--ui-line) !important;
  background: color-mix(in srgb, var(--paper) 96%, var(--body)) !important;
}

body .tab,
body .nav-menu summary,
body .primary-button,
body .secondary-button,
body .danger-button,
body button,
body select,
body input,
body textarea {
  font-family: inherit;
}

body .tab,
body .nav-menu summary,
body .shell-actions .secondary-button,
body .shell-actions .primary-button {
  min-height: 34px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body .nav-menu-panel {
  color: var(--ink) !important;
}

body .nav-menu-panel .nav-subtab {
  min-height: 34px !important;
  color: var(--ink) !important;
  background: transparent !important;
}

body .nav-menu-panel .nav-subtab:hover,
body .nav-menu-panel .nav-subtab:focus-visible {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--accent) 9%, var(--paper)) !important;
}

body .nav-menu-panel .nav-subtab.is-active {
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
}

body .main {
  overflow: clip visible;
}

body .topbar,
body .panel,
body .metric,
body .month-card,
body .dashboard-action,
body .global-search-panel,
body .modal,
body .drive-finder-panel,
body .invoice-review-panel,
body .invoice-line-reference,
body .staff-pocket-phone,
body .staff-pocket-window,
body .staff-pocket-card,
body .staff-app-tile {
  border-color: var(--ui-line) !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.055) !important;
}

body .panel,
body .topbar,
body .month-card {
  background: color-mix(in srgb, var(--paper) 94%, var(--body)) !important;
}

body .panel-header,
body .compact-panel-header {
  gap: 10px !important;
  align-items: center !important;
  border-bottom-color: var(--ui-line) !important;
}

body .panel-header h2,
body .compact-panel-header h2,
body .page-heading h1,
body #viewTitle {
  letter-spacing: 0 !important;
}

body .hint,
body small,
body .status-line,
body .refresh-status,
body .month-status {
  line-height: 1.35;
}

body label {
  min-width: 0;
}

body input,
body select,
body textarea {
  min-width: 0;
  border-color: var(--ui-line) !important;
  background: var(--paper) !important;
}

body input:focus,
body select:focus,
body textarea:focus,
body button:focus-visible,
body .tab:focus-visible,
body summary:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent) !important;
}

body .primary-button,
body .secondary-button,
body .danger-button,
body .compact-button,
body .review-filter-button,
body .table-sort-button {
  white-space: nowrap;
}

body .primary-button,
body .secondary-button,
body .danger-button {
  min-height: 36px;
}

body .secondary-button {
  color: var(--ink) !important;
  border-color: var(--ui-line) !important;
  background: color-mix(in srgb, var(--paper) 93%, var(--body)) !important;
}

body .secondary-button:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper)) !important;
}

body .danger-button {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line)) !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #d96356, #b42318) !important;
}

body .status-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  padding: 8px 10px 8px 14px !important;
  background: color-mix(in srgb, var(--paper) 90%, var(--body)) !important;
}

body .status-footer .refresh-status {
  flex: 1 1 auto;
  min-width: 180px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

body .deployment-status {
  display: flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body .status-chip,
body .status-badge,
body .confidence-badge,
body .basis-badge,
body .issue-chip {
  min-height: 24px;
  border-radius: 999px;
  padding-inline: 9px;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

body .confidence-grid {
  grid-template-columns: repeat(4, minmax(118px, 1fr)) !important;
  gap: 8px !important;
}

body .confidence-card {
  min-width: 0;
  min-height: 72px !important;
  padding: 10px 12px !important;
  overflow: hidden;
}

body .confidence-card span,
body .confidence-card strong,
body .confidence-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .confidence-card strong {
  font-size: 16px !important;
}

body .review-filter-button,
body .exception-filter-bar button,
body .bulk-actions button {
  min-height: 28px !important;
  border-radius: 999px !important;
  padding-inline: 10px !important;
  font-size: 12px !important;
}

body table {
  border-collapse: separate;
  border-spacing: 0;
}

body th,
body td {
  vertical-align: middle;
}

body .table-wrap,
body .invoice-review-table-wrap,
body .drive-preview-table-wrap {
  overflow: auto;
}

body .invoice-review-table input,
body .invoice-review-table select,
body .pl-table input,
body .pl-table select {
  min-height: 34px;
}

body .drive-file-card.drive-file-row {
  cursor: pointer;
}

body .drive-file-card.drive-file-row * {
  min-width: 0;
}

@media (max-width: 1180px) {
  body .sidebar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body .brand {
    width: 100%;
  }

  body .tabs.simple-tabs,
  body .tabs {
    width: 100%;
  }

  body .shell-actions {
    width: 100%;
    justify-content: stretch !important;
  }

  body .shell-actions > * {
    flex: 1 1 0;
  }
}

@media (max-width: 760px) {
  body .sidebar {
    position: sticky !important;
    top: 0;
    gap: 8px !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--ui-line) !important;
  }

  body .brand {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  body .brand-mark {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  body .brand p {
    display: none;
  }

  body .tabs.simple-tabs,
  body .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 42px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 999px !important;
    padding: 4px !important;
  }

  body .tabs.simple-tabs > .tab,
  body .tabs.simple-tabs > .nav-menu,
  body .tabs > .tab,
  body .tabs > .nav-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }

  body .tabs.simple-tabs > .tab,
  body .tabs.simple-tabs > .nav-menu > summary,
  body .tabs > .tab,
  body .tabs > .nav-menu > summary {
    width: auto !important;
    min-width: max-content !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  body .sidebar .nav-menu {
    position: static !important;
  }

  body .sidebar .nav-menu[open] > .nav-menu-panel {
    position: fixed !important;
    top: 196px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 2000 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: min(58vh, 420px);
    overflow: auto;
    border-radius: 16px !important;
    padding: 8px !important;
  }

  body .sidebar .nav-menu-panel .nav-subtab {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding-inline: 14px !important;
    text-align: left !important;
  }

  body .shell-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body .shell-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .main {
    padding-inline: 10px !important;
  }

  body .workbar,
  body .month-controls,
  body .global-search-command,
  body .global-search {
    grid-template-columns: 1fr !important;
  }

  body .month-card,
  body .topbar,
  body .panel {
    border-radius: 14px !important;
  }

  body .panel-header,
  body .compact-panel-header {
    align-items: stretch !important;
  }

  body .panel-header button,
  body .compact-panel-header button {
    width: 100%;
  }

  body .confidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .status-footer {
    display: grid !important;
    justify-items: stretch;
    border-radius: 16px !important;
    padding: 10px !important;
  }

  body .status-footer .refresh-status {
    min-width: 0;
  }

  body .deployment-status {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch;
    gap: 6px !important;
  }

body .status-chip {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: center;
  }
}

/* Deep fit pass: tighten the few places that still fell back to browser defaults. */
body .compact-money-field {
  min-width: 118px;
}

body .invoice-header-grid .compact-money-field input {
  width: 100%;
}

body .schedule-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: start;
}

body .schedule-calendar-card,
body .schedule-day-detail {
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}

body .schedule-calendar-title,
body .schedule-day-detail-header {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-bottom: 1px solid var(--ui-line, var(--line));
  background: color-mix(in srgb, var(--paper) 92%, var(--body));
}

body .schedule-calendar-title strong,
body .schedule-day-detail-header strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
}

body .schedule-calendar-title small,
body .schedule-day-detail-header span,
body .schedule-day-detail-header small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body .schedule-calendar-weekdays,
body .schedule-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
}

body .schedule-calendar-weekdays {
  padding-bottom: 0;
}

body .schedule-calendar-weekdays span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

body .schedule-day {
  display: grid;
  align-content: start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  border: 1px solid var(--ui-line, var(--line)) !important;
  border-radius: 10px;
  padding: 7px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 96%, var(--body)) !important;
  text-align: left;
  box-shadow: none !important;
}

body .schedule-day span,
body .schedule-day strong,
body .schedule-day small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .schedule-day span {
  font-size: 13px;
  font-weight: 900;
}

body .schedule-day strong {
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
}

body .schedule-day small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

body .schedule-day:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper)) !important;
}

body .schedule-day.is-outside {
  opacity: 0.48;
}

body .schedule-day.is-today {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line)) !important;
}

body .schedule-day.is-selected {
  color: #ffffff;
  border-color: var(--accent-dark) !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
}

body .schedule-day.is-selected span,
body .schedule-day.is-selected strong,
body .schedule-day.is-selected small {
  color: #ffffff;
}

body .schedule-day.has-my-shift:not(.is-selected) {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper)) !important;
}

body .schedule-day-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

body .schedule-day-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--paper) 96%, var(--body));
}

body .schedule-day-list article.is-my-shift {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

body .schedule-day-list article div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body .schedule-day-list article strong,
body .schedule-day-list article span,
body .schedule-day-list article small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .schedule-day-list article span,
body .schedule-day-list article small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body .trend-category-card,
body .trend-category-card * {
  min-width: 0;
}

body .trend-category-card span,
body .trend-category-card strong,
body .trend-category-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

body .trend-category-card span,
body .trend-category-card strong {
  white-space: nowrap;
}

html.dark-mode body .schedule-calendar-card,
html.dark-mode body .schedule-day-detail,
html.dark-mode body .schedule-day,
html.dark-mode body .schedule-day-list article {
  background: color-mix(in srgb, var(--paper) 94%, #000000) !important;
}

html.dark-mode body .schedule-day.has-my-shift:not(.is-selected),
html.dark-mode body .schedule-day-list article.is-my-shift {
  background: rgba(110, 195, 168, 0.1) !important;
}

@media (max-width: 760px) {
  body .order-intake-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .order-intake-steps span {
    padding: 7px 8px;
  }

  body #dashboard .metrics-grid,
  body #dashboard.view.is-visible > .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body #dashboard .metric {
    min-height: 68px !important;
    padding: 9px 10px !important;
  }

  body #dashboard .metric span {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body #dashboard .metric strong {
    font-size: clamp(15px, 4.35vw, 18px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body .panel-actions,
  body .button-row,
  body .bulk-queue-header-actions,
  body .bulk-queue-actions,
  body .weekly-order-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  body .panel-actions > *,
  body .button-row > *,
  body .bulk-queue-header-actions > *,
  body .bulk-queue-actions > *,
  body .weekly-order-actions > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  body #startBulkIntake,
  body #saveUnfinishedInvoices,
  body #saveUnfinishedEach,
  body #bulkGroupAi,
  body #bulkQueueAi,
  body #openPhoneScanner,
  body #extractAi,
  body #printBlankOrderingSheetPanel,
  body #printOrderingSheetPanel,
  body #printBlankOrderingSheet,
  body #printOrderSheet {
    justify-content: center;
    min-height: 40px !important;
    padding: 7px 8px !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    text-align: center;
  }

  body .schedule-calendar-layout {
    grid-template-columns: 1fr;
  }

  body .trend-category-grid {
    grid-template-columns: 1fr !important;
  }

  body .trend-category-card {
    gap: 7px !important;
    padding: 10px !important;
  }

  body .trend-category-card > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px !important;
  }

  body .trend-category-card strong {
    font-size: 13px !important;
  }

  body .trend-category-card small {
    display: block;
    white-space: normal;
    line-height: 1.25;
  }

  body .schedule-calendar-weekdays,
  body .schedule-calendar-grid {
    gap: 3px;
    padding: 6px;
  }

  body .schedule-day {
    min-height: 46px;
    border-radius: 8px;
    padding: 5px;
  }

  body .schedule-day span {
    font-size: 12px;
  }

  body .schedule-day strong,
  body .schedule-day small {
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  body #dashboard .metric strong {
    font-size: clamp(13px, 4vw, 15px) !important;
  }

  body .panel-actions,
  body .button-row,
  body .bulk-queue-header-actions,
  body .bulk-queue-actions,
  body .weekly-order-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile shell lock: the app must never split into sidebar + content on phones. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
  }

  body .sidebar,
  body .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-line, var(--line)) !important;
  }

  body .main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px 10px 86px !important;
    margin: 0 !important;
  }

  body .view.is-visible,
  body #dashboard.view.is-visible {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .topbar {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .month-card {
    width: 100% !important;
    justify-self: stretch !important;
  }

  body #dashboard.view.is-visible {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #dashboard.view.is-visible > * {
    min-width: 0 !important;
  }

  body #dashboard.view.is-visible > .metrics-grid,
  body #dashboard.view.is-visible > .action-center-panel,
  body #dashboard.view.is-visible > .dashboard-pl-snapshot-panel,
  body #dashboard.view.is-visible > .dashboard-recent-files-panel,
  body #dashboard.view.is-visible > .dashboard-recent-activity-panel,
  body #dashboard.view.is-visible > .dashboard-details-panel {
    grid-area: auto !important;
    grid-column: 1 !important;
    width: 100% !important;
  }

  body #dashboard.view.is-visible > .action-center-panel { order: 2 !important; }
  body #dashboard.view.is-visible > .dashboard-pl-snapshot-panel { order: 3 !important; }
  body #dashboard.view.is-visible > .dashboard-recent-files-panel { order: 4 !important; }
  body #dashboard.view.is-visible > .dashboard-recent-activity-panel { order: 5 !important; }
}

/* Invoice document preflight */
body .scan-quality-panel {
  display: grid;
  gap: 12px;
  margin: 12px 16px 4px;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--paper) 96%, var(--body));
}

body .scan-quality-panel[hidden] {
  display: none;
}

body .scan-quality-panel.is-good {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}

body .scan-quality-panel.has-warning {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
}

body .scan-quality-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

body .scan-quality-heading > div {
  display: grid;
  gap: 2px;
}

body .scan-quality-summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

body .scan-quality-summary.good {
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
}

body .scan-quality-summary.warning {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
}

body .scan-quality-list {
  display: grid;
  gap: 7px;
}

body .scan-quality-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--paper);
}

body .scan-quality-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--body);
  font-size: 12px;
  font-weight: 900;
}

body .scan-quality-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body .scan-quality-row strong,
body .scan-quality-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .scan-quality-row small,
body .scan-quality-tip {
  color: var(--muted);
}

body .scan-quality-row em {
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

body .scan-quality-row.warning em,
body .scan-quality-row.bad em {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 11%, var(--paper));
}

body .scan-quality-row.bad em {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--paper));
}

body .scan-quality-tip {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 620px) {
  body .scan-quality-panel {
    margin-inline: 10px;
    padding: 11px;
  }

  body .scan-quality-heading,
  body .scan-quality-row {
    align-items: start;
  }

  body .scan-quality-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  body .scan-quality-row em {
    grid-column: 2;
    justify-self: start;
  }

  body .scan-quality-row small {
    white-space: normal;
  }
}

/* Vendor invoice template builder */
body .invoice-template-form {
  display: grid;
  gap: 16px;
  border-bottom: 1px solid var(--ui-line, var(--line));
  padding: 18px;
  background: color-mix(in srgb, var(--accent) 3%, var(--paper));
}

body .invoice-template-form[hidden] {
  display: none;
}

body .invoice-template-identity {
  grid-template-columns: 1.1fr 1fr 1.4fr 0.6fr;
}

body .invoice-template-builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

body .invoice-template-builder-grid fieldset {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 13px;
  padding: 14px;
  background: var(--paper);
}

body .invoice-template-builder-grid legend {
  padding: 0 7px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body .invoice-template-builder-grid label {
  gap: 4px;
  font-size: 11px;
}

body .invoice-template-builder-grid input,
body .invoice-template-builder-grid textarea {
  font-size: 13px;
}

body .invoice-template-builder-grid .template-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 9px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--paper) 94%, var(--body));
}

body .template-check input {
  width: 17px;
  min-height: 17px;
}

body .invoice-template-actions {
  justify-content: flex-end;
  margin: 0;
}

body .invoice-template-list {
  display: grid;
  gap: 8px;
  padding: 14px 18px 18px;
}

body .invoice-template-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(190px, 0.75fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--ui-line, var(--line));
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--paper);
}

body .invoice-template-card.is-active {
  border-left: 4px solid var(--accent);
}

body .invoice-template-card.is-draft {
  border-left: 4px solid var(--gold);
}

body .invoice-template-card.is-inactive {
  opacity: 0.68;
}

body .invoice-template-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  min-width: 0;
}

body .invoice-template-card-main strong,
body .invoice-template-card-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .invoice-template-card-main small {
  grid-column: 2;
  color: var(--muted);
}

body .template-status {
  align-self: center;
  grid-row: 1 / 3;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 11%, var(--paper));
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

body .invoice-template-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body .invoice-template-card-stats span {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  background: var(--body);
  font-size: 10px;
  font-weight: 800;
}

body .invoice-template-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--ui-line, var(--line));
  border-radius: 12px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) {
  body .invoice-template-identity,
  body .invoice-template-builder-grid {
    grid-template-columns: 1fr 1fr;
  }

  body .invoice-template-builder-grid fieldset:last-child {
    grid-column: 1 / -1;
  }

  body .invoice-template-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body .invoice-template-card-stats {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  body .invoice-template-identity,
  body .invoice-template-builder-grid,
  body .invoice-template-card {
    grid-template-columns: 1fr;
  }

  body .invoice-template-builder-grid fieldset:last-child,
  body .invoice-template-card-stats {
    grid-column: auto;
  }

body .invoice-template-card .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* V3.68 visual alignment pass: predictable rows, columns, and available-width use. */
:where(.view, .modal, .staff-page-shell) > *,
:where(.view, .modal, .staff-page-shell) [class*="-grid"] > *,
.panel-header > *,
.panel-actions > * { min-width: 0; }

.panel-header { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.panel-header > :first-child { flex: 1 1 260px; }
.panel-actions, .button-row, .row-actions { align-items: center; flex-wrap: wrap; }

@media (min-width: 1181px) {
  .sidebar { grid-template-columns: 190px minmax(0, 1fr) auto !important; gap: 8px !important; }
  .tabs.simple-tabs, .tabs { gap: 2px !important; }
  .tab, .nav-menu summary { padding-inline: 9px !important; }
  .shell-actions { gap: 5px !important; }
  .shell-actions .secondary-button, .shell-actions .primary-button, .shell-actions .tab { padding-inline: 10px !important; }
  body #dashboard .dashboard-percent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .staff-standalone-app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .staff-standalone-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .panel-header > :first-child { flex-basis: 100%; }
  .shell-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .modal-actions, .performance-diagnostics .panel-header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .modal-actions > *, .performance-diagnostics .panel-header > * { min-width: 0; width: 100%; }
}

/* Shared continuity cascade. Keep these legacy-shell overrides in one place. */
body[data-active-view="settings"] .topbar,
body[data-active-view="drive"] .topbar { padding: 12px 16px !important; }
body[data-active-view="settings"] .workbar,
body[data-active-view="drive"] .workbar { grid-template-columns: minmax(0, 1fr) !important; }
body[data-active-view="settings"] .page-heading,
body[data-active-view="drive"] .page-heading { padding: 0 !important; }
body[data-active-view="settings"] .page-heading h1,
body[data-active-view="drive"] .page-heading h1 { font-size: clamp(28px, 3vw, 38px) !important; }
body .invoice-direction-switch,
body .ordering-space-tabs,
body .operations-section-tabs { gap: 5px !important; padding: 5px !important; border-radius: 12px !important; box-shadow: none !important; }
body .invoice-direction-card,
body .ordering-space-tab { min-height: 62px !important; border-radius: 8px !important; padding: 9px 11px !important; box-shadow: none !important; }
body .invoice-direction-card strong { font-size: clamp(18px, 2vw, 22px) !important; }
body .invoice-direction-card small,
body .ordering-space-tab small { font-size: 11px !important; line-height: 1.25; }
body .invoice-direction-card.is-active,
body .ordering-space-tab.is-active,
body .operations-section-tabs button.is-active { border-color: var(--accent-dark) !important; color: #ffffff !important; background: var(--accent-dark) !important; box-shadow: none !important; }
body .settings-advanced-content { display: grid; gap: 12px; padding: 12px !important; background: var(--body); }
body .settings-advanced-content > .panel { margin: 0; border-radius: 12px !important; box-shadow: none !important; }
body .people-directory-panel > .user-admin-layout { padding-top: 2px; }
body .task-workspace-header h2 { margin: 2px 0 3px; font-size: clamp(25px, 3vw, 34px); }
body .task-workspace-window .panel,
body #settings > .panel,
body #people > .panel,
body #staff .staff-admin-section,
body #staff .operations-today-board { border-radius: 12px !important; }

/* Final touch-target lock for the guided invoice controller. */
@media (max-width: 560px) {
  body #invoiceFlowPrimary,
  body #invoiceFlowCancel,
  body #invoiceFlowBack,
  body #invoiceFlowHelp {
    min-height: 44px !important;
  }
}

/* V3.12 final responsive overrides (kept last so every legacy view obeys them). */
.app-shell,
.sidebar,
.main,
.staff-page-shell {
  max-width: none !important;
}

.sidebar,
.main,
.staff-page-shell {
  width: 100% !important;
}

.main,
.view,
.view > *,
.panel,
.card,
.table-wrap,
.responsive-table,
.command-work-content,
.repair-destination-content {
  min-width: 0;
}

.main {
  padding-inline: clamp(10px, 1.5vw, 24px) !important;
}

body:not(.staff-page) .staff-page-shell {
  padding-inline: clamp(10px, 1.5vw, 24px) !important;
}

.command-work-backdrop,
.repair-destination-backdrop,
#lineSourceModal,
#invoiceDetailModal,
#invoicePreviewModal,
#drivePreviewModal {
  padding: clamp(8px, 1.25vw, 18px) !important;
}

.modal.command-work-modal,
.modal.repair-destination-modal,
.modal.source-modal,
.modal.invoice-detail-modal,
.modal.invoice-preview-modal,
.modal.drive-preview-modal {
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - clamp(16px, 2.5vw, 36px)) !important;
  max-height: none !important;
  min-height: 0;
  overflow: hidden;
}

.modal.source-modal,
.modal.invoice-detail-modal,
.modal.invoice-preview-modal,
.modal.drive-preview-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.invoice-detail-content,
.invoice-preview-content,
.line-source-content,
.drive-preview-content {
  min-width: 0;
  min-height: 0;
  max-height: none !important;
  overflow: auto;
}

@media (max-width: 760px) {
  .main {
    padding: 10px 10px max(24px, env(safe-area-inset-bottom)) !important;
  }

  body.staff-page .staff-page-shell {
    padding: 0 0 calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .command-work-backdrop,
  .repair-destination-backdrop,
  #lineSourceModal,
  #invoiceDetailModal,
  #invoicePreviewModal,
  #drivePreviewModal {
    place-items: stretch !important;
    padding: 0 !important;
  }

  .modal.command-work-modal,
  .modal.repair-destination-modal,
  .modal.source-modal,
  .modal.invoice-detail-modal,
  .modal.invoice-preview-modal,
  .modal.drive-preview-modal {
    width: 100vw !important;
    height: 100dvh !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    padding: 10px !important;
  }

  .modal.command-work-modal,
  .modal.repair-destination-modal {
    padding: 0 !important;
  }

  .command-work-content,
  .repair-destination-content,
  .command-work-tabs,
  .command-work-footer,
  .repair-destination-footer {
    padding-inline: 10px !important;
  }

  .table-wrap,
  .responsive-table,
  .invoice-detail-content,
  .invoice-preview-content,
  .line-source-content,
  .drive-preview-content {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* V4.76 continuity: one workspace layer and one focused detail layer. */
body > .task-workspace-backdrop:not([hidden]) { z-index: 20000 !important; }
body > .modal-backdrop:not(.task-workspace-backdrop):not([hidden]),
body > .modal-overlay:not([hidden]) { z-index: 21000 !important; }
body > #invoicePreviewModal:not([hidden]),
body > #invoiceDetailModal:not([hidden]),
body > #lineSourceModal:not([hidden]),
body > #drivePreviewModal:not([hidden]),
body > #recipePrintModal:not([hidden]),
body > #vendorMergePreviewModal:not([hidden]) { z-index: 22000 !important; }

.finance-space-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-muted, var(--paper));
}
.finance-space-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
}
.finance-space-tabs button.is-active {
  background: var(--brand);
  color: white;
  box-shadow: 0 5px 14px rgba(20, 70, 58, .18);
}
.finance-space-panel:not(.is-active) { display: none !important; }
.invoice-direction-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ordering-space-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .finance-space-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-direction-switch,
  .ordering-space-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The print window uses the exact same fixed Letter canvas as the editor preview. */
.mp-menu-sheet { box-sizing: border-box; }
#mpPrintModal .mp-print-dialog { max-height: calc(100dvh - 24px); overflow: auto; }
#mpPrintModal .mp-print-pages { justify-content: start; overflow: auto; padding: 0 12px 20px; }
#mpPrintModal .mp-print-page { flex: 0 0 auto; width: 850px; height: 1100px; min-height: 1100px; aspect-ratio: auto; }
#mpPrintModal .mp-print-page[data-orientation="landscape"] { width: 1100px; height: 850px; min-height: 850px; aspect-ratio: auto; }

/* Approved Amici outlined triangle mark used by the menu template. */
.menu-publishing-view .mp-triangle-mark{display:block;position:static;width:72px;height:56px;color:#d4b600;overflow:visible}
.menu-publishing-view .mp-triangle-mark path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.menu-publishing-view .mp-menu-sheet[data-page="front"] .mp-sheet-columns{grid-template-rows:minmax(0,1fr) auto}
.menu-publishing-view .mp-menu-sheet[data-page="front"][data-orientation="landscape"] .mp-sheet-columns{height:674px}
.menu-publishing-view .mp-menu-sheet[data-page="back"][data-orientation="landscape"] .mp-sheet-columns{height:754px;grid-template-rows:minmax(0,1fr) auto}
.menu-publishing-view .mp-sheet-column{height:100%}
.menu-publishing-view .mp-sheet-column>.mp-sheet-section:last-child{margin-bottom:0}
.menu-publishing-view .mp-sheet-section.boxed{margin-top:8px}
.menu-publishing-view .mp-sheet-matrix,.menu-publishing-view .mp-feature-row{align-self:end}
.menu-publishing-view .mp-sheet-section.density-tight{margin-bottom:15px}
.menu-publishing-view .mp-sheet-section.density-tight .mp-sheet-item{margin-bottom:7px}
.menu-publishing-view .mp-sheet-section.density-tight h2{margin-bottom:6px}
.menu-publishing-view .mp-sheet-section.density-tight .mp-sheet-note{margin-bottom:6px}
.menu-publishing-view .mp-sheet-matrix.density-tight{padding-top:7px;padding-bottom:7px}
.menu-publishing-view .mp-sheet-section.density-tightest{margin-bottom:11px}
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-item{margin-bottom:5px}
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-item p{margin-top:1px;line-height:1.25}
.menu-publishing-view .mp-sheet-section.density-tightest h2{margin-bottom:4px;font-size:16px}
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-note{margin-bottom:4px;line-height:1.2}
.menu-publishing-view .mp-sheet-matrix.density-tightest{margin-top:7px;padding-top:5px;padding-bottom:5px}
.menu-publishing-view .mp-sheet-matrix.density-tightest article{line-height:1.25}
.menu-publishing-view .mp-sheet-section.density-compact{margin-bottom:10px}
.menu-publishing-view .mp-sheet-section.density-compact h2{margin-bottom:5px;font-size:16px}
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-note{margin-bottom:4px;line-height:1.15}
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item{display:block;margin-bottom:4px;font-size:8px;line-height:1.2}
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item>div{display:block}
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item strong,.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item p{display:inline;margin:0;font-size:8px;line-height:1.2}
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item strong{margin-right:5px}
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item>span{float:right;margin-left:7px;font-size:8px}
.menu-publishing-view .mp-sheet-item[draggable],.menu-publishing-view .mp-sheet-matrix article[draggable]{cursor:grab;border-radius:4px;transition:background .12s,box-shadow .12s}
.menu-publishing-view .mp-sheet-item[draggable]:hover,.menu-publishing-view .mp-sheet-matrix article[draggable]:hover{background:rgba(57,118,107,.09);box-shadow:0 0 0 3px rgba(57,118,107,.09)}
.menu-publishing-view .is-dragging{opacity:.42}
.menu-publishing-view .is-drop-target{background:rgba(57,118,107,.14)!important;box-shadow:inset 0 0 0 2px var(--accent)!important}
/* Menu publishing */
.menu-publishing-view{--mp-paper:#eee7d8;--mp-ink:#18241b;--mp-green:#24452c}.menu-publishing-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;margin-bottom:10px}.menu-publishing-toolbar h2{margin:2px 0}.menu-publishing-toolbar .panel-actions{justify-content:flex-end}.menu-publishing-page-tabs{display:flex;gap:4px;width:max-content;margin:0 0 10px;padding:3px;border:1px solid var(--border-color);border-radius:10px;background:var(--surface-muted)}.menu-publishing-page-tabs button{min-width:80px;padding:7px 14px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font-weight:800}.menu-publishing-page-tabs button.is-active{background:var(--accent);color:#fff}.menu-publishing-workspace{display:grid;grid-template-columns:minmax(480px,1.08fr) minmax(390px,.92fr);gap:14px;align-items:start}.menu-publishing-editor{overflow:hidden}.menu-publishing-settings{display:grid;grid-template-columns:1fr 1fr 120px 130px;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-color)}.menu-publishing-settings .mp-wide{grid-column:span 2}.menu-publishing-settings label[hidden]{display:none}.menu-publishing-sections{padding:10px}.mp-section-editor{margin-bottom:10px;border:1px solid var(--border-color);border-radius:10px;overflow:hidden;background:var(--surface)}.mp-section-head{display:grid;grid-template-columns:26px minmax(120px,1fr) auto 96px 30px;grid-template-rows:auto auto;align-items:center;gap:6px 7px;padding:8px 9px;background:var(--surface-muted)}.mp-section-order{grid-row:1/3;display:grid;gap:3px}.mp-section-order button,.mp-item-actions button,.mp-list-actions button{min-height:25px;padding:3px 7px;border:1px solid var(--border-color);border-radius:6px;background:var(--surface);color:var(--text-color);font-size:11px;font-weight:750}.mp-section-moves{grid-column:2/-1;grid-row:2;display:flex;justify-content:flex-end;gap:4px}.mp-section-moves button{min-height:26px;padding:3px 7px;border:1px solid var(--border-color);border-radius:6px;background:var(--surface);color:var(--text-color);font-size:10px;font-weight:750}.mp-section-note{padding:0 9px 7px;background:var(--surface-muted)}.mp-section-note input{padding:6px 8px}.mp-items{padding:0 9px}.mp-item-editor{position:relative;padding:8px 0;border-top:1px solid var(--border-color)}.mp-item-editor.is-selected{margin:0 -5px;padding:8px 5px;background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 4px 0 0 var(--accent)}.mp-item-summary{display:grid;grid-template-columns:minmax(130px,1fr) auto auto;align-items:end;gap:7px}.mp-item-states,.mp-item-actions{display:flex;align-items:center;gap:6px}.mp-item-states label{display:flex;align-items:center;gap:4px;white-space:nowrap}.mp-item-states input{width:auto}.mp-86-control{color:#b14238}.mp-item-actions{padding-bottom:2px}.mp-item-editor textarea{min-height:46px}.mp-item-editor details{margin-top:4px}.mp-item-editor summary{width:max-content;padding:3px 5px;color:var(--text-muted);font-size:10px;font-weight:800;cursor:pointer}.mp-item-details{display:grid;grid-template-columns:100px 1fr;gap:7px;padding:8px;border-radius:8px;background:var(--surface-muted)}.mp-add-actions{display:flex;align-items:center;gap:6px;padding:8px 0}.mp-add-actions span{color:var(--text-muted);font-size:10px}.menu-publishing-preview-shell{position:sticky;top:92px;padding:10px;border:1px solid var(--border-color);border-radius:12px;background:var(--surface-muted)}.menu-publishing-preview-head{display:flex;justify-content:space-between;padding:2px 2px 9px;color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.menu-publishing-preview-stage{position:relative;width:100%;overflow:hidden;background:#cbd3ce}.mp-menu-sheet{position:absolute;top:0;left:0;display:flex;flex-direction:column;width:850px;height:1100px;min-height:1100px;padding:34px 38px 22px;overflow:hidden;transform-origin:top left;color:var(--mp-ink);border:1px solid #c5bca8;background-color:var(--mp-paper);background-image:radial-gradient(rgba(55,61,43,.09) .6px,transparent .8px),radial-gradient(rgba(117,87,51,.055) .6px,transparent .8px);background-position:0 0,4px 5px;background-size:7px 7px,9px 9px;font-family:"Courier New",monospace}.mp-menu-sheet[data-orientation="landscape"]{width:1100px;height:850px;min-height:850px}.mp-sheet-brand{display:grid;grid-template-columns:1fr 100px;align-items:stretch;gap:18px;padding:0 7px 12px;border-bottom:2px solid #25452d}.mp-sheet-brand>div:first-child>strong{display:block;color:#173d24;font:900 58px/1 Georgia,serif;letter-spacing:.16em;text-shadow:1px 1px 0 #bdb59f}.mp-sheet-brand small{display:block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.11em}.mp-logo-lockup{display:grid;grid-template-rows:auto 1fr auto;justify-items:center}.mp-logo-lockup>span{align-self:end;margin-bottom:-9px;color:#294832;font-size:8px;font-weight:700;white-space:nowrap}.mp-triangle-mark{position:relative;width:70px;height:55px}.mp-triangle-mark i{position:absolute;bottom:0;width:0;height:0;border-left:19px solid transparent;border-right:19px solid transparent;border-bottom:39px solid #284a31}.mp-triangle-mark i:nth-child(1){left:0}.mp-triangle-mark i:nth-child(2){left:17px;border-bottom-color:#3f6547}.mp-triangle-mark i:nth-child(3){left:34px;border-bottom-color:#1c3825}.mp-sheet-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1;min-height:0;margin-top:13px;text-align:left}.mp-sheet-column{min-width:0;padding:0 13px;border-left:1px solid #5e675d;overflow:visible}.mp-sheet-column:first-child{padding-left:7px;border-left:0}.mp-sheet-section{margin:0 0 19px}.mp-sheet-section.boxed{padding:9px;border:1px solid #5e675d}.mp-sheet-section.nested{padding-top:13px;border-top:1px solid #5e675d}.mp-sheet-section h2,.mp-sheet-matrix h2{margin:0 0 9px;color:var(--mp-green);font:700 18px/1.1 Georgia,serif;letter-spacing:.1em;text-transform:uppercase}.mp-sheet-note{margin:-3px 0 9px;font-size:9px;line-height:1.35;text-align:center}.mp-sheet-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:8px;margin:0 0 10px;break-inside:avoid;cursor:pointer}.mp-sheet-item strong{display:block;font-size:11px;line-height:1.2;text-transform:uppercase}.mp-sheet-item p{margin:3px 0 0;font-size:9px;line-height:1.4}.mp-sheet-item>span{font-size:10px;white-space:nowrap}.mp-sheet-item.is-selected{outline:2px solid rgba(57,118,107,.72);outline-offset:2px;background:rgba(57,118,107,.1)}.mp-sheet-item.is-86d::after,.mp-sheet-matrix article.is-86d::after{content:"86'D";position:absolute;z-index:2;top:50%;left:50%;padding:1px 6px;border:2px solid #a12622;border-radius:3px;color:#a12622;background:rgba(238,231,216,.8);font:900 15px/1 "Courier New",monospace;letter-spacing:.08em;transform:translate(-50%,-50%) rotate(-9deg)}.mp-sheet-matrix{grid-column:1/-1;margin:10px 7px 0;padding:9px 10px;border:1px solid #5e675d}.mp-sheet-matrix>p{text-align:center;font-size:8px}.mp-sheet-matrix>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.mp-sheet-matrix article{position:relative;padding:0 7px;border-left:1px solid #7b8077;font-size:7px}.mp-sheet-matrix article:first-child{border:0}.mp-sheet-matrix article span{display:block}.mp-feature-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;grid-column:1/-1;width:68%;margin:13px auto 0}.mp-sheet-feature{padding:11px;border:1px solid #5e675d;text-align:center}.mp-sheet-feature strong{display:block;color:var(--mp-green);font:700 13px Georgia,serif}.mp-menu-sheet>footer{flex:0 0 auto;margin-top:8px;text-align:center;font-size:7px}.menu-publishing-overflow{margin:8px 0 0;padding:8px;border:1px solid #b8792e;border-radius:7px;color:#805317;background:#fff5de;font-size:11px;font-weight:800}.mp-list-modal{width:min(760px,96vw);max-height:84vh;overflow:auto}.mp-modal-search,.mp-version-save{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-color)}.mp-version-list{padding:8px}.mp-list-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--border-color)}.mp-list-row small{display:block;color:var(--text-muted)}.mp-list-actions{display:flex;justify-content:flex-end;gap:4px;flex-wrap:wrap}.mp-print-backdrop{z-index:500}.mp-print-dialog{width:min(1180px,98vw);max-width:none;max-height:none;background:var(--surface)}.mp-print-pages{display:grid;gap:24px;justify-items:center}.mp-print-page{position:relative;width:min(850px,100%);height:auto;min-height:0;aspect-ratio:8.5/11;transform:none;box-shadow:0 14px 40px rgba(20,27,23,.28)}.mp-print-page[data-orientation="landscape"]{width:min(1100px,100%);height:auto;min-height:0;aspect-ratio:11/8.5}.mp-print-page .mp-sheet-brand>div:first-child>strong{font-size:45px}.mp-print-page .mp-sheet-section h2{font-size:16px}.mp-print-page .mp-sheet-item strong{font-size:10px}.mp-print-page .mp-sheet-item p{font-size:8px}.mp-print-page .mp-sheet-item>span{font-size:9px}@media(max-width:1050px){.menu-publishing-workspace{grid-template-columns:1fr}.menu-publishing-preview-shell{position:static}.menu-publishing-toolbar{align-items:flex-start;flex-direction:column}.menu-publishing-toolbar .panel-actions{justify-content:flex-start}.menu-publishing-settings{grid-template-columns:1fr 1fr}}@media(max-width:680px){.menu-publishing-settings{grid-template-columns:1fr}.menu-publishing-settings .mp-wide{grid-column:auto}.mp-section-head{grid-template-columns:26px 1fr 30px}.mp-section-head>select{grid-column:2;grid-row:2}.mp-section-moves{grid-column:2/-1;grid-row:3;justify-content:flex-start;flex-wrap:wrap}.mp-item-summary{grid-template-columns:1fr auto}.mp-item-states{grid-column:1}.mp-item-actions{grid-column:2;grid-row:2}.mp-list-row{grid-template-columns:1fr}.mp-list-actions{justify-content:flex-start}}@page mpPortrait{size:letter portrait;margin:0}@page mpLandscape{size:letter landscape;margin:0}@media print{body:has(#mpPrintModal:not([hidden]))>*:not(#mpPrintModal){display:none!important}#mpPrintModal{position:static!important;display:block!important;padding:0!important;background:none!important}#mpPrintModal .mp-print-toolbar{display:none!important}#mpPrintModal .mp-print-dialog{width:auto!important;max-width:none!important;padding:0!important;border:0!important;box-shadow:none!important}#mpPrintModal .mp-print-pages{display:block!important}.mp-print-page{page:mpPortrait;width:8.5in!important;height:11in!important;min-height:11in!important;aspect-ratio:auto!important;break-after:page;box-shadow:none!important}.mp-print-page[data-orientation="landscape"]{page:mpLandscape;width:11in!important;height:8.5in!important;min-height:8.5in!important}.mp-print-page:last-child{break-after:auto}.mp-sheet-item.is-selected{outline:0;background:transparent}}
.invoice-reread-modal {
  width: min(980px, 96vw);
  max-height: min(90vh, 820px);
  overflow: hidden;
}

.invoice-reread-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--raised);
}

.invoice-reread-results {
  display: grid;
  gap: 9px;
  padding: 16px 20px;
  max-height: 56vh;
  overflow: auto;
}

.invoice-reread-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 11px;
  background: var(--paper);
  cursor: pointer;
}

.invoice-reread-row.is-changed { border-left-color: var(--gold); }
.invoice-reread-row input { width: 18px; height: 18px; }
.invoice-reread-row span { min-width: 0; }
.invoice-reread-row strong,
.invoice-reread-row small { display: block; }
.invoice-reread-row small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.invoice-reread-row em {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .invoice-reread-modal { width: 100vw; max-height: 100dvh; }
  .invoice-reread-results { max-height: 62dvh; padding: 12px; }
  .invoice-reread-row { grid-template-columns: auto minmax(0, 1fr); }
  .invoice-reread-row em { grid-column: 2; justify-self: start; }
}

/* Safari: exactly one physical Letter sheet per menu side. */
@media print {
  #mpPrintModal .mp-print-page {
    width: calc(8.5in - 2px) !important;
    height: calc(11in - 2px) !important;
    min-height: calc(11in - 2px) !important;
    max-height: calc(11in - 2px) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }
  #mpPrintModal .mp-print-page[data-orientation="landscape"] {
    width: calc(11in - 2px) !important;
    height: calc(8.5in - 2px) !important;
    min-height: calc(8.5in - 2px) !important;
    max-height: calc(8.5in - 2px) !important;
  }
  #mpPrintModal .mp-print-page + .mp-print-page {
    break-before: page !important;
    page-break-before: always !important;
  }
}

/* Final V5.02 overrides live last so legacy invoice layouts cannot reopen the permanent preview column. */
body #invoice .intake-grid { display: block !important; grid-template-columns: 1fr !important; }
body #invoice .intake-grid > .panel { width: 100% !important; min-height: 0 !important; }
body #invoice .invoice-direction-switch { display: flex !important; gap: 6px !important; padding: 5px !important; }
body #invoice .invoice-direction-card { display: flex !important; flex: 1 1 0 !important; min-height: 36px !important; padding: 7px 10px !important; gap: 6px !important; }
body #invoice .invoice-direction-card small { display: none !important; }
body #invoice .invoice-workflow-strip { gap: 4px !important; padding: 4px !important; }
body #invoice .invoice-workflow-strip article { min-height: 30px !important; padding: 5px 7px !important; gap: 6px !important; }
body #invoice .invoice-workflow-strip article small { display: none !important; }
body #invoice .invoice-guided-flow { min-height: 0 !important; padding: 10px 12px !important; }
body #invoice .drop-zone { min-height: 92px !important; padding: 16px !important; }
body > #invoiceSourceToolsModal:not([hidden]),
body #invoiceSourceToolsModal:not([hidden]) { display: grid !important; z-index: 2147483000 !important; }

@media (max-width: 760px) {
  body #invoice .invoice-direction-switch { overflow-x: auto; justify-content: flex-start; }
  body #invoice .invoice-direction-card { flex: 0 0 auto !important; }
  body #invoice .invoice-direction-card span { display: none !important; }
  body #invoice .invoice-workflow-strip article strong { display: none !important; }
}

/* V5.06 menu readability: compact names, larger guest-facing detail. */
.menu-publishing-view .mp-sheet-section { margin-bottom: 14px; }
.menu-publishing-view .mp-sheet-section h2,
.menu-publishing-view .mp-sheet-matrix h2 { margin-bottom: 7px; }
.menu-publishing-view .mp-sheet-item { margin-bottom: 7px; gap: 6px; }
.menu-publishing-view .mp-sheet-item strong,
.menu-publishing-view .mp-print-page .mp-sheet-item strong {
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: .015em;
}
.menu-publishing-view .mp-sheet-item p,
.menu-publishing-view .mp-print-page .mp-sheet-item p {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
}
.menu-publishing-view .mp-sheet-item > span,
.menu-publishing-view .mp-print-page .mp-sheet-item > span {
  font-size: 10px;
  line-height: 1.2;
}
.menu-publishing-view .mp-sheet-note { margin-bottom: 7px; font-size: 10px; line-height: 1.25; }
.menu-publishing-view .mp-sheet-matrix > p { font-size: 9px; line-height: 1.2; }
.menu-publishing-view .mp-sheet-matrix article { font-size: 8.5px; line-height: 1.2; }
.menu-publishing-view .mp-menu-sheet > footer { font-size: 8px; }
.menu-publishing-view .mp-sheet-section.density-tight .mp-sheet-item,
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-item { margin-bottom: 5px; }
.menu-publishing-view .mp-sheet-section.density-tight .mp-sheet-item p,
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-item p { font-size: 9.5px; line-height: 1.2; }
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item { margin-bottom: 4px; }
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item strong { font-size: 8.5px; line-height: 1.15; }
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item p { font-size: 9px; line-height: 1.15; }
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item > span { font-size: 9px; }

/* V5.08 connected invoice progress rail: clear without returning to oversized cards. */
body #invoice .invoice-workflow-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
  gap: 0 !important;
  padding: 5px !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
body #invoice .invoice-workflow-strip article {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px !important;
  min-height: 48px !important;
  padding: 7px 9px !important;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
body #invoice .invoice-workflow-strip article::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  left: 36px;
  width: calc(100% - 27px);
  height: 2px;
  background: var(--line);
}
body #invoice .invoice-workflow-strip article:last-child::after { display: none; }
body #invoice .invoice-workflow-strip article > span {
  position: relative;
  z-index: 2;
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
}
body #invoice .invoice-workflow-strip article strong {
  display: block !important;
  align-self: end;
  font-size: 12px;
  line-height: 1.15;
}
body #invoice .invoice-workflow-strip article small {
  display: block !important;
  align-self: start;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #invoice .invoice-workflow-strip article.is-complete::after { background: var(--accent); }
body #invoice .invoice-workflow-strip article.is-complete > span { border-color: var(--accent); background: var(--accent); color: #fff; }
body #invoice .invoice-workflow-strip article.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
body #invoice .invoice-workflow-strip article.is-active > span { border-color: var(--accent); color: var(--accent-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
body #invoice .invoice-workflow-strip article.is-active strong { color: var(--accent-dark); }

@media (max-width: 760px) {
  body #invoice .invoice-workflow-strip {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  body #invoice .invoice-workflow-strip article { flex: 0 0 142px; scroll-snap-align: start; }
}

/* V5.09 invoice workspace destinations: compact, descriptive, and visibly actionable. */
body #invoice .invoice-direction-switch {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 10px 0 12px;
  padding: 6px !important;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--raised);
  overflow: visible;
}
body #invoice .invoice-direction-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-content: stretch;
  gap: 1px 8px !important;
  min-width: 0;
  min-height: 70px !important;
  padding: 9px 32px 9px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 9px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  box-shadow: none;
}
body #invoice .invoice-direction-card::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 11px;
  translate: 0 -50%;
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
  transition: translate .16s ease, color .16s ease;
}
body #invoice .invoice-direction-card:hover {
  border-color: var(--line) !important;
  background: var(--paper);
}
body #invoice .invoice-direction-card:hover::after { translate: 2px -50%; color: var(--accent-dark); }
body #invoice .invoice-direction-card span,
body #invoice .invoice-direction-card strong,
body #invoice .invoice-direction-card small {
  grid-column: 1;
  display: block !important;
  min-width: 0;
}
body #invoice .invoice-direction-card span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.1;
  text-transform: uppercase;
}
body #invoice .invoice-direction-card strong {
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.2;
}
body #invoice .invoice-direction-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #invoice .invoice-direction-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  box-shadow: inset 3px 0 0 var(--accent), 0 3px 10px rgba(24, 75, 61, .08);
}
body #invoice .invoice-direction-card.is-active span,
body #invoice .invoice-direction-card.is-active strong,
body #invoice .invoice-direction-card.is-active::after { color: var(--accent-dark); }
body #invoice .invoice-direction-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  body #invoice .invoice-direction-switch { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
  body #invoice .invoice-direction-switch {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  body #invoice .invoice-direction-card {
    flex: 0 0 178px !important;
    min-height: 62px !important;
    scroll-snap-align: start;
  }
  body #invoice .invoice-direction-card span { display: block !important; }
}

/* V5.10 invoice drop confirmation: visibly received, checked, and ready. */
body #invoice .invoice-upload-drop {
  position: relative;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body #invoice .invoice-upload-drop::before {
  content: "+";
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  color: var(--accent-dark);
  background: var(--paper);
  font-size: 20px;
  font-weight: 800;
}
body #invoice .invoice-upload-drop[data-upload-state="checking"]::before {
  content: "";
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  border-top-color: var(--accent);
  animation: invoice-drop-spin .75s linear infinite;
}
body #invoice .invoice-upload-drop[data-upload-state="ready"] {
  border: 2px solid var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 13%, var(--paper)) !important;
  box-shadow: 0 8px 22px rgba(25, 94, 74, .12), inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
body #invoice .invoice-upload-drop[data-upload-state="ready"]::before {
  content: "\2713";
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  font-size: 18px;
}
body #invoice .invoice-upload-drop[data-upload-state="error"] {
  border-color: var(--danger, #b73b32) !important;
  background: color-mix(in srgb, var(--danger, #b73b32) 7%, var(--paper)) !important;
}
body #invoice .invoice-upload-drop[data-upload-state="error"]::before {
  content: "!";
  border-color: var(--danger, #b73b32);
  color: var(--danger, #b73b32);
}
body #invoice .invoice-upload-drop > span {
  justify-items: start;
  min-width: 0;
  text-align: left;
}
body #invoice .invoice-upload-drop > span strong,
body #invoice .invoice-upload-drop > span small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #invoice .invoice-drop-ready {
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-dark);
  font-size: 10px;
  letter-spacing: .025em;
  line-height: 1.2;
}
@keyframes invoice-drop-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  body #invoice .invoice-upload-drop[data-upload-state="checking"]::before { animation: none; }
}

/* V5.13 one-window invoice final check with compact inline identity edits. */
.invoice-save-quick-edits {
  display: grid;
  gap: 9px;
  margin: 0 22px 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}
.invoice-save-quick-edits[hidden] { display: none !important; }
.invoice-save-quick-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.invoice-save-quick-heading strong { font-size: 13px; }
.invoice-save-quick-heading small { color: var(--muted); font-size: 10px; }
.invoice-save-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.invoice-save-quick-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.invoice-save-quick-grid label > span { color: var(--accent-dark); font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.invoice-save-quick-grid label > small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-save-quick-grid input { min-height: 34px; font-weight: 750; }
@media (max-width: 680px) {
  .invoice-save-quick-edits { margin-inline: 18px; }
  .invoice-save-quick-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .invoice-save-quick-grid { grid-template-columns: 1fr; }
}

/* V5.14 deliberate end-of-batch action. */
body #invoice .invoice-complete-intake {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  font-weight: 850;
}
body #invoice .invoice-complete-intake:hover {
  border-color: var(--accent-dark);
  color: #fff;
  background: var(--accent-dark);
}

/* V5.15 visible learn-once feedback in invoice review. */
body #invoice .invoice-learning-applied {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #invoice .invoice-code-review {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--warning, #b16a12) 42%, var(--line));
  border-radius: 999px;
  color: var(--warning-dark, #78450b);
  background: color-mix(in srgb, var(--warning, #b16a12) 10%, var(--paper));
  font-size: 9px;
  font-weight: 850;
  line-height: 1.15;
}

/* V5.17 menu type hierarchy: the original 10px item name is the minimum. */
.menu-publishing-view .mp-sheet-section { margin-bottom: 12px; }
.menu-publishing-view .mp-sheet-section h2,
.menu-publishing-view .mp-sheet-matrix h2 { margin-bottom: 6px; font-size: 19px; line-height: 1.05; }
.menu-publishing-view .mp-sheet-item { margin-bottom: 6px; gap: 5px; }
.menu-publishing-view .mp-sheet-item strong,
.menu-publishing-view .mp-print-page .mp-sheet-item strong,
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item strong {
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .012em;
}
.menu-publishing-view .mp-sheet-item p,
.menu-publishing-view .mp-print-page .mp-sheet-item p { margin-top: 1px; font-size: 10.75px; line-height: 1.18; }
.menu-publishing-view .mp-sheet-item > span,
.menu-publishing-view .mp-print-page .mp-sheet-item > span { font-size: 10.75px; line-height: 1.1; }
.menu-publishing-view .mp-sheet-note { margin-bottom: 6px; font-size: 10.5px; line-height: 1.18; }
.menu-publishing-view .mp-sheet-matrix > p { font-size: 10px; line-height: 1.12; }
.menu-publishing-view .mp-sheet-matrix article { font-size: 10px; line-height: 1.12; }
.menu-publishing-view .mp-menu-sheet > footer { font-size: 10px; line-height: 1.1; }
.menu-publishing-view .mp-sheet-brand small { font-size: 12px; }
.menu-publishing-view .mp-logo-lockup > span { font-size: 10px; }
.menu-publishing-view .mp-sheet-section.density-tight .mp-sheet-item,
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-item,
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item { margin-bottom: 3px; }
.menu-publishing-view .mp-sheet-section.density-tight .mp-sheet-item p,
.menu-publishing-view .mp-sheet-section.density-tightest .mp-sheet-item p,
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item p { font-size: 10.25px; line-height: 1.1; }
.menu-publishing-view .mp-sheet-section.density-compact .mp-sheet-item > span { font-size: 10.25px; line-height: 1.1; }
.menu-publishing-view .mp-sheet-section.density-tightest h2,
.menu-publishing-view .mp-sheet-section.density-compact h2 { font-size: 17px; line-height: 1.05; }

/* V5.18 full-sheet menu artwork prints even when browser backgrounds are off. */
.menu-publishing-view .mp-menu-sheet { isolation: isolate; background: #eee7d8; }
.menu-publishing-view .mp-paper-artwork {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.menu-publishing-view .mp-menu-sheet > .mp-sheet-brand,
.menu-publishing-view .mp-menu-sheet > .mp-sheet-columns,
.menu-publishing-view .mp-menu-sheet > footer { position: relative; z-index: 1; }
@media print {
  #mpPrintModal .mp-paper-artwork { display: block !important; visibility: visible !important; }
}

/* Unified invoice intake: saved work and page assignment share one compact pattern. */
.invoice-direction-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bulk-page-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bulk-page-summary button { display: inline-flex; align-items: center; gap: 7px; min-height: 0; padding: 5px 9px 5px 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); }
.bulk-page-thumbnail { width: 42px; height: 54px; display: block; object-fit: cover; object-position: top center; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.bulk-page-chip { display: grid; grid-template-columns: auto 42px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; }
.bulk-page-chip > span { min-width: 0; }
.bulk-page-chip small { display: block; }
@media (max-width: 720px) {
  .invoice-direction-switch { grid-template-columns: 1fr; }
  .bulk-page-thumbnail { width: 36px; height: 46px; }
  .bulk-page-chip { grid-template-columns: auto 36px minmax(0, 1fr); }
}

/* V5.27 continuity pass: one permanent owner for every invoice workspace. */
body #invoice .invoice-direction-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body #invoice .invoice-space.is-active {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
}
body #invoice:not([data-active-invoice-space="inbox"]) #invoiceGuidedFlow,
body #invoice:not([data-active-invoice-space="inbox"]) .invoice-intake-tabs,
body #invoice:not([data-active-invoice-space="inbox"]) #invoiceSourceToolsModal,
body #invoice:not([data-intake-stage="upload"]) .invoice-intake-tabs {
  display: none !important;
}
body #invoice[data-intake-stage="upload"][data-intake-mode="new"] #extractAi {
  display: none !important;
}
body #invoice[data-intake-stage="upload"][data-intake-mode="resume"] #invoiceDraftsPanel {
  margin-top: 0;
}
body #invoice[data-intake-stage="upload"] .invoice-guided-flow {
  margin-bottom: 0;
}
body #invoice .invoice-intake-tabs {
  margin: 8px 0 10px;
}
@media (max-width: 760px) {
  body #invoice .invoice-direction-switch {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    overflow-x: auto;
  }
  body #invoice .invoice-direction-card {
    min-width: 150px !important;
  }
}