/* Palette, radius and type live in css/brand-tokens.css (WORK-1053), which
 * loads before this file. They are deliberately NOT redefined here: this
 * :root block loads later, so any colour declared here would silently win
 * over the brand and the token file would look applied without being applied.
 *
 * What stays is layout and elevation, which the brand does not own. */
:root {
  --red-600: #dc2626;
  --red-500: #ef4444;
  --red-100: #fee2e2;
  --green-500: #22c55e;
  --green-100: #dcfce7;

  --sidebar-width: 250px;
  /* Width of the icon rail when the navigation is collapsed (WORK-1053). */
  --rail-width: 64px;
  /* The WORK-1053 top bar. #content reserves this below. */
  --header-height: 54px;
  --shadow: 0 1px 3px rgba(17, 24, 39, 0.1);
  --shadow-lg: 0 4px 12px rgba(17, 24, 39, 0.15);

  /* Shared content max-width for detail views and wizards. Edit here to
   * resize every primary content surface in one place. */
  --app-content-max: 1400px;

  font-size: 14px;
  color: var(--gray-800);
}

/* Journal staging */
.jst-page { display: grid; gap: 1rem; min-width: 0; }
.jst-header, .jst-actions, .jst-bulkbar, .jst-dialog-actions { display: flex; align-items: center; gap: .65rem; }
.jst-header { justify-content: space-between; }
.jst-header h1 { margin: 0; font-size: 1.55rem; letter-spacing: 0; }
.jst-header p { margin: .3rem 0 0; color: var(--wa-color-text-quiet); }
.jst-filters { display: grid; grid-template-columns: repeat(6, minmax(8rem, 1fr)); gap: .75rem; align-items: end; }
.jst-bulkbar { min-height: 3rem; padding: .55rem .75rem; border-block: 1px solid var(--wa-color-surface-border); }
.jst-bulkbar span { margin-right: auto; color: var(--wa-color-text-quiet); font-weight: 600; }
.jst-content, .jst-table-wrap { min-width: 0; }
.jst-table-wrap { overflow-x: auto; }
.jst-table { width: 100%; }
.jst-table td { vertical-align: middle; }
.jst-table td code, .jst-table td small, .jst-table td span { display: block; }
.jst-table td code { margin-top: .25rem; color: var(--wa-color-text-quiet); }
.jst-table td small { margin-top: .2rem; color: var(--wa-color-text-quiet); }
.jst-select-col { width: 2.5rem; }
.jst-money { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.jst-muted, .jst-loading { color: var(--wa-color-text-quiet); }
.jst-blocker-text { max-width: 20rem; color: var(--wa-color-danger-30); overflow-wrap: anywhere; }
.jst-loading { padding: 2rem; text-align: center; }
.jst-empty { display: grid; place-items: center; gap: .65rem; min-height: 13rem; color: var(--wa-color-text-quiet); border-block: 1px solid var(--wa-color-surface-border); }
.jst-empty wa-icon { font-size: 1.5rem; }
.jst-row-actions { display: flex; gap: .1rem; justify-content: flex-end; }
.jst-drawer { --size: min(46rem, 94vw); }
.jst-detail-body { display: grid; gap: 1rem; }
.jst-detail-body h3 { margin: .25rem 0 0; font-size: 1rem; letter-spacing: 0; }
.jst-detail-body dl { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .45rem .85rem; margin: 0; }
.jst-detail-body dt { color: var(--wa-color-text-quiet); }
.jst-detail-body dd { margin: 0; overflow-wrap: anywhere; }
.jst-detail-body td small { display: block; color: var(--wa-color-text-quiet); }
.jst-detail-summary { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; align-items: center; }
.jst-detail-summary strong { justify-self: end; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.jst-detail-summary span { grid-column: 1 / -1; color: var(--wa-color-text-quiet); }

@media (max-width: 900px) {
  .jst-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jst-header { align-items: flex-start; }
}

@media (max-width: 560px) {
  .jst-header { display: grid; }
  .jst-actions { justify-content: flex-end; }
  .jst-filters { grid-template-columns: 1fr; }
  .jst-bulkbar { flex-wrap: wrap; }
  .jst-detail-body dl { grid-template-columns: 1fr; }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--gray-50);
  min-height: 100vh;
}

#app {
  display: flex;
  min-height: 100vh;
}

#content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: var(--header-height) 0 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

.btn-primary {
  background: var(--primary-600);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-700);
}

.btn-secondary {
  background: var(--gray-200);
  color: var(--gray-700);
}
.btn-secondary:hover {
  background: var(--gray-300);
}

.btn-danger {
  background: var(--red-500);
  color: white;
}
.btn-danger:hover {
  background: #dc2626;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

input, select, textarea {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-100);
}

input.error {
  border-color: var(--red-500);
  box-shadow: 0 0 0 2px var(--red-100);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-100);
  color: var(--primary-700);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tag .remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
}
.tag .remove:hover {
  opacity: 1;
}

/* Button styled as an inline anchor — used where action targets used to
 * be <a href="javascript:void(0)"> but had to become real <button>s for
 * the H.2 CSP tightening (no `'unsafe-inline'` on script-src). */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover {
  color: #1d4ed8;
}
.link-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hover states that were previously implemented with `onmouseover` /
 * `onmouseout` inline handlers. Moved to pure CSS for §3.3 H.2 (no
 * `'unsafe-inline'` on `script-src`, which would otherwise block these
 * attributes). */
.kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.vendor-bill-link:hover {
  background: var(--gray-50);
}

/* datetime-input component — see components/datetime-input.js */
.datetime-input-block {
  background: var(--wa-color-surface-raised, #f9fafb);
  border: 1px solid var(--wa-color-surface-border, #e5e7eb);
  border-radius: 6px;
  padding: 0.75rem;
}
.datetime-input-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--wa-color-text-normal, #374151);
}
.datetime-input-label .required {
  color: #ef4444;
}
.datetime-input-help {
  font-size: 0.78rem;
  color: var(--wa-color-text-muted, #6b7280);
  margin-bottom: 0.5rem;
}
.datetime-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.datetime-input-row wa-input {
  flex: 1;
  min-width: 220px;
}
.datetime-input-quickset {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.datetime-input-quickset .quickset-chip {
  font-family: inherit;
}
.datetime-input-quickset .quickset-chip::part(button) {
  background: white;
  border: 1px solid #d1d5db;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  color: #374151;
  min-height: auto;
}
.datetime-input-quickset .quickset-chip::part(label) {
  line-height: 1.2;
}
.datetime-input-quickset .quickset-chip:hover::part(button) {
  background: #f3f4f6;
}
.datetime-input-error {
  color: #b91c1c;
  font-size: 0.78rem;
  margin-top: 0.4rem;
}
.datetime-input-systemstamp {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb;
  font-style: italic;
}

/* ====================================================
 * Wizard view — mashing & fermentation
 * ==================================================== */
.wizard-page {
  width: 100%;
  min-width: 0;
  padding: 2rem 1rem;
  max-width: var(--app-content-max);
  margin: 0 auto;
}
.wizard-card wa-callout { padding: var(--wa-space-m); }
.wizard-message { margin-bottom: var(--wa-space-m); }
.wizard-card #lot-alloc-section.is-hidden,
.wizard-card #ferm-capacity-panel.is-hidden { display: none; }
.wizard-steps {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #6b7280;
  white-space: nowrap;
}
.wizard-step .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
}
.wizard-step.done .num { background: #10b981; color: white; }
.wizard-step.current { color: #111827; font-weight: 600; }
.wizard-step.current .num { background: #2563eb; color: white; }
.wizard-steps .sep { color: #d1d5db; padding: 0 0.25rem; }

/* shared layout helpers */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.field-row.single { grid-template-columns: 1fr; }
.field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #374151;
}
.field-label .required { color: #ef4444; }
.field-help {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Mode toggle (step 1) */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
.mode-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  user-select: none;
}
.mode-card.selected {
  border-color: #2563eb;
  background: #eff6ff;
}
.mode-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f9fafb;
}
.mode-card h4 { margin: 0 0 0.35rem 0; font-size: 0.95rem; }
.mode-card p { margin: 0; font-size: 0.8rem; color: #6b7280; }

/* Recipe picker (step 1) */
.filter-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.filter-chips .chip {
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: white;
  border: 1px solid #d1d5db;
  cursor: pointer;
  color: #374151;
}
.filter-chips .chip.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}
.search-results {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  max-height: 380px;
  overflow-y: auto;
}
.search-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}
.search-row:hover, .search-row.selected { background: #eff6ff; }
.search-row.selected { border-color: #2563eb; }
.search-row .primary {
  font-weight: 600;
  font-size: 0.9rem;
  color: #111827;
}
.search-row .secondary {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 0.15rem;
}
.search-row .badges {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;
}
.search-empty {
  padding: 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.85rem;
}

/* Review step */
.review-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.88rem;
}
.review-grid dt { color: #6b7280; }
.review-grid dd { margin: 0; font-weight: 500; }
.check-ok { color: #10b981; font-weight: bold; }
.check-warn { color: #f59e0b; font-weight: bold; }

/* Execute step (simple + detailed) */
.simple-action-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.simple-action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.simple-action-row.done {
  background: #f0fdf4;
  border-color: #10b981;
}
.simple-action-row .name {
  font-weight: 600;
  font-size: 0.9rem;
}
.step-panel {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.step-panel.current {
  border-color: #2563eb;
  background: #eff6ff;
}
.step-panel.done {
  background: #f0fdf4;
  border-color: #10b981;
}
.step-panel h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.step-panel .target {
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 0.6rem;
}

/* Handoff card */
.handoff-card {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
}
.handoff-card h2 { margin: 0 0 0.5rem 0; }
.handoff-card p { color: #4b5563; margin: 0 0 1.5rem 0; }
.handoff-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* CRM Activity Center */
.activity-center {
  width: min(100%, var(--app-content-max));
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 18px;
}

.activity-center-header,
.activity-toolbar,
.activity-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.activity-center-header h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
}

.activity-center-subtitle,
.activity-error,
.activity-empty,
.activity-table-note {
  color: var(--gray-600);
  font-size: 13px;
}

.activity-center-actions,
.activity-toolbar-actions,
.activity-scope-tabs,
.activity-dialog-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.activity-toolbar {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: white;
  padding: 12px;
}

.activity-toolbar-title {
  font-weight: 700;
  font-size: 14px;
  padding-top: 7px;
}

.activity-list {
  display: grid;
  gap: 10px;
}

.activity-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: white;
  padding: 14px;
}

.activity-card-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.activity-card-main h2 {
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
}

.activity-card-main p {
  margin: 0;
  color: var(--gray-700);
  white-space: pre-wrap;
}

.activity-card-topline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--gray-500);
  font-size: 12px;
}

.activity-card-side {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: 150px;
}

.assignee-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.assignee-chip span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #edf7f2;
  color: #166044;
  font-size: 11px;
  font-weight: 800;
}

.assignee-chip strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--gray-700);
}

.activity-table-wrap {
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: white;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

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

.activity-table th {
  color: var(--gray-600);
  font-size: 12px;
  background: #fbfaf8;
}

.activity-dialog-grid {
  display: grid;
  gap: 12px;
  min-width: min(460px, 82vw);
}

@media (max-width: 760px) {
  .activity-center {
    padding: 16px;
  }

  .activity-center-header,
  .activity-toolbar,
  .activity-card {
    display: grid;
  }

  .activity-card-side {
    justify-items: start;
    min-width: 0;
  }
}

/* Audit Log date-range preset chips (Phase 9 Audit T2). */
.audit-chip {
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-700);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.audit-chip:hover {
  background: var(--gray-100);
}
.audit-chip-active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

/* WORK-283 Track B — small shared utility layer (rubric rule 2 in
   proposals/auth-track-b-style-src.md). Boring primitives only, added
   as inline `style="…"` attributes are extracted. Keep this SMALL —
   prefer reusing an element's existing class or a semantic class; do
   NOT let this grow into an ad-hoc Tailwind. */
.u-w-full { width: 100%; }
.u-mb-12 { margin-bottom: 12px; }

/* Component-scoped one-offs (rubric rule 4) extracted from inline styles. */
.address-zip { width: 140px; }

/* Autocomplete component — extracted from inline styles (rubric rule 1,
   reusing the element's existing classes). The dropdown defaults hidden;
   the JS toggles `.style.display = 'block'/'none'` (CSSOM, CSP-exempt). */
.autocomplete-wrapper { position: relative; }
.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1001;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
}
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-100);
}
.autocomplete-add-new {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--primary-600);
  font-weight: 500;
}

/* Custom-fields inline editor rows — extracted from inline styles. */
.custom-field-empty { color: var(--gray-400); font-size: 12px; }
.custom-field-row { margin-bottom: 8px; }
.custom-field-editor-row { display: flex; gap: 6px; align-items: center; }
.custom-field-clear { font-size: 12px; }

/* Unit picker component. Active state is a modifier class so CSP-safe CSS
   owns the selected styling instead of runtime cssText writes. */
.unit-picker-categories {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.unit-cat-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 14px;
  cursor: pointer;
  background: white;
  color: var(--gray-600, #4b5563);
  font-weight: 500;
  transition: all 0.15s;
}
.unit-cat-btn.is-active {
  border-color: var(--primary-500, #3b82f6);
  background: var(--primary-50, #eff6ff);
  color: var(--primary-700, #1d4ed8);
}
.unit-picker-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 32px;
}
.unit-picker-empty {
  font-size: 12px;
  color: var(--gray-400);
}
.unit-picker-current {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray-500);
  min-height: 18px;
}
.unit-opt-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 4px;
  cursor: pointer;
  background: white;
  color: var(--gray-700, #374151);
  transition: all 0.15s;
}
.unit-opt-btn.is-active {
  border-color: var(--primary-500, #3b82f6);
  background: var(--primary-50, #eff6ff);
  color: var(--primary-700, #1d4ed8);
}

/* Autocomplete-create component. `.ac-dropdown` preserves the exact compact
   dropdown used by TTB/address pickers; the older `.autocomplete-dropdown`
   remains for the ported autocomplete component shape. */
.ac-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 4px;
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ac-item,
.ac-create-new {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.ac-create-new {
  color: var(--wa-color-brand-40, #2563eb);
  background: var(--gray-50, #f9fafb);
}
.ac-create-new--separated {
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.ac-item.is-highlighted,
.ac-create-new.is-highlighted {
  background: var(--gray-200, #e5e7eb);
}

/* Address-label picker component. */
.address-label-picker-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--gray-600);
}
.address-label-picker-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.address-label-picker-widget {
  flex: 1;
  position: relative;
}
.address-label-picker-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

/* TTB classification picker component. */
.ttb-classification-picker {
  position: relative;
}
.ttb-classification-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
}
.ttb-classification-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.ttb-classification-help {
  font-size: 11px;
  color: var(--gray-400);
  margin: 4px 0 0 0;
}
.ttb-classification-custom {
  font-size: 11px;
  color: var(--gray-400);
}

/* Quality check/observation surfaces. Added during WORK-283 Track B catch-up
   because Q1 landed after the inline-style ratchet allowlist was seeded. */
.quality-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.quality-error {
  color: var(--red-600);
  margin-top: 8px;
}
.quality-empty {
  color: var(--gray-500);
  font-style: italic;
}
.quality-meta {
  color: var(--gray-600);
  font-size: 12px;
}
.quality-note {
  color: var(--gray-800);
  white-space: pre-wrap;
  margin-top: 4px;
}
.quality-entry {
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--gray-50, #fafafa);
}
.quality-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.quality-entry-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Phase Q7 — unified timeline entry title (subject record summary). */
.quality-entry-title {
  font-weight: 500;
}
.quality-entry-audit {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 6px;
}
.quality-entry-audit span {
  opacity: .85;
}
.quality-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quality-dialog-row {
  display: flex;
  gap: 10px;
}
.quality-flex-1 {
  flex: 1;
}
.quality-hidden {
  display: none;
}
.quality-field-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.quality-field-input {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  box-sizing: border-box;
}
.quality-field-textarea {
  width: 100%;
  padding: 6px 8px;
}
.quality-field-help {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.quality-dialog-error {
  color: var(--red-600);
  min-height: 16px;
}
.quality-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.quality-def-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.quality-def-title {
  margin: 0;
}
.quality-def-subtitle {
  margin: 4px 0 0;
  color: var(--gray-500);
  font-size: 13px;
}
.quality-def-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.quality-def-table thead tr {
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}
.quality-def-table th,
.quality-def-table td {
  padding: 8px;
}
.quality-def-row {
  border-bottom: 1px solid var(--gray-100);
}
.quality-def-name {
  font-weight: 500;
}
.quality-def-method {
  font-size: 11px;
  color: var(--gray-500);
}
.quality-def-actions {
  text-align: right;
  white-space: nowrap;
}

/* Item/party picker family. Shared by order line item search, TIB line
   search, and party autocomplete. */
.item-picker,
.item-picker-wrapper {
  position: relative;
}
.item-picker-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
}
.item-picker-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1001;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.item-picker-dropdown--party {
  top: 100%;
  max-height: 300px;
}
.item-picker-dropdown--multi {
  top: calc(100% + 2px);
  max-height: 320px;
}
.item-picker-group {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.item-picker-group--party {
  color: var(--gray-400);
}
.item-picker-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.item-picker-item:hover,
.item-picker-item.is-highlighted,
.item-picker-create:hover,
.item-picker-create.is-highlighted {
  background: var(--primary-50);
}
.item-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-picker-subtitle {
  font-size: 11px;
  color: var(--gray-500);
}
.item-picker-subtitle--party {
  color: var(--gray-400);
}
.item-picker-subtitle--fixed {
  flex-shrink: 0;
}
.item-picker-create {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--primary-600);
  font-weight: 500;
  border-top: 1px solid var(--gray-200);
}
.item-picker-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--gray-500);
}
.item-picker-empty--party {
  color: var(--gray-400);
}

/* Tag picker component. */
.tag-picker-assigned {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 24px;
}
.tag-picker-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tag-picker-select {
  min-width: 220px;
}
.tag-picker-separator {
  color: var(--gray-400);
}
.tag-picker-input {
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
}
.tag-picker-error {
  color: #c33;
  margin-top: 6px;
  font-size: 12px;
}
.tag-picker-empty {
  color: var(--gray-400);
  font-size: 12px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--primary-100, #e0efff);
  color: var(--primary-700, #0a4b8a);
  border-radius: 12px;
  font-size: 12px;
}
.tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

/* Attachment list (Phase 4.8) + note list (Phase 4.7) — subject-attached
   feed components. Shared feed primitives (empty state, entry meta/actions,
   error) are grouped; structure stays component-scoped. */
.attachment-drop-zone {
  border: 2px dashed var(--gray-300);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  color: var(--gray-600);
  margin-bottom: 10px;
  cursor: pointer;
}
.attachment-file-input {
  display: none;
}
.attachment-upload-btn {
  margin-top: 8px;
}
.attachment-list-error,
.note-list-error {
  color: var(--red-600);
  margin-top: 8px;
}
.attachment-empty,
.note-empty {
  color: var(--gray-500);
  font-style: italic;
}
.attachment-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--gray-50, #fafafa);
}
.attachment-entry-main {
  min-width: 0;
  flex: 1;
}
.attachment-entry-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-entry-meta,
.note-entry-when {
  font-size: 11px;
  color: var(--gray-500);
}
.attachment-entry-actions,
.note-entry-actions {
  display: flex;
  gap: 4px;
}
.note-add-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.note-entry {
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--gray-50, #fafafa);
}
.note-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.note-entry-body {
  color: var(--gray-800);
  white-space: pre-wrap;
}
.note-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 360px;
}
.note-dialog-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.note-dialog-textarea {
  width: 100%;
  padding: 6px 8px;
}
.note-dialog-error {
  color: var(--red-600);
  min-height: 16px;
}
.note-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Charge-candidate lot picker (distillation charge grids). Card selection
   is a boolean state → base class + .is-selected modifier. */
.ccp-card {
  text-align: left;
  width: 100%;
  cursor: pointer;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  display: block;
}
.ccp-card.is-selected {
  border-color: var(--brand-500, #6366f1);
  background: var(--brand-50, #eef2ff);
}
.ccp-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
}
.ccp-card-line {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  margin-top: 2px;
}
.ccp-empty {
  font-size: 12px;
  color: var(--gray-500);
  padding: 6px 8px;
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
}
.ccp-trigger-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ccp-summary {
  font-size: 12px;
  color: var(--gray-600);
  flex: 1;
}
.ccp-modal-body {
  display: grid;
  gap: 10px;
}
.ccp-cards {
  display: grid;
  gap: 8px;
  max-height: 50vh;
  overflow: auto;
}
.ccp-no-matches {
  font-size: 12px;
  color: var(--gray-500);
  padding: 8px;
}

/* Anchored spirit-classification picker. The anchor panel + category tag
   toggle visibility via classList (.is-hidden), not .style.display, so the
   reveal doesn't fight the extracted box styling. */
.anchored-classification {
  position: relative;
}
.acp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
}
.acp-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.acp-anchor {
  margin-top: 8px;
  background: var(--wa-color-neutral-50);
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
  padding: 12px;
}
.acp-anchor.is-hidden,
.acp-anchor-cat.is-hidden {
  display: none;
}
.acp-anchor-prompt {
  font-size: 13px;
  margin-bottom: 8px;
}
.acp-anchor-cat {
  margin-top: 8px;
}
.acp-anchor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.acp-help {
  font-size: 11px;
  color: var(--gray-400);
  margin: 4px 0 0 0;
}
.acp-group-header {
  padding: 4px 12px;
  color: var(--wa-color-neutral-50);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.acp-needs-base {
  font-size: 11px;
  color: var(--wa-color-neutral-60);
}

/* Ferment-complete dialog. The override-ABV input toggles via classList
   (.is-hidden) so it doesn't fight the wa-input host's default display. */
.fcd-body {
  display: grid;
  gap: 12px;
}
.fcd-abv-display {
  font-size: 1.25rem;
  font-weight: 600;
}
.fcd-abv-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
  line-height: 1.3;
}
.fcd-abv-toggle-row {
  margin-top: 0.25rem;
}
.fcd-abv-toggle {
  font-size: 0.85rem;
}
.fcd-abv-override {
  margin-top: 0.5rem;
}
.fcd-abv-override.is-hidden {
  display: none;
}

/* New-company quick-create dialog (shared by company autocompletes). */
.ccd-addr-empty {
  color: var(--gray-400);
  font-size: 13px;
  padding: 4px 0;
}
.ccd-addr-card {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.ccd-addr-main {
  min-width: 0;
}
.ccd-addr-labelrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.ccd-primary-badge {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.ccd-addr-detail {
  font-size: 13px;
  color: var(--gray-600);
  overflow-wrap: anywhere;
}
.ccd-addr-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ccd-addr-section {
  margin: 4px 0 16px;
}
.ccd-addr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ccd-addr-header label {
  margin: 0;
}

/* Inventory tracking-mode picker. The 3-col grid overrides the shared flex
   .card-radio-group via a compound selector (wins regardless of load order).
   Metered panel + unit warning toggle via classList (.is-hidden). */
.card-radio-group.tmp-card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tmp-card-title {
  font-weight: 500;
  font-size: 14px;
}
.tmp-card-blurb {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
}
.tmp-metered-panel {
  margin-top: 12px;
}
.tmp-metered-panel.is-hidden,
.tmp-unit-warning.is-hidden {
  display: none;
}
.tmp-panel-intro {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  margin-bottom: 8px;
}
.tmp-fields-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.tmp-col-currency {
  flex: 0 0 70px;
}
.tmp-col-cost {
  flex: 1 1 120px;
  min-width: 110px;
}
.tmp-col-amount {
  flex: 0 0 90px;
}
.tmp-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.tmp-select {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 4px;
  font-size: 14px;
  background: white;
}
.tmp-input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 4px;
  font-size: 14px;
}
.tmp-per {
  flex: 0 0 auto;
  align-self: flex-end;
  padding-bottom: 9px;
  color: var(--gray-500, #6b7280);
  font-size: 13px;
}
.tmp-unit-suffix {
  flex: 0 0 auto;
  align-self: flex-end;
  padding-bottom: 9px;
  color: var(--gray-700, #374151);
  font-size: 13px;
  font-weight: 500;
}
.tmp-rate-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  min-height: 16px;
}
.tmp-unit-warning {
  margin-top: 4px;
  font-size: 12px;
  color: var(--wa-color-warning-30, #b45309);
}

/* Charge-input row (continuous-charge dialog): input-type select + inline
   lot picker + draw field. The draw grid and the spirit-metrics cell start
   hidden and toggle via classList (.is-hidden); their visible display lives
   on the base class so the toggle doesn't fight it. */
.cir-row {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--gray-50);
}
.cir-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cir-no {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}
.cir-remove {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 16px;
}
.cir-label,
.cir-draw-label {
  font-size: 12px;
  color: var(--gray-500);
}
.cir-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.cir-picker {
  margin-top: 8px;
}
.cir-draw {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.cir-draw.is-hidden {
  display: none;
}
.cir-spirit-charge-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, .5fr);
  gap: 8px;
  grid-column: 1 / -1;
}
.cir-spirit-charge-options.is-hidden {
  display: none;
}
.cir-draw-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cir-draw-qty {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.cir-draw-unit {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 42px;
}
.cir-spirit-metrics {
  font-size: 12px;
  color: var(--gray-600);
  padding-bottom: 6px;
}
.cir-spirit-metrics.is-hidden {
  display: none;
}

/* Invoice reverse / delete-recovery dialogs (reverse, TIB, recurring,
   guidance). Dialog width, stack gaps, footers, and the typed-confirm
   reveal move off inline styles; the reveal toggles via classList
   (.is-hidden). */
.ird-dialog {
  --width: 520px;
}
.ird-dialog.ird-dialog-wide {
  --width: 540px;
}
.ird-tib-stack {
  --wa-stack-gap: 12px;
}
.ird-recurring-stack {
  --wa-stack-gap: 14px;
}
.ird-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ird-error {
  font-size: 13px;
  color: var(--wa-color-danger-30);
}
.ird-typed-wrap.is-hidden {
  display: none;
}
.ird-kind {
  color: var(--wa-color-neutral-50);
  font-size: 12px;
}
.ird-list {
  margin: 8px 0 0;
  padding-left: 20px;
}
.ird-list-blocked {
  color: var(--wa-color-danger-30);
}
.ird-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}
.ird-muted {
  color: var(--wa-color-neutral-50);
}
.ird-reason {
  margin-top: 14px;
}

/* Shared process correction confirmation dialog. */
.pcd-dialog {
  --width: 560px;
}
.pcd-stack {
  --wa-stack-gap: 12px;
}
.pcd-effects {
  margin: 0;
  padding-left: 20px;
}
.pcd-note {
  color: var(--wa-color-neutral-50);
  font-size: 13px;
  margin: 0;
}
.pcd-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pcd-error {
  color: var(--wa-color-danger-30);
  font-size: 13px;
  min-height: 1.2em;
}

.mw-correction-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* Item-create dialog (two-step domain picker → per-domain create form).
   Step-1 type cards hover in CSS (:hover) instead of JS; the TTB row
   toggles via .form-row.is-hidden. */
.icd-step1-prompt {
  margin-bottom: 16px;
  color: var(--gray-600);
}
.item-type-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.item-type-option:hover {
  border-color: var(--primary-400);
  background: var(--primary-50, #eff6ff);
}
.icd-option-label {
  font-weight: 600;
  font-size: 14px;
}
.icd-option-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}
.icd-field-rel {
  position: relative;
}
.icd-unit-label,
.icd-tracking-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
}
.icd-unit-label {
  margin-bottom: 4px;
}
.icd-tracking-label {
  margin-bottom: 6px;
}
.icd-section {
  margin-top: 12px;
}
.icd-form-intro {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--gray-500);
}
.icd-field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--gray-500);
}
.form-row.is-hidden {
  display: none;
}

/* Labor-requirements section (shared by recipe/spec dialogs). The
   "no roles defined" note starts hidden and toggles via classList
   (.is-hidden); the repeatable row keeps its dynamic ${idPrefix}-labor-row
   JS hook and carries layout on the static .lrs-row class. */
.lrs-section {
  grid-column: span 2;
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 16px;
}
.lrs-header {
  margin-bottom: 12px;
}
.lrs-title {
  font-weight: 600;
}
.lrs-hint {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
  margin-top: 4px;
}
.lrs-add-btn {
  margin-top: 4px;
}
.lrs-empty {
  margin-top: 8px;
  font-size: 12px;
  color: var(--wa-color-warning-30, #a16207);
}
.lrs-empty.is-hidden {
  display: none;
}
.lrs-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 80px 80px 80px 40px;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.lrs-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.lrs-select {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  font-size: 14px;
  background: white;
}
.lrs-optional {
  font-weight: 400;
  color: var(--wa-color-neutral-50);
}
.lrs-remove-btn {
  height: 36px;
  min-width: 36px;
  padding: 0;
}

/* Manage-types registry dialog (contact/company/address/equipment types).
   Tag colours (system = primary, else grey) live on the .mt-tag.is-system
   modifier instead of inline background/color. */
.mt-empty {
  color: var(--gray-400);
  font-size: 13px;
}
.mt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 28px;
}
.mt-add-row {
  display: flex;
  gap: 8px;
  align-items: end;
}
.mt-add-field {
  flex: 1;
}
.mt-add-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--gray-500);
}
.mt-add-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.mt-status {
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
}
.mt-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-800, #1f2937);
}
.mt-tag.is-system {
  background: var(--primary-50, #eff6ff);
  color: var(--primary-700, #1d4ed8);
}
.mt-lock {
  font-size: 11px;
  line-height: 1;
  padding: 0 2px;
  color: inherit;
}
.mt-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  color: inherit;
}

/* TTB spirit-class picker options (lib/ttb-taxonomy.js) — group header +
   inline note rendered into a wa-select's light-DOM option list. */
.ttx-group-header {
  display: block;
  padding: 4px 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ttx-note {
  color: var(--gray-400);
  font-size: 12px;
}

/* Lot-allocation grid (lib/lot-allocation.js), used by the mash/ferment/
   distill/blend wizards. Scoped .la-* classes sit alongside the existing
   JS-hook classes (.lot-row, .lot-status, .lot-row-select/qty/unit, etc.),
   which are left unstyled here because some are shared with other views.
   The allocated-OK color overrides the shared .check-ok via a compound. */
.la-detail-box {
  margin: -2px 0 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}
.la-detail-label {
  font-size: 10px;
  color: var(--gray-400);
  text-transform: uppercase;
}
.la-detail-value {
  font-size: 12px;
  color: var(--gray-700);
  font-weight: 600;
}
.check-ok.la-ok {
  color: var(--wa-color-success-40);
}
.la-callout {
  margin-top: 0.35rem;
}
.la-lot-row {
  margin-bottom: 6px;
}
.la-row-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.la-row-select {
  flex: 1;
}
.la-qty {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
}
.la-unit {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 24px;
}
.la-ingredient {
  margin-bottom: 1.25rem;
  padding: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.la-ingredient-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 8px;
}
.la-requested {
  font-size: 13px;
}
/* WORK-1068: a stock component's fixed source. */
.la-stock-source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 4px;
}
.la-lot-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.la-status {
  margin-top: 6px;
}

/* WORK-283 Track B batch 11 — extracted inline styles. */
.type-pill {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background: var(--gray-100);
  color: var(--primary-700);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.lead-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
}
.lead-status-badge--new {
  background: #2563eb22;
  color: #2563eb;
}
.lead-status-badge--contacted {
  background: #f59e0b22;
  color: #f59e0b;
}
.lead-status-badge--qualified {
  background: #16a34a22;
  color: #16a34a;
}
.lead-status-badge--disqualified {
  background: #6b728022;
  color: #6b7280;
}
.lead-status-badge--converted {
  background: #7c3aed22;
  color: #7c3aed;
}

.opp-stage-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.opp-stage-badge--prospecting {
  background: #f3f4f6;
  color: #6b7280;
}
.opp-stage-badge--qualification {
  background: #dbeafe;
  color: #2563eb;
}
.opp-stage-badge--proposal {
  background: #fef9c3;
  color: #a16207;
}
.opp-stage-badge--negotiation {
  background: #ffedd5;
  color: #c2410c;
}
.opp-stage-badge--closed_won {
  background: #dcfce7;
  color: #16a34a;
}
.opp-stage-badge--closed_lost {
  background: #fecaca;
  color: #dc2626;
}

.dev-signin-btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* WORK-283 Track B batch 12 — supply-options-card.js. */
.so-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.so-summary-label {
  font-size: 13px;
  color: var(--gray-500);
}
.so-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 8px 0;
}
.so-picker-wrap {
  position: relative;
}
.so-input-disabled {
  background: var(--gray-100);
  color: var(--gray-500);
}
/* The autocomplete dropdown reuses the shared `.ac-dropdown` (see the
   autocomplete-create component section) so its display:none/block
   toggling via setupAutocompleteCreate keeps working unchanged; this
   modifier only restores the taller 200px max-height this card used
   before extraction (shared consumers default to 150px). */
.ac-dropdown.so-suggestions-dropdown {
  max-height: 200px;
}
.so-help-text {
  font-size: 11px;
  color: var(--gray-500);
}
.so-help-text--top {
  margin-top: 4px;
}
.so-help-text--indent {
  margin-left: 24px;
}
.so-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}
.so-table {
  width: 100%;
  font-size: 13px;
}
.so-col-left {
  text-align: left;
}
.so-col-right {
  text-align: right;
}
/* .list-table th already sets text-align:left at (class, element)
   specificity, which beats a bare .so-col-right class on the same <th> —
   this compound override wins without touching the shared list-table
   rule (see list-view.css). */
.list-table th.so-col-right {
  text-align: right;
}
.so-nowrap {
  white-space: nowrap;
}
.so-preferred-badge {
  font-size: 11px;
  background: var(--wa-color-success-fill-quiet, #dcfce7);
  color: var(--wa-color-success-text, #166534);
  padding: 2px 6px;
  border-radius: 4px;
}

/* WORK-283 Track B batch 13 — manage-inventory-types.js. */
.mit-error-banner {
  padding: 10px 12px;
  background: var(--wa-color-danger-50, #fef2f2);
  border: 1px solid var(--wa-color-danger-70, #fca5a5);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--wa-color-danger-20, #991b1b);
}
.mit-empty {
  font-size: 13px;
  color: var(--gray-500);
  padding: 24px 12px;
  text-align: center;
  background: var(--gray-50, #f9fafb);
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
}
.mit-empty-title {
  font-weight: 500;
  margin-bottom: 6px;
}
.mit-empty-hint {
  font-size: 12px;
}
.mit-empty-link {
  color: var(--wa-color-brand-40);
  text-decoration: underline;
}
.mit-intro {
  margin-bottom: 16px;
  color: var(--gray-600);
  font-size: 13px;
}
.type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
}
.mit-type-info {
  flex: 1;
  min-width: 0;
}
.mit-type-name {
  font-size: 14px;
  font-weight: 500;
}
.mit-ttb-badge {
  font-size: 11px;
  color: var(--wa-color-warning-40, #d97706);
  margin-left: 6px;
}
.mit-type-count {
  font-size: 12px;
  color: var(--gray-400);
  margin-left: 6px;
}
.mit-action-panel {
  margin-top: 16px;
}
.mit-action-panel.is-hidden {
  display: none;
}
.mit-panel-box {
  padding: 16px;
  background: var(--gray-50, #f9fafb);
  border-radius: 6px;
}
.mit-panel-box--loading {
  text-align: center;
  color: var(--gray-400);
}
.mit-panel-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mit-panel-label--tight {
  margin-bottom: 4px;
}
.mit-rename-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mit-old-type-label {
  font-size: 13px;
  color: var(--gray-600);
  min-width: 120px;
  font-weight: 500;
}
.mit-arrow {
  color: var(--gray-400);
}
.mit-rename-input {
  flex: 1;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
}
.mit-button-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.mit-button-row--spaced {
  margin-top: 12px;
}
.mit-delete-copy {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 12px;
}
.mit-bulk-move-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
}
.mit-bulk-move-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.mit-bulk-move-select {
  flex: 1;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
}
.mit-reassign-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.mit-reassign-wrap {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
}
.mit-reassign-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.mit-reassign-thead-row {
  background: var(--gray-100);
  position: sticky;
  top: 0;
}
.mit-reassign-th {
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
}
.mit-reassign-th--move {
  width: 180px;
}
.mit-reassign-row {
  border-bottom: 1px solid var(--gray-100);
}
.mit-reassign-td {
  padding: 6px 10px;
}
.mit-reassign-select {
  width: 100%;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
}

/* WORK-283 Track B batch 14. */
/* quality-case-list.js — .quality-def-row is shared with
   quality-definitions.js's rows, which aren't clickable, so cursor:pointer
   goes on this scoped modifier instead of the shared rule. */
.quality-case-row {
  cursor: pointer;
}
/* opportunity-detail.js */
.opp-stage-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--wa-color-text-quiet);
}
.opp-pipeline-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
/* quotes-list.js */
.qt-cell-strong {
  font-weight: 600;
}
.qt-cell-total {
  text-align: right;
  font-weight: 500;
}
/* .list-table td sets color/font-size at (class,element) specificity,
   which beats a bare class — compound selector needed to win (see the
   .list-table th trap from batch 12). */
.list-table td.qt-cell-muted {
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
/* sales-orders-list.js */
.sol-cell-strong {
  font-weight: 600;
}
.sol-cell-total {
  text-align: right;
  font-weight: 500;
}
.list-table td.sol-cell-muted {
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
/* WORK-283 Track B batch 15. */
/* quality-case-actions.js */
.quality-subject-line {
  font-size: 13px;
  color: var(--gray-600);
}
.quality-subject-id {
  font-family: monospace;
}
.quality-hold-label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
/* NOTE: invoice-print.js is a standalone print document that does not
   load main.css — its .pi-pay-btn/.pi-pay-url-wrap/.pi-pay-url-link/
   .pi-notes classes are declared in its own embedded <style> block
   instead, alongside its existing .pi-* rules. */
/* vendor-shortfall-claims-list.js */
.vsc-cell-strong {
  font-weight: 600;
}
.vsc-cell-right {
  text-align: right;
}
.vsc-cell-total {
  text-align: right;
  font-weight: 500;
}
/* .list-table td already sets color/font-size at higher specificity
   than a bare class (see the batch 12/14 .list-table th/td trap). */
.list-table td.vsc-cell-muted {
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
/* credit-memos-list.js */
.cm-cell-strong {
  font-weight: 600;
}
.cm-source-link {
  color: var(--wa-color-brand-40, var(--brand-600));
  text-decoration: none;
}
.cm-cell-total {
  text-align: right;
  font-weight: 500;
}
.list-table td.cm-cell-muted {
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
/* purchase-orders-list.js */
.po-cell-strong {
  font-weight: 600;
}
.po-cell-total {
  text-align: right;
  font-weight: 500;
}
.list-table td.po-cell-muted {
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
.po-danger-icon {
  color: var(--wa-color-danger-40);
}

/* WORK-283 Track B batch 16. */
/* payments-settings.js */
.ps-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.ps-card {
  border: 1px solid var(--wa-color-surface-border, #ddd);
  border-radius: 8px;
  padding: 1.25rem;
  max-width: 42rem;
}
.ps-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.ps-details-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1.25rem;
}
.ps-button-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ps-footnote {
  font-size: 12px;
  color: #666;
  margin-top: 1rem;
}
/* stripping-sessions-list.js — cursor:pointer on its rows was redundant
   with .list-table tbody tr's own cursor:pointer and was just dropped. */
.list-table td.ssl-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 24px;
}
.ssl-detail-grid {
  display: grid;
  gap: 12px;
}
.ssl-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0;
}
.ssl-error-text {
  color: var(--red-600);
}
.ssl-cell-strong {
  font-weight: 600;
}
/* crm-data-tools.js */
.cdt-layout {
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 20px;
  align-items: start;
}
.cdt-form-stack {
  display: grid;
  gap: 12px;
}
.cdt-button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cdt-bulk-error {
  color: var(--wa-color-danger-fill-loud, #b91c1c);
  font-size: 13px;
}
.cdt-bulk-summary {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 10px;
}
.list-table-wrapper.cdt-scroll-wrap {
  max-height: 420px;
}
.cdt-full-width-card {
  grid-column: 1 / -1;
}
/* lead-detail.js — back-link cursor:pointer was redundant with
   .detail-back's own cursor:pointer (same as opportunity-detail.js in
   batch 14) and was dropped. */
.ld-meta-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--wa-color-text-quiet);
}
.ld-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ld-convert-dialog {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 440px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.ld-convert-title {
  margin: 0 0 12px;
}
.ld-convert-copy {
  color: var(--wa-color-text-quiet);
  font-size: 13px;
  margin-bottom: 16px;
}
.ld-convert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
/* roles-list.js — row cursor:pointer redundant with .list-table tbody tr,
   dropped. .list-table td already sets padding/color, so the empty-state
   and muted cells need the compound form. */
.rl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.rl-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.list-table th.rl-col-right {
  text-align: right;
}
.list-table td.rl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.rl-cell-strong {
  font-weight: 600;
}
.list-table td.rl-cell-muted {
  text-align: right;
  color: var(--gray-500);
}
/* price-lists-list.js */
.pll-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.pll-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.pll-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.list-table th.pll-col-right {
  text-align: right;
}
.list-table td.pll-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.pll-cell-strong {
  font-weight: 600;
}
.pll-cell-right {
  text-align: right;
}
/* services-list.js */
.svcl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.svcl-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.svcl-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.list-table th.svcl-col-right {
  text-align: right;
}
.list-table td.svcl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.svcl-cell-strong {
  font-weight: 600;
}
.svcl-cell-total {
  text-align: right;
  font-weight: 500;
}
/* users-list.js */
.ul-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.ul-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 240px;
}
.ul-none-tag {
  color: var(--gray-400);
  font-size: 12px;
}
.ul-role-tag {
  margin-right: 4px;
}
.list-table td.ul-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.ul-cell-strong {
  font-weight: 600;
}
.list-table td.ul-cell-muted {
  color: var(--gray-500);
  font-size: 13px;
}
/* custom-reports.js */
.cr-split-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
  align-items: start;
}
.cr-results-spacing {
  margin-top: 16px;
}
.cr-report-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--gray-200);
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.cr-report-card.is-active {
  background: var(--gray-100);
}
.cr-report-dataset-label {
  display: block;
}
.cr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}
.cr-columns-wrap {
  margin-top: 12px;
}
.cr-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.cr-results-table-wrap {
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

/* WORK-283 Track B batch 17. */
/* material-lot-detail.js */
.ml-pending-pill.is-hidden {
  display: none;
}
.ml-align-end {
  align-self: end;
}
.ml-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ml-section-copy {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 10px;
}
.ml-quality-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ml-quality-title {
  margin: 0;
}
.ml-quality-copy {
  font-size: 13px;
  color: var(--gray-500);
  margin: 8px 0 10px;
}
#reporting-kind-dialog #reporting-kind-error.is-hidden {
  display: none;
}

.ml-detail-error.is-hidden {
  display: none;
}
/* schedule-calendar.js — the per-domain chip border color and the
   inMonth/isToday booleans are small fixed enums, not truly dynamic
   runtime values, so they became modifier classes (same pattern as the
   status-badge enums from batch 11) rather than CSSOM writes. */
.cal-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-label {
  min-width: 170px;
  text-align: center;
}
.cal-day {
  min-height: 96px;
  border: 1px solid var(--wa-color-neutral-80);
  padding: 4px;
  overflow: hidden;
  background: #fff;
}
.cal-day--out-of-month {
  background: var(--wa-color-neutral-50);
}
.cal-day-label {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--wa-color-neutral-50);
}
.cal-day-label--today {
  color: var(--wa-color-brand-30);
}
.cal-more-hint {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-top: 8px;
}
.cal-weekday-label {
  font-size: 12px;
  font-weight: 600;
  padding: 4px;
  text-align: center;
  color: var(--wa-color-neutral-40);
}
.cal-chip {
  font-size: 11px;
  line-height: 1.3;
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  border-left: 3px solid var(--wa-color-neutral-50);
  background: var(--wa-color-neutral-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-chip--schedule-entry {
  border-left-color: var(--wa-color-brand-40);
}
.cal-chip--activities {
  border-left-color: var(--wa-color-success-40);
}
.cal-chip--production {
  border-left-color: var(--wa-color-warning-40);
}
.cal-chip--default {
  border-left-color: var(--wa-color-neutral-50);
}
.cal-chip.is-done {
  opacity: 0.5;
  text-decoration: line-through;
}
/* schedule-calendar.js — hotfix (batch 25): scheduling phases 6-9
   (PR #194) reintroduced inline styles into this already-cleared file
   after batch 17/#185. Extracted rather than re-adding to the
   allowlist. */
.cal-run-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cal-run-planner-dialog {
  --width: min(760px, calc(100vw - 32px));
}
.cal-run-planner {
  display: grid;
  gap: 14px;
}
.cal-run-planner-intro {
  color: var(--wa-color-neutral-40);
  line-height: 1.45;
}
.cal-run-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
  padding: 14px;
  background: var(--wa-color-neutral-95);
}
.cal-run-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}
.cal-run-section h3 > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand-30);
  font-size: 12px;
}
.cal-run-profile-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cal-run-profile-summary > span {
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral-30);
  font-size: 12px;
  text-transform: capitalize;
}
.cal-run-profile-summary .cal-run-warning {
  border-radius: 6px;
  background: var(--wa-color-warning-90);
  color: var(--wa-color-warning-20);
}
.cal-run-catalog-state {
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--wa-color-neutral-40);
  background: var(--wa-color-neutral-90);
  font-size: 13px;
}
.cal-run-catalog-state.is-ready {
  border-color: var(--wa-color-success-80);
  color: var(--wa-color-success-20);
  background: var(--wa-color-success-95);
}
.cal-run-catalog-state.is-empty,
.cal-run-catalog-state.is-error {
  border-color: var(--wa-color-warning-70);
  color: var(--wa-color-warning-20);
  background: var(--wa-color-warning-95);
}
.cal-run-calculation {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wa-color-neutral-30);
  font-size: 13px;
}
.cal-run-calculation span {
  color: var(--wa-color-neutral-50);
}
.cal-run-staffing {
  display: grid;
  gap: 10px;
}
.cal-run-staff-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(150px, .8fr));
  gap: 10px;
  align-items: end;
}
.cal-run-staff-row > div:first-child {
  display: grid;
  gap: 2px;
  align-self: center;
}
.cal-run-staff-row > div:first-child span,
.cal-run-staff-empty,
.cal-run-readiness-empty {
  color: var(--wa-color-neutral-50);
  font-size: 13px;
}
.cal-run-readiness-empty {
  border: 1px dashed var(--wa-color-neutral-70);
  border-radius: 6px;
  padding: 10px;
}
.cal-run-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.cal-run-catalog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-submit-with-tasks.is-hidden {
  display: none;
}
.cal-material-ok {
  border: 1px solid var(--wa-color-success-80);
  background: var(--wa-color-success-50);
  color: var(--wa-color-success-20);
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
}
.cal-material-shortfall {
  border: 1px solid var(--wa-color-warning-70);
  background: var(--wa-color-warning-50);
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  color: var(--wa-color-warning-10);
}
.cal-shortfall-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .cal-run-grid-2,
  .cal-run-staff-row {
    grid-template-columns: 1fr;
  }
  .cal-run-actions wa-button {
    flex: 1 1 auto;
  }
}
/* labor-roles-list.js */
.lrl-dialog {
  --width: 520px;
}
.lrl-form-stack {
  display: grid;
  gap: 12px;
}
.lrl-rate-section {
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 12px;
}
.lrl-rate-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.lrl-rate-label {
  font-weight: 600;
  font-size: 13px;
}
.lrl-salary-block {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
}
.lrl-salary-block.is-hidden {
  display: none;
}
.lrl-computed-hourly-wrap {
  grid-column: span 2;
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.lrl-computed-hourly-value {
  font-weight: 600;
}
.lrl-footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* brokerage-list.js */
.brk-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.brk-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.brk-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.list-table th.brk-col-right {
  text-align: right;
}
.list-table td.brk-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.brk-cell-strong {
  font-weight: 600;
}
.brk-cell-total {
  text-align: right;
  font-weight: 500;
}
.list-table td.brk-cell-muted {
  color: var(--gray-500);
  font-size: 13px;
}
/* customs-custody-receipts-list.js */
.ccr-subtitle {
  color: var(--gray-500);
  margin: 4px 0 0;
  font-size: 13px;
}
.ccr-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.ccr-status-select {
  min-width: 200px;
}
.list-table th.ccr-col-right {
  text-align: right;
}
.list-table td.ccr-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.list-table td.ccr-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.list-table td.ccr-error-row {
  color: red;
  text-align: center;
  padding: 24px;
}
/* dashboard.js */
.dash-subtitle {
  color: var(--gray-500);
  margin-top: 4px;
}
.dash-session-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px 16px;
}
.dash-session-label {
  color: var(--gray-500);
  font-size: 12px;
  text-transform: uppercase;
}
.dash-session-mono {
  font-family: monospace;
  font-size: 12px;
}
/* invoices-list.js */
.inv-icon-preload {
  display: none;
}
.inv-cell-strong {
  font-weight: 600;
}
.inv-cell-total {
  text-align: right;
  font-weight: 500;
}
.inv-cell-right {
  text-align: right;
}
.list-table td.inv-cell-muted {
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
.inv-danger-icon {
  color: var(--wa-color-danger-40);
}

/* WORK-283 Track B batch 18. */
/* tib-transfers-list.js */
.ttx-subtitle {
  color: var(--gray-500);
  margin: 4px 0 0;
  font-size: 13px;
}
.ttx-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.ttx-status-select {
  min-width: 200px;
}
.ttx-direction-select {
  min-width: 180px;
}
.list-table th.ttx-col-right {
  text-align: right;
}
.list-table td.ttx-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.list-table td.ttx-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.ttx-cell-right {
  text-align: right;
}
.list-table td.ttx-cell-muted {
  color: var(--gray-500);
  font-size: 13px;
}
.list-table td.ttx-error-row {
  color: red;
  text-align: center;
  padding: 24px;
}
/* bonded-withdrawals-list.js */
.bw-subtitle {
  color: var(--gray-500);
  margin: 4px 0 0;
  font-size: 13px;
}
.bw-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.bw-status-select {
  min-width: 200px;
}
.bw-purpose-select {
  min-width: 300px;
}
.list-table th.bw-col-right {
  text-align: right;
}
.list-table td.bw-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.list-table td.bw-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.bw-cell-right {
  text-align: right;
}
.list-table td.bw-cell-muted {
  color: var(--gray-500);
  font-size: 13px;
}
.list-table td.bw-error-row {
  color: red;
  text-align: center;
  padding: 24px;
}
/* payment-terms-list.js */
.ptl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.ptl-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.ptl-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.list-table th.ptl-col-right {
  text-align: right;
}
.list-table td.ptl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.ptl-cell-strong {
  font-weight: 600;
}
.ptl-cell-right {
  text-align: right;
}
/* samples-list.js */
.sl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.sl-search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.sl-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.sl-dialog-grid {
  display: grid;
  gap: 12px;
}
.sl-dialog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sl-dialog-status {
  font-size: 12px;
  color: #dc2626;
}
.list-table td.sl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.sl-cell-strong-mono {
  font-weight: 600;
  font-family: monospace;
}
.list-table td.sl-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.sl-cell-right {
  text-align: right;
}
/* tib-accounts-list.js */
.tal-subtitle {
  color: var(--gray-500);
  margin: 4px 0 0;
  font-size: 13px;
}
.tal-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.tal-status-select {
  min-width: 200px;
}
.list-table th.tal-col-right {
  text-align: right;
}
.list-table td.tal-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.tal-cell-strong {
  font-weight: 600;
}
.list-table td.tal-cell-mono {
  font-family: monospace;
  font-size: 13px;
}
.list-table td.tal-cell-muted {
  color: var(--gray-500);
  font-size: 13px;
}
.tal-cell-right {
  text-align: right;
}
.list-table td.tal-error-row {
  color: red;
  text-align: center;
  padding: 24px;
}
/* custom-fields-admin.js — .lv-toolbar's inline value was identical to
   list-view.js's own default toolbar (batch-15-style shared-rule promotion);
   .list-empty.is-hidden is a genuinely reusable compound (10 consumers of
   the bare .list-empty class, but only elements that explicitly get the
   is-hidden class are affected). */
.lv-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 24px;
}
.list-empty.is-hidden {
  display: none;
}
.cfa-aggregate-select {
  min-width: 180px;
  --wa-input-height-medium: 36px;
}
.cfa-dialog {
  --width: 520px;
}
.cfa-form-stack {
  display: grid;
  gap: 12px;
}
.cfa-options-field.is-hidden {
  display: none;
}
.cfa-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cfa-error {
  color: var(--wa-color-danger-fill-loud, #b91c1c);
  font-size: 13px;
}
.cfa-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cfa-delete-btn.is-hidden {
  display: none;
}
.cfa-footer-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.cfa-cell-right {
  text-align: right;
}
/* storage-location-detail.js — the parent-addr-hint/address-card/
   addr-*-host toggles have a data-driven INITIAL state (not just a static
   default-hidden), so the class is computed at render time from the same
   condition the old inline-style ternary used, and the is-hidden toggle
   direction in JS mirrors the old style.display polarity exactly. */
.sld-parent-hint.is-hidden {
  display: none;
}
.sld-address-card.is-hidden {
  display: none;
}
.sld-addr-host {
  margin-top: 8px;
}
.sld-addr-host.is-hidden {
  display: none;
}
.sld-detail-error.is-hidden {
  display: none;
}
.sld-rack-panel.is-hidden {
  display: none;
}
.sld-row-input {
  text-transform: uppercase;
}

/* WORK-283 Track B batch 19. */
/* my-schedule-widget.js */
.msw-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.msw-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msw-view-all {
  font-size: 13px;
  color: var(--wa-color-brand-40);
  text-decoration: none;
  white-space: nowrap;
}
.msw-hint-line {
  font-size: 13px;
  color: var(--wa-color-neutral-50);
  padding: 6px 0;
}
.msw-more-link {
  display: block;
  font-size: 12px;
  color: var(--wa-color-neutral-50);
  padding: 8px 0 2px;
  text-decoration: none;
}
.msw-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--wa-color-neutral-90);
}
.msw-item-main {
  flex: 1;
  min-width: 0;
}
.msw-item-title {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msw-item-meta {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
/* barrel-operations-list.js — its main table's cells are rendered inside
   renderListView's .list-table, so bol-cell-trace needs the compound form
   (font-size conflict); the dialog's own sub-table (.bol-details-table) is
   ALSO .list-table, so its mono cell needs the compound form too. */
.bol-mode-group {
  display: flex;
  gap: 4px;
  align-items: center;
}
.list-table td.bol-cell-trace {
  font-family: var(--wa-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
}
.bol-details-dialog {
  --width: 760px;
}
.bol-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
}
.bol-detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.bol-barrels-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.bol-details-table {
  border: 1px solid var(--gray-200);
}
.list-table td.bol-cell-mono {
  font-family: var(--wa-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}
.bol-undo-note {
  margin-top: 12px;
  color: var(--gray-600);
  font-size: 13px;
}
.bol-stat-card {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 10px;
  background: var(--gray-50);
}
.bol-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-weight: 600;
}
.bol-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin-top: 3px;
}
.bol-load-error-callout {
  flex: 1 0 100%;
  margin-bottom: 8px;
}
/* quality-tests-list.js */
.qtl-no-result {
  color: var(--gray-400);
  font-size: 12px;
}
.qtl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.qtl-search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.qtl-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.qtl-dialog-grid {
  display: grid;
  gap: 12px;
}
.qtl-dialog-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qtl-dialog-row-2fr {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}
.qtl-dialog-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.qtl-dialog-status {
  font-size: 12px;
  color: #dc2626;
}
.list-table td.qtl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.qtl-cell-medium {
  font-weight: 500;
}
.qtl-sample-link {
  font-family: monospace;
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}
.list-table td.qtl-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.qtl-actions {
  white-space: nowrap;
}
/* material-lots-list.js — no .list-table involved (bespoke tables), so
   everything below is safe as bare classes. */
.mll-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mll-warning-box {
  font-size: 13px;
  color: var(--gray-700, #374151);
  padding: 10px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: 1px solid var(--wa-color-warning-70, #fcd34d);
  border-radius: 6px;
}
.mll-info-copy {
  font-size: 13px;
  color: var(--gray-600, #4b5563);
}
.mll-dialog-error {
  font-size: 13px;
}
.mll-dialog-error.is-hidden {
  display: none;
}
.mll-merge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mll-merge-thead-row {
  text-align: left;
}
.mll-merge-th {
  padding: 4px 8px;
}
.mll-merge-th-right {
  padding: 4px 8px;
  text-align: right;
}
.mll-merge-td {
  padding: 4px 8px;
}
.mll-merge-td-right {
  padding: 4px 8px;
  text-align: right;
}
.mll-merge-qty-input {
  width: 120px;
}
/* provider-management.js */
.pmv-error-text {
  color: red;
}
.pmv-shell {
  padding: 24px;
}
.pmv-card-spaced {
  margin-top: 24px;
}
.pmv-card-title {
  margin-bottom: 12px;
}
.list-table th.pmv-col-right {
  text-align: right;
}
.list-table th.pmv-col-center {
  text-align: center;
}
.list-table td.pmv-empty {
  padding: 24px;
  text-align: center;
  color: var(--gray-400);
}
.pmv-cell-medium {
  font-weight: 500;
}
.pmv-cell-right {
  text-align: right;
}
.pmv-cell-center {
  text-align: center;
}
.list-table td.pmv-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.pmv-actions-cell {
  text-align: center;
  display: flex;
  gap: 4px;
  justify-content: center;
}
.pmv-new-provider-card.is-hidden {
  display: none;
}
.pmv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.pmv-form-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
/* contact-detail.js — .auth-error.cd-inactive-banner is a compound override
   since .auth-error already sets background/border/padding/border-radius at
   the same (0,1,0) specificity; .stage-select is shared with
   opportunity-detail.js/company-detail.js with different needs, so its
   margin-left override is a scoped modifier alongside, not a bare-class
   change. cd-lifecycle-block's visibility is a render-time-only condition
   (shouldShowLifecycleStage), no runtime toggle to keep in sync. */
.auth-error.cd-inactive-banner {
  background: #fee;
  border: 1px solid #c33;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-lifecycle-block {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cd-lifecycle-block.is-hidden {
  display: none;
}
.cd-stage-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.cd-stage-select-spaced {
  margin-left: 4px;
}
.cd-types-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cd-types-select {
  width: 100%;
}
.cd-dist-table {
  width: 100%;
  border-collapse: collapse;
}
.cd-dist-th {
  text-align: left;
  padding: 8px;
}
.cd-dist-row {
  border-top: 1px solid var(--gray-100);
}
.cd-dist-td {
  padding: 8px;
}
/* customs-custody-receipt-detail.js — .detail-header already sets
   margin-bottom:24px, so overriding it to 12px needs a compound selector. */
.ccrd-subtitle {
  color: var(--gray-500);
  margin: 4px 0 0;
  font-size: 13px;
}
.ccrd-notes-field {
  margin-top: 16px;
}
.ccrd-button-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.ccrd-button-row--wrap {
  flex-wrap: wrap;
}
.ccrd-status-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ccrd-receipt-note {
  margin: 16px 0 0;
  color: var(--gray-500);
  font-size: 13px;
}
.ccrd-card-spaced {
  margin-top: 16px;
}
.detail-header.ccrd-containers-header {
  margin-bottom: 12px;
}
.ccrd-containers-title {
  font-size: 18px;
  margin: 0;
}
.list-table th.ccrd-th-right {
  text-align: right;
}
.ccrd-td-right {
  text-align: right;
}
.list-table td.ccrd-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.ccrd-detail-label {
  color: var(--gray-500);
  font-size: 12px;
}
/* document-numbering-settings.js — no .list-table involved. */
.dns-title {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}
.dns-intro {
  color: var(--gray-600, #666);
  margin: 0 0 1rem;
  max-width: 42rem;
}
.dns-card {
  border: 1px solid var(--wa-color-surface-border, #ddd);
  border-radius: 8px;
  padding: 1.25rem;
  max-width: 54rem;
}
.dns-table {
  width: 100%;
  border-collapse: collapse;
}
.dns-thead-row {
  text-align: left;
  border-bottom: 1px solid var(--gray-200, #eee);
}
.dns-th-first {
  padding: 8px 8px 8px 0;
}
.dns-th {
  padding: 8px;
}
.dns-th-actions {
  padding: 8px;
  width: 7rem;
}
.dns-footnote {
  font-size: 12px;
  color: #666;
  margin-top: 1rem;
}
.dns-row {
  border-bottom: 1px solid var(--gray-100, #f4f4f4);
}
.dns-td-label {
  padding: 10px 8px 10px 0;
  font-weight: 500;
}
.dns-td {
  padding: 10px 8px;
}
.dns-input-number {
  width: 9rem;
}
.dns-input-template {
  width: 11rem;
}
.dns-td-preview {
  padding: 10px 8px;
  font-family: var(--wa-font-family-code, monospace);
}
.dns-td-actions {
  padding: 10px 8px;
  text-align: right;
}

/* WORK-283 Track B batch 20. */
/* journal-entries-list.js */
.jel-error-text {
  color: red;
}
.jel-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.jel-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.jel-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.jel-date-label {
  font-size: 13px;
  color: var(--gray-500);
}
.jel-date-input {
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.jel-count-label {
  color: var(--gray-500);
  font-size: 13px;
}
.list-table th.jel-col-right {
  text-align: right;
}
.list-table td.jel-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.jel-cell-strong {
  font-weight: 600;
}
.list-table td.jel-cell-13 {
  font-size: 13px;
}
.list-table td.jel-cell-total {
  text-align: right;
  font-size: 13px;
}
.jel-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.jel-status-badge--draft {
  background: #f3f4f6;
  color: #6b7280;
}
.jel-status-badge--posted {
  background: #dcfce7;
  color: #16a34a;
}
.jel-status-badge--reversed {
  background: #dbeafe;
  color: #2563eb;
}
.jel-status-badge--voided {
  background: #fecaca;
  color: #dc2626;
}
/* provider-dashboard.js */
.pdb-error-text {
  color: red;
}
.pdb-shell {
  padding: 24px;
}
.pdb-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.pdb-stat-card {
  text-align: center;
  background: var(--wa-color-neutral-50, #f9fafb);
  padding: 20px;
}
.pdb-stat-value {
  font-size: 28px;
  font-weight: 700;
}
.pdb-stat-value--brand {
  color: #2563eb;
}
.pdb-stat-value--success {
  color: #16a34a;
}
.pdb-stat-value--muted {
  color: var(--gray-500);
}
.pdb-stat-label {
  font-size: 13px;
  color: var(--gray-500);
}
.pdb-breakdown-title {
  margin-bottom: 12px;
}
.list-table th.pdb-col-right {
  text-align: right;
}
.list-table th.pdb-col-center {
  text-align: center;
}
.list-table td.pdb-empty {
  padding: 24px;
  text-align: center;
  color: var(--gray-400);
}
.pdb-cell-medium {
  font-weight: 500;
}
.pdb-cell-right {
  text-align: right;
}
.pdb-cell-center {
  text-align: center;
}
.list-table td.pdb-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
/* sample-detail.js */
.sd-error-text {
  color: red;
}
.sd-info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.sd-info-label {
  color: var(--gray-500);
  font-size: 13px;
}
.sd-info-value {
  font-size: 13px;
  font-weight: 500;
}
.sd-mono-value {
  font-family: monospace;
  font-size: 12px;
}
.sd-status-wrap {
  margin-top: 8px;
}
.sd-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.sd-card-title {
  margin-bottom: 12px;
}
.sd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sd-card-spaced {
  margin-top: 24px;
}
.sd-no-tests {
  color: var(--gray-400);
  font-size: 13px;
}
.sd-cell-medium {
  font-weight: 500;
}
.list-table td.sd-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.sd-dialog-grid {
  display: grid;
  gap: 12px;
}
.sd-dialog-status {
  font-size: 12px;
  color: #dc2626;
}
.sd-dialog-status--spaced {
  margin-top: 8px;
}
/* spirit-lot-detail.js */
.spl-link-strong {
  font-weight: 600;
  color: var(--primary-700);
  text-decoration: none;
}
.spl-link-note {
  color: var(--gray-500);
}
.spl-mono-fallback {
  font-family: monospace;
}
.spl-fill-note {
  color: var(--gray-500);
  font-size: 12px;
}
.spl-lineage-sub {
  font-size: 12px;
  color: var(--gray-500);
}
.spl-section-copy {
  font-size: 13px;
  color: var(--gray-500);
}
.spl-section-copy--tight {
  margin: 0 0 10px;
}
.spl-section-copy--spaced {
  margin: 8px 0 10px;
}
.spl-quality-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.spl-quality-title {
  margin: 0;
}
.spl-derived-note {
  font-size: 13px;
  color: var(--gray-600);
  margin: 4px 0 12px;
}
.spl-section-title {
  margin-top: 16px;
}
.spl-detail-error.is-hidden {
  display: none;
}
/* stripping-session-detail.js */
.ssd-title {
  margin-top: 8px;
}
.ssd-subtitle {
  font-size: 13px;
  color: var(--gray-500);
}
.ssd-status-wrap {
  margin-top: 8px;
}
.ssd-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ssd-gauge-btn-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssd-gauge-hint {
  font-size: 11px;
  color: var(--gray-500);
  max-width: 240px;
}
/* WORK-380: pooled stripping progress page and next-run prefill notice. */
.spp-summary {
  margin-top: 20px;
}
.spp-summary-line {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 18px;
}
.spp-next-step {
  margin: 8px 0 0;
}
.spp-override-reason,
.spp-waiting,
.spp-prefill-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--gray-500);
}
.spp-summary-actions,
.spp-prefill-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.spp-row-action {
  text-align: right;
  white-space: nowrap;
}
.spp-top-gap {
  margin-top: 12px;
}
.spp-prefill-host:not(:empty) {
  margin-bottom: 12px;
}
.spp-prefill-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.spp-dialog {
  display: grid;
  gap: 12px;
}
.spp-dialog-error:not(:empty) {
  color: var(--wa-color-danger-50, #b42318);
  font-size: 13px;
}
@media (max-width: 640px) {
  .spp-row-action {
    text-align: left;
    white-space: normal;
  }
}
.ssd-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.ssd-card-spaced {
  margin-top: 20px;
}
.ssd-runs-table {
  margin-top: 10px;
}
.list-table td.ssd-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 20px;
}
.ssd-gauge-dialog {
  --width: 560px;
}
.ssd-dialog-grid {
  display: grid;
  gap: 12px;
}
.ssd-warning-box {
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}
.ssd-dialog-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ssd-dialog-help {
  font-size: 11px;
  color: var(--gray-500);
  margin: 0;
}
.ssd-error-text {
  color: var(--red-600);
}
.ssd-fact-label {
  display: block;
  color: var(--gray-500);
  font-size: 12px;
}
.ssd-grid-spaced {
  margin-top: 10px;
}

/* WORK-283 Track B batch 21. */
/* onboarding-processing-reconcile.js */
.opr-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.opr-header-title {
  margin: 0;
}
.opr-computing {
  color: var(--gray-400);
  font-size: 13px;
}
.opr-precondition {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 13px;
}
.opr-period-label {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.opr-gen-warn {
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 6px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #a16207;
  font-size: 12px;
}
.list-table th.opr-th {
  padding: 4px 8px;
}
.list-table th.opr-th-right {
  padding: 4px 8px;
  text-align: right;
}
.list-table td.opr-td {
  padding: 4px 8px;
}
.list-table td.opr-td-coord {
  padding: 4px 8px;
  color: var(--gray-500);
  font-family: monospace;
  font-size: 12px;
}
.list-table td.opr-td-pg {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
}
.opr-tfoot-row {
  border-top: 2px solid var(--gray-200);
}
.list-table td.opr-td-total-label {
  padding: 6px 8px;
  font-weight: 600;
}
.list-table td.opr-td-total-note {
  padding: 6px 8px;
  color: var(--gray-400);
  font-size: 12px;
}
.list-table td.opr-td-total-pg {
  padding: 6px 8px;
  text-align: right;
  font-family: monospace;
  font-weight: 600;
}
.opr-wine-note {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
}
.opr-advisory-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  font-size: 12px;
  color: var(--gray-600);
}
/* payment-terms-detail.js (ptd- classes also reused by price-list-detail.js) */
.ptd-header {
  padding: 24px;
}
.detail-header.ptd-header--top {
  align-items: flex-start;
}
.ptd-body {
  padding: 0 24px 24px;
  max-width: 720px;
}
.ptd-body--tight {
  max-width: none;
}
.ptd-card {
  padding: 20px;
}
.ptd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ptd-grid-2--spaced {
  margin-top: 16px;
  margin-bottom: 0;
}
.ptd-badge-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.ptd-header-actions {
  display: flex;
  gap: 8px;
}
.ptd-description-wrap {
  padding: 0 24px 16px;
}
.ptd-description {
  color: var(--gray-600);
  margin: 0;
}
.ptd-terms-title {
  margin-bottom: 12px;
}
.ptd-terms-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 8px;
  font-size: 14px;
}
.ptd-terms-label {
  color: var(--gray-500);
}
.ptd-terms-value {
  font-weight: 500;
}
.ptd-actions-row {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}
.ptd-error-text {
  color: red;
}
/* pick-list.js */
.pkl-refresh-icon {
  margin-right: 4px;
}
.pkl-body {
  margin-top: 16px;
}
.pkl-muted {
  color: var(--wa-color-neutral-50);
}
.pkl-danger-text {
  color: var(--wa-color-danger-30);
}
.pkl-summary {
  margin-bottom: 12px;
  color: var(--wa-color-neutral-40);
  font-size: 13px;
}
.pkl-zone-card {
  margin-bottom: 16px;
}
.pkl-zone-title {
  margin: 0 0 12px 0;
  font-size: 15px;
}
.pkl-zone-count {
  color: var(--wa-color-neutral-50);
  font-weight: normal;
  font-size: 13px;
}
.pkl-col-location {
  width: 140px;
}
.pkl-col-expiration {
  width: 120px;
}
.pkl-col-order {
  width: 140px;
}
.list-table th.pkl-col-qty {
  text-align: right;
  width: 80px;
}
.list-table td.pkl-cell-mono {
  font-family: var(--wa-font-mono, monospace);
  font-size: 12px;
}
.pkl-cell-right {
  text-align: right;
}
.pkl-exp-danger {
  color: var(--wa-color-danger-30, #b91c1c);
}
.pkl-exp-warning {
  color: var(--wa-color-warning-30, #92400e);
}
.pkl-exp-default {
  color: inherit;
}
.pkl-muted-400 {
  color: var(--wa-color-neutral-60);
}
.pkl-muted-500 {
  color: var(--wa-color-neutral-50);
}
/* product-specs-list.js */
.psl-variant-row {
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}
.psl-variant-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.psl-remove-btn {
  height: 36px;
  min-width: 36px;
  padding: 0;
}
.psl-remove-spacer {
  height: 36px;
}
.psl-variant-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}
.psl-group-label {
  padding: 4px 12px;
  color: var(--wa-color-neutral-50);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.psl-create-dialog {
  --width: 740px;
}
.psl-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.psl-span-2 {
  grid-column: span 2;
}
.psl-custom-wrapper {
  grid-column: span 2;
  background: var(--wa-color-neutral-50);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--wa-color-neutral-80);
}
.psl-custom-wrapper.is-hidden {
  display: none;
}
.psl-custom-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}
.psl-custom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.psl-ttb-display-wrap {
  grid-column: span 2;
}
.psl-ttb-display-wrap.is-hidden {
  display: none;
}
.psl-age-wrapper.is-hidden {
  display: none;
}
.psl-variants-section {
  grid-column: span 2;
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 16px;
}
.psl-variants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.psl-variants-title {
  font-weight: 600;
}
.psl-size-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.psl-add-variant-btn {
  margin-top: 4px;
}
.psl-create-error {
  margin-top: 12px;
}
.psl-create-error.is-hidden {
  display: none;
}
.psl-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
}
.psl-ttb-cell {
  font-size: 12px;
  color: var(--gray-500);
}
/* components/activity-timeline.js */
.at-log-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.at-error-text {
  color: var(--red-600);
  margin-top: 8px;
}
.at-empty {
  color: var(--gray-500);
  font-style: italic;
}
.at-day-heading {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 12px 0 4px 0;
  letter-spacing: 0.05em;
}
.at-entry-body {
  margin-top: 4px;
  color: var(--gray-700);
  white-space: pre-wrap;
}
.at-entry {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--gray-50, #fafafa);
}
.at-entry-icon {
  font-size: 18px;
  min-width: 24px;
  text-align: center;
}
.at-entry-main {
  flex: 1;
  min-width: 0;
}
.at-entry-header-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.at-entry-title {
  font-weight: 600;
}
.at-entry-meta {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
}
.at-entry-time {
  font-size: 11px;
  color: var(--gray-500);
  margin-left: auto;
}
.at-entry-actions {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}
.at-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
}
.at-dialog-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.at-dialog-field {
  width: 100%;
  padding: 6px 8px;
}
.at-dialog-error {
  color: var(--red-600);
  min-height: 16px;
}
.at-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* fiscal-periods-list.js */
.fpl-error-text {
  color: red;
}
.fpl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}
.fpl-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.fpl-count-label {
  color: var(--gray-500);
  font-size: 13px;
}
.list-table td.fpl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.fpl-cell-strong {
  font-weight: 600;
}
.list-table td.fpl-cell-13 {
  font-size: 13px;
}
.fpl-actions-row {
  display: flex;
  gap: 4px;
}
.fpl-action-btn {
  font-size: 11px;
  padding: 2px 8px;
}
.fpl-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpl-dialog-overlay.is-hidden {
  display: none;
}
.fpl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.fpl-dialog-title {
  margin-bottom: 16px;
}
.fpl-dialog-field {
  margin-bottom: 16px;
}
.fpl-dialog-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.fpl-dialog-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.fpl-dialog-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.fpl-dialog-status--error {
  color: red;
}
.fpl-dialog-status--success {
  color: #16a34a;
}
.fpl-inline-success {
  color: #16a34a;
  font-weight: 500;
}
.fpl-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.fpl-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.fpl-status-badge--created {
  background: #f3f4f6;
  color: #6b7280;
}
.fpl-status-badge--open {
  background: #d1fae5;
  color: #065f46;
}
.fpl-status-badge--closed {
  background: #f3f4f6;
  color: #6b7280;
}
.fpl-status-badge--year_end {
  background: #dbeafe;
  color: #1e40af;
}
/* price-list-detail.js */
.pld-body {
  padding: 0 24px 24px;
  max-width: 700px;
}
.pld-card {
  padding: 20px;
}
.pld-description {
  color: var(--gray-600);
  margin: 8px 0 0;
}
.pld-entries-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pld-entries-title {
  margin: 0;
}
.pld-add-entry-form {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: white;
}
.pld-add-entry-form.is-hidden {
  display: none;
}
.pld-entry-grid {
  display: grid;
  grid-template-columns: 1fr 180px 1fr 140px;
  gap: 12px;
  margin-bottom: 12px;
}
.pld-entry-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.pld-entries-table {
  margin: 0;
}
.list-table th.pld-col-right {
  text-align: right;
}
.pld-col-actions {
  width: 80px;
}
.list-table td.pld-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.pld-cell-right {
  text-align: right;
}
.pld-remove-btn {
  font-size: 11px;
  padding: 2px 8px;
}
.pld-empty-note {
  color: var(--gray-500);
}
.pld-error-text {
  color: red;
}
/* quality-case-detail.js */
.qcd-title-line {
  color: var(--gray-600);
}
.qcd-tags-row {
  margin-top: 4px;
  display: flex;
  gap: 6px;
}
.qcd-description {
  margin: 0;
  white-space: pre-wrap;
}
.qcd-add-subject-btn {
  margin-top: 8px;
}
.qcd-disposition-note {
  margin-top: 4px;
  white-space: pre-wrap;
}
.qcd-cancel-note {
  margin-top: 4px;
}
.qcd-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qcd-action-error {
  color: var(--red-600);
  margin-top: 8px;
}
.qcd-evidence-list {
  margin: 0;
  padding-left: 18px;
}
.qcd-evidence-id {
  font-family: monospace;
  color: var(--gray-500);
}
.qcd-empty-note {
  color: var(--gray-500);
  font-style: italic;
}
.qcd-note-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.qcd-note-input {
  flex: 1;
}
.qcd-subject-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
}
.qcd-subject-label {
  margin-left: 6px;
}
.qcd-subject-id {
  font-family: monospace;
  color: var(--gray-500);
  margin-left: 6px;
}
.qcd-subject-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qcd-note-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.qcd-note-body {
  white-space: pre-wrap;
}
.qcd-note-when {
  font-size: 11px;
  color: var(--gray-500);
}
.qcd-hold-subject-line {
  font-size: 13px;
  color: var(--gray-600);
}
.qcd-disp-hint {
  font-size: 12px;
  color: var(--gray-500);
}
/* Phase Q6 — recall exposure */
.qcd-recall-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.qcd-recall-h2 {
  margin-bottom: 4px;
}
.qcd-exposure-meta {
  font-size: 12px;
  color: var(--gray-500);
}
.qcd-recall-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qcd-exposure-message {
  color: var(--gray-600);
  font-size: 12px;
  margin-top: 8px;
}
.qcd-recall-exposure {
  margin-top: 10px;
}
.qcd-exposure-tag {
  margin-right: 6px;
  margin-bottom: 6px;
}
.qcd-exposure-summary {
  margin-bottom: 8px;
}
.qcd-exposure-scroll {
  overflow: auto;
}
.qcd-node-id {
  font-family: monospace;
  color: var(--gray-500);
}
.qcd-num {
  text-align: right;
}
/* Phase Q5 — corrective actions (CAPA) */
.qcd-ca-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.qcd-ca-action {
  font-weight: 500;
}
.qcd-ca-meta {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}
.qcd-ca-verify-note {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 4px;
  white-space: pre-wrap;
}
.qcd-ca-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.qcd-ca-add {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qcd-ca-action-input {
  width: 100%;
}
.qcd-ca-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Phase Q5 — procedure-change register (procedure-changes.js) */
.pcr-intro {
  color: var(--gray-600);
  font-size: 13px;
  margin: 4px 0 12px;
}
.pcr-dialog-grid {
  display: grid;
  gap: 12px;
}
.pcr-dialog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pcr-dialog-status {
  font-size: 12px;
  color: #dc2626;
}
.pcr-cell-strong {
  font-weight: 600;
}
.list-table td.pcr-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.list-table td.pcr-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.list-table td.pcr-empty {
  text-align: center;
  color: var(--gray-400);
  padding: 24px;
}
.pcr-actions {
  white-space: nowrap;
}

/* WORK-283 Track B batch 22. */
/* blending-processes-list.js */
.blp-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.blp-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.blp-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.blp-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.list-table th.blp-col-right {
  text-align: right;
}
.blp-cell-strong {
  font-weight: 500;
}
.blp-type-chip {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #374151;
}
.blp-cell-right {
  text-align: right;
}
.blp-error-text {
  color: red;
}
.blp-dialog-stack {
  display: grid;
  gap: 16px;
}
.blp-dialog-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.blp-create-dialog {
  --width: 520px;
}
.blp-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.blp-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.blp-status-badge--created {
  background: #f3f4f6;
  color: #374151;
}
.blp-status-badge--blending {
  background: #dbeafe;
  color: #1e40af;
}
.blp-status-badge--quality_review {
  background: #fef3c7;
  color: #92400e;
}
.blp-status-badge--approved {
  background: #d1fae5;
  color: #065f46;
}
.blp-status-badge--completed {
  background: #a7f3d0;
  color: #047857;
}
.blp-status-badge--rejected {
  background: #fee2e2;
  color: #991b1b;
}
.blp-status-badge--cancelled {
  background: #f3f4f6;
  color: #6b7280;
}
/* budget-variance.js */
.bv-filter-card {
  margin-bottom: 24px;
}
.bv-filter-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.bv-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.bv-year-input {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  width: 100px;
}
.bv-month-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 120px;
}
.bv-generate-btn {
  padding: 8px 20px;
}
.bv-muted-text {
  color: var(--gray-400);
}
.list-table td.bv-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.bv-cell-right {
  text-align: right;
}
.bv-variance {
  font-weight: 500;
}
.list-table td.bv-variance--over {
  color: #dc2626;
}
.list-table td.bv-variance--under {
  color: #16a34a;
}
.bv-report-title {
  margin-bottom: 12px;
}
.list-table th.bv-col-right {
  text-align: right;
}
.bv-total-row {
  border-top: 3px solid var(--gray-300);
  font-weight: 700;
}
.bv-error-text {
  color: red;
}
/* pipeline-dashboard.js */
.pd-error-text {
  color: red;
}
.pd-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pd-stats-card {
  margin-bottom: 20px;
}
.pd-stats-row {
  display: flex;
  gap: 32px;
  align-items: center;
}
.pd-stat-label {
  font-size: 13px;
  color: var(--gray-500);
}
.pd-stat-value {
  font-size: 24px;
  font-weight: 700;
}
.pd-kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
}
.pd-kanban-col {
  min-width: 260px;
  flex: 1;
  background: var(--wa-color-neutral-50, #f9fafb);
  border-radius: 8px;
  padding: 12px;
}
.pd-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
}
.pd-col-header--prospecting {
  border-bottom-color: #6b7280;
}
.pd-col-header--qualification {
  border-bottom-color: #2563eb;
}
.pd-col-header--proposal {
  border-bottom-color: #a16207;
}
.pd-col-header--negotiation {
  border-bottom-color: #c2410c;
}
.pd-col-header--closed_won {
  border-bottom-color: #16a34a;
}
.pd-col-header--closed_lost {
  border-bottom-color: #dc2626;
}
.pd-col-title {
  font-weight: 600;
  font-size: 14px;
}
.pd-col-count {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
}
.pd-col-count--prospecting {
  background: #f3f4f6;
  color: #6b7280;
}
.pd-col-count--qualification {
  background: #dbeafe;
  color: #2563eb;
}
.pd-col-count--proposal {
  background: #fef9c3;
  color: #a16207;
}
.pd-col-count--negotiation {
  background: #ffedd5;
  color: #c2410c;
}
.pd-col-count--closed_won {
  background: #dcfce7;
  color: #16a34a;
}
.pd-col-count--closed_lost {
  background: #fecaca;
  color: #dc2626;
}
.pd-col-value {
  font-size: 12px;
  color: var(--gray-500);
}
.pd-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-col-empty {
  text-align: center;
  color: var(--gray-400);
  font-size: 12px;
  padding: 16px 0;
}
.pd-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.pd-card-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
.pd-card-company {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.pd-card-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.pd-card-amount {
  font-size: 14px;
  font-weight: 600;
  color: #059669;
}
.pd-card-probability {
  font-size: 11px;
  color: var(--gray-500);
}
.pd-card-close-date {
  font-size: 11px;
  color: var(--gray-400);
}
.pd-advance-btn {
  margin-top: 6px;
  width: 100%;
}
/* labor-role-detail.js */
.lrd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lrd-title {
  margin: 6px 0 0 0;
}
.lrd-subtitle {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.lrd-header-actions {
  display: flex;
  gap: 8px;
}
.detail-card.lrd-card {
  padding: 16px;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
}
.detail-card.lrd-card--mb16 {
  margin-bottom: 16px;
}
.lrd-card-title {
  font-weight: 600;
  margin-bottom: 12px;
}
.lrd-details-grid {
  display: grid;
  gap: 12px;
  max-width: 560px;
}
.lrd-rate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lrd-card-title-flush {
  font-weight: 600;
}
.lrd-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lrd-rate-thead-row {
  border-bottom: 1px solid var(--wa-color-neutral-80);
  text-align: left;
}
.lrd-th {
  padding: 6px 8px;
}
.lrd-th-right {
  padding: 6px 8px;
  text-align: right;
}
.lrd-td-empty {
  padding: 12px 8px;
  color: var(--wa-color-neutral-50);
}
.lrd-rate-row {
  border-bottom: 1px solid var(--wa-color-neutral-90);
}
.lrd-td {
  padding: 6px 8px;
}
.lrd-td-right {
  padding: 6px 8px;
  text-align: right;
}
.lrd-rate-note {
  color: var(--wa-color-neutral-50);
  font-size: 12px;
}
.lrd-rate-dialog {
  --width: 480px;
}
.lrd-dialog-stack {
  display: grid;
  gap: 12px;
}
.lrd-salary-block {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
}
.lrd-salary-block.is-hidden {
  display: none;
}
.lrd-computed-row {
  grid-column: span 2;
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.lrd-computed-value {
  font-weight: 600;
}
.lrd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* quote-detail.js */
.qd-col-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.qd-status-tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.qd-so-link-wrap {
  margin-top: 12px;
}
.qd-line-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qd-col-narrow {
  width: 40px;
}
.qd-remove-btn {
  --wa-button-font-size-small: 14px;
}
.qd-input-right {
  text-align: right;
}
.qd-total-label {
  padding-right: 12px;
}
.qd-customer-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.qd-save-btn-wrap {
  margin-top: 16px;
}
.qd-save-btn {
  width: 100%;
}
.qd-add-line-wrap {
  margin-top: 8px;
}
.qd-col-qty {
  width: 80px;
}
.qd-col-unit {
  width: 90px;
}
.qd-col-price {
  width: 110px;
}
.qd-col-total {
  width: 100px;
}
.qd-input-total {
  text-align: right;
  font-weight: 500;
}
/* continuous-distillation-list.js */
.cdl-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cdl-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cdl-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.cdl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.cdl-col-right {
  text-align: right;
}
.list-table th.cdl-col-right {
  text-align: right;
}
.cdl-cell-strong {
  font-weight: 500;
}
.cdl-cell-right {
  text-align: right;
}
.cdl-error-text {
  color: red;
}
.cdl-dialog-stack {
  display: grid;
  gap: 16px;
}
.cdl-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cdl-start-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin: -8px 0 0 0;
}
.cdl-create-dialog {
  --width: 520px;
}
.cdl-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cdl-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.cdl-status-badge--idle {
  background: #f3f4f6;
  color: #374151;
}
.cdl-status-badge--running {
  background: #dbeafe;
  color: #1e40af;
}
.cdl-status-badge--paused {
  background: #fef3c7;
  color: #92400e;
}
.cdl-status-badge--ended {
  background: #d1fae5;
  color: #065f46;
}
.cdl-status-badge--failed {
  background: #fee2e2;
  color: #991b1b;
}
.cdl-status-badge--reversed {
  background: #f3f4f6;
  color: #374151;
}
/* mashing-wizard.js */
.mw-help-tight {
  margin-bottom: 0.6rem;
}
.mw-mt-sm {
  margin-top: 0.5rem;
}
.mw-mode-section {
  margin-top: 1.5rem;
}
.mw-mode-section.is-hidden {
  display: none;
}
.mw-vessel-rows {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mw-vessel-add-btn {
  margin-top: 8px;
}
.mw-vessel-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--wa-color-danger-30);
}
.mw-vessel-input-wrap {
  position: relative;
  flex: 1;
}
.mw-vessel-input {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.mw-vessel-remove-btn {
  height: 36px;
}
.mw-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mw-dlg-status {
  font-size: 13px;
}
.mw-dlg-status-error {
  color: var(--wa-color-danger-30);
}
.mw-gravity-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem;
}
.mw-mt-md {
  margin-top: 0.75rem;
}
.mw-record-step-row {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}
.mw-label-spaced {
  margin-top: 1rem;
}
.mw-handoff-icon {
  font-size: 3rem;
  color: #10b981;
}
.mw-handoff-footnote {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #6b7280;
}

/* WORK-283 Track B batch 23. */
/* service-detail.js */
.svd-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.svd-body-wide {
  padding: 0 24px 24px;
  max-width: 900px;
}
.svd-card-spaced {
  margin-top: 16px;
}
.svd-save-wrap {
  margin-top: 16px;
}
.svd-error-text {
  color: red;
}
/* company-detail.js */
.auth-error.cod-inactive-banner {
  background: #fee;
  border: 1px solid #c33;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cod-lifecycle-block {
  margin-top: 6px;
}
.cod-lifecycle-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-right: 8px;
}
.cod-add-address-btn {
  margin-top: 12px;
}
.cod-types-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cod-types-select {
  width: 100%;
}
.cod-empty-note {
  color: var(--gray-400);
  font-size: 13px;
}
.linked-contact-item.cod-contact-item {
  padding: 6px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
}
.cod-contact-email {
  color: var(--gray-400);
  font-size: 12px;
  margin-left: 8px;
}
.cod-website-link {
  font-size: 0.85em;
  color: var(--brand-600, #2563eb);
}
.cod-addr-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cod-primary-chip {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.cod-addr-header-actions {
  display: flex;
  gap: 4px;
}
.cod-no-addresses {
  color: var(--gray-400);
  font-size: 13px;
  padding: 8px 0;
}
.cod-coverage-table {
  width: 100%;
  border-collapse: collapse;
}
.cod-th {
  text-align: left;
  padding: 8px;
}
.cod-coverage-row {
  border-top: 1px solid var(--gray-100);
}
.cod-td {
  padding: 8px;
}
/* onboarding-projects-list.js */
.opl-intro {
  color: var(--gray-500);
  margin: -8px 0 20px;
  max-width: 760px;
}
.opl-muted-text {
  color: var(--gray-400);
}
.opl-error-text {
  color: var(--red-500);
}
.list-table td.opl-td {
  padding: 8px;
}
.opl-td-mono {
  font-family: monospace;
}
.list-table td.opl-td-muted {
  color: var(--gray-500);
}
.list-table th.opl-th {
  padding: 8px;
}
.opl-card-flush {
  padding: 0;
}
.opl-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.opl-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.opl-field-label--tight {
  margin-bottom: 6px;
}
.opl-text-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.opl-month-input {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.opl-field-help {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}
.opl-accounts-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opl-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.opl-account-row[data-required="1"] {
  cursor: default;
}
.opl-account-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-600);
}
.opl-account-label {
  font-size: 14px;
}
.opl-dialog-error {
  color: var(--red-500);
  font-size: 13px;
}
.opl-dialog-error.is-hidden {
  display: none;
}
.opl-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* credit-memo-detail.js */
.cmd-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.cmd-source-link {
  font-size: 14px;
}
.cmd-reason-wrap {
  margin-top: 12px;
}
.cmd-reason-text {
  font-size: 14px;
  color: var(--wa-color-neutral-30);
}
.cmd-applied-row {
  color: var(--wa-color-success-40, #16a34a);
}
.cmd-remaining-row {
  font-size: 18px;
}
.cmd-app-amount {
  font-weight: 500;
}
.cmd-app-date {
  color: var(--wa-color-neutral-50);
}
.cmd-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmd-reason-field-wrap {
  margin-top: 12px;
}
/* tib-inbound-receive-wizard.js */
.tirw-error-text {
  color: red;
  padding: 24px;
}
.tirw-notice-text {
  padding: 24px;
}
.tirw-page {
  padding: 24px;
}
.tirw-page--narrow {
  max-width: 800px;
}
.tirw-page--wide {
  max-width: 1100px;
}
.tirw-h1-tight {
  margin: 0 0 16px;
}
.tirw-card {
  padding: 20px;
}
.tirw-h3-tight {
  margin: 0 0 12px;
}
.tirw-summary-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 8px;
  font-size: 14px;
}
.tirw-muted-label {
  color: var(--gray-500);
}
.tirw-step1-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tirw-btn-row {
  display: flex;
  gap: 8px;
}
.tirw-btn-row--spaced {
  margin-top: 16px;
}
.tirw-apply-card {
  padding: 16px;
  margin-bottom: 16px;
}
.tirw-apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.tirw-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tirw-received-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-600);
}
.tirw-disp-card {
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
  margin-top: 12px;
}
.tirw-disp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.tirw-disp-proof {
  margin-top: 8px;
}
.tirw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.tirw-card-subtitle {
  font-size: 13px;
  color: var(--gray-500);
}
.tirw-remaining {
  font-size: 13px;
}
.tirw-remaining--over {
  color: var(--red-500);
}
.tirw-remaining--ok {
  color: var(--green-600);
}
.tirw-shipper-wrap {
  margin-top: 12px;
  max-width: 360px;
}
.tirw-split-btn-wrap {
  margin-top: 12px;
}
/* packing-slip.js (main-doc dialog; popup-doc classes live in SLIP_STYLES) */
.pks-dlg-section {
  margin-bottom: 16px;
}
.pks-dlg-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.pks-dlg-checkbox {
  width: 18px;
  height: 18px;
}
#ps-pallet-config.is-hidden {
  display: none;
}
.pks-dlg-row {
  display: flex;
  gap: 16px;
  align-items: end;
  margin-bottom: 12px;
}
.pks-dlg-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-40, #4b5563);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pks-dlg-num-input {
  width: 120px;
  padding: 8px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 4px;
}
.pks-dlg-checkbox-label-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pks-dlg-help {
  font-size: 12px;
  color: var(--wa-color-neutral-40, #4b5563);
  margin-bottom: 12px;
}
.pks-alloc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pks-alloc-label {
  min-width: 80px;
  font-size: 13px;
}
.pks-alloc-input {
  width: 90px;
  padding: 4px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 4px;
}
.pks-item-card {
  background: var(--wa-color-neutral-50, #f9fafb);
  border: 1px solid var(--wa-color-neutral-80, #e5e7eb);
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.pks-item-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.pks-item-total-hint {
  color: var(--wa-color-neutral-40, #4b5563);
  font-weight: 400;
}
.pks-cells-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pks-total {
  font-size: 12px;
  color: var(--wa-color-neutral-40, #4b5563);
  margin-top: 6px;
}
.pks-total--ok {
  color: var(--wa-color-success-40, #16a34a);
}
.pks-total--mismatch {
  color: var(--wa-color-danger-40, #dc2626);
}
/* accounts-list.js */
.acl-error-text {
  color: red;
}
.acl-header-actions {
  display: flex;
  gap: 8px;
}
.acl-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.acl-search-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.acl-filter-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.acl-count-label {
  color: var(--gray-500);
  font-size: 13px;
}
.list-table td.acl-empty {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.acl-cell-strong {
  font-weight: 600;
}
.acl-active-chip {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #dcfce7;
  color: #16a34a;
}
.acl-inactive-chip {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #fecaca;
  color: #dc2626;
}
.acl-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acl-dialog-overlay.is-hidden {
  display: none;
}
.acl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 460px;
  max-width: 560px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
}
.acl-dlg-title {
  margin-bottom: 16px;
}
.acl-dlg-field {
  margin-bottom: 12px;
}
.acl-dlg-field-last {
  margin-bottom: 16px;
}
.acl-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.acl-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.acl-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.acl-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.acl-dlg-status--error {
  color: red;
}
.acl-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.acl-type-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.acl-type-badge--asset {
  background: #dbeafe;
  color: #1e40af;
}
.acl-type-badge--liability {
  background: #fef3c7;
  color: #92400e;
}
.acl-type-badge--equity {
  background: #ede9fe;
  color: #5b21b6;
}
.acl-type-badge--revenue {
  background: #dcfce7;
  color: #16a34a;
}
.acl-type-badge--expense {
  background: #fecaca;
  color: #dc2626;
}
.acl-type-badge--neutral {
  background: #f3f4f6;
  color: #6b7280;
}
/* bank-accounts-list.js */
.bal-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.bal-badge--manual {
  background: #f3f4f6;
  color: #6b7280;
}
.bal-badge--csv {
  background: #e0f2fe;
  color: #0369a1;
}
.bal-badge--plaid {
  background: #dcfce7;
  color: #16a34a;
}
.bal-badge--akoya {
  background: #ede9fe;
  color: #7c3aed;
}
.bal-badge--mx {
  background: #fef3c7;
  color: #d97706;
}
.bal-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.bal-badge--inactive {
  background: #fef9c3;
  color: #a16207;
}
.bal-badge--closed {
  background: #fecaca;
  color: #dc2626;
}
.bal-badge--neutral {
  background: #f3f4f6;
  color: #6b7280;
}
.bal-amount {
  font-family: monospace;
}
.bal-amount--pos {
  color: #16a34a;
}
.bal-amount--neg {
  color: #dc2626;
}
.bal-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bal-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.bal-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.bal-card-spaced {
  margin-top: 16px;
}
.bal-empty-note {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}
.list-table th.bal-col-right {
  text-align: right;
}
.bal-cell-strong {
  font-weight: 500;
}
.bal-cell-right {
  text-align: right;
}
.bal-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.bal-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bal-dialog-overlay.is-hidden {
  display: none;
}
.bal-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 460px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.bal-dlg-title {
  margin-bottom: 16px;
}
.bal-dlg-field {
  margin-bottom: 12px;
}
.bal-dlg-field-last {
  margin-bottom: 16px;
}
.bal-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.bal-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.bal-dlg-input--mono {
  font-family: monospace;
}
.bal-dlg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.bal-dlg-status {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.bal-dlg-status--error {
  color: red;
}
.bal-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Batch 24: fermentation-list.js (ferl-), role-detail.js (rld-),
   blending-recipes-list.js (brl-), churn-risk.js (chr-),
   bank-reconciliation.js (bkr-), inventory-item-detail.js (iid-),
   vendor-shortfall-claim-detail.js (vscd-), audit-log.js (adl-) */

/* fermentation-list.js */
.ferl-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ferl-active-by-tank {
  margin-bottom: 16px;
}
.ferl-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ferl-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.ferl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.list-table th.ferl-col-right {
  text-align: right;
}
.ferl-create-dialog {
  --width: 480px;
}
.ferl-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ferl-tank-heading {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ferl-tank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.ferl-tank-card {
  cursor: pointer;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 12px;
  background: white;
  transition: box-shadow 120ms;
}
.ferl-tank-name {
  font-weight: 600;
  font-size: 14px;
}
.ferl-tank-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.ferl-tank-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-size: 12px;
}
.ferl-tank-status {
  color: #6b7280;
}
.ferl-tank-gravity {
  font-family: monospace;
  font-weight: 500;
}
.list-table td.ferl-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.ferl-cell-strong {
  font-weight: 500;
}
.ferl-cell-right {
  text-align: right;
}
.ferl-error-text {
  color: red;
}
.ferl-dialog-stack {
  display: grid;
  gap: 12px;
}
.ferl-linked-note {
  padding: 8px 12px;
  background: var(--wa-color-brand-95);
  border-radius: 6px;
  font-size: 13px;
}
.ferl-linked-id {
  font-family: monospace;
  font-size: 11px;
  color: var(--wa-color-neutral-50);
  margin-top: 2px;
}
.ferl-batch-grid {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
}
.ferl-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.ferl-status-badge--created {
  background: #f3f4f6;
  color: #374151;
}
.ferl-status-badge--pitched {
  background: #fef3c7;
  color: #92400e;
}
.ferl-status-badge--active {
  background: #dbeafe;
  color: #1e40af;
}
.ferl-status-badge--crashing {
  background: #e0e7ff;
  color: #3730a3;
}
.ferl-status-badge--transferring {
  background: #fce7f3;
  color: #9d174d;
}
.ferl-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}
.ferl-status-badge--failed {
  background: #fee2e2;
  color: #991b1b;
}

/* role-detail.js */
.rld-permission-note {
  padding: 24px;
  color: var(--gray-500);
}
.rld-loading-note {
  padding: 24px;
}
.rld-error-note {
  padding: 24px;
  color: red;
}
.detail-header.rld-header {
  align-items: flex-start;
  padding: 24px;
}
.rld-badge-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.rld-header-actions {
  display: flex;
  gap: 8px;
}
.rld-system-note-wrap {
  padding: 0 24px 12px;
}
.rld-system-note {
  margin: 0;
  color: var(--gray-500);
  font-size: 13px;
}
.rld-body {
  padding: 0 24px 24px;
}
.rld-card {
  padding: 20px;
}
.rld-name-row {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}
.rld-flex-input {
  flex: 1;
  min-width: 240px;
}
.rld-bulk-row {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gray-500);
}
.rld-show-codes-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  cursor: pointer;
}
.rld-grid-scroll {
  margin-top: 16px;
  overflow-x: auto;
}
.rld-th-name {
  width: 18%;
}
.codes-col.is-hidden {
  display: none;
}
.rld-th-codes {
  width: 22%;
}
.list-table th.rld-th-axis {
  text-align: center;
  width: 96px;
}
.rld-code-empty {
  color: var(--gray-400);
  font-size: 12px;
}
.rld-code-chip {
  display: inline-block;
  font-family: monospace;
  font-size: 11.5px;
  color: var(--gray-500);
  margin: 0 8px 4px 0;
  white-space: nowrap;
}
.list-table td.rld-empty-cell {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.list-table td.rld-category-cell {
  padding: 14px 8px 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
}
.list-table td.rld-td-top {
  vertical-align: top;
  padding-top: 14px;
}
.rld-domain-label {
  font-weight: 600;
}
.list-table td.rld-td-desc {
  vertical-align: top;
  padding-top: 14px;
  line-height: 1.5;
}
.list-table td.rld-td-codes {
  vertical-align: top;
  padding-top: 14px;
  line-height: 1.5;
}
.list-table td.rld-td-axis {
  text-align: center;
  vertical-align: top;
  padding-top: 12px;
}

/* blending-recipes-list.js */
.brl-group-label {
  padding: 4px 12px;
  color: var(--wa-color-neutral-50);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.brl-ingredient-grid {
  display: grid;
  grid-template-columns: 36px 120px 1fr 80px 80px 80px 36px;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.brl-qualification-grid {
  display: grid;
  grid-template-columns: 2fr 110px 120px 120px;
  gap: 8px;
  margin-top: 6px;
}
.ing-origin-state.is-hidden,
.ing-count-field.is-hidden,
#br-sizing-basis.is-hidden,
#br-target-volume-fields.is-hidden,
#br-flexible-help.is-hidden {
  display: none;
}
.brl-anchor-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.brl-anchor-hint {
  font-size: 10px;
  color: var(--wa-color-neutral-50);
  white-space: nowrap;
}
.brl-anchor-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--wa-color-brand-40);
}
.brl-remove-spacer {
  height: 36px;
}
.brl-remove-btn {
  height: 36px;
  min-width: 36px;
  padding: 0;
}
.brl-addition-grid {
  display: grid;
  grid-template-columns: 1fr 80px 80px 28px;
  gap: 6px;
  align-items: end;
  margin-bottom: 4px;
}
.brl-corrective-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 70px 70px 28px;
  gap: 6px;
  align-items: end;
  margin-bottom: 4px;
}
.brl-small-remove-btn {
  height: 28px;
  min-width: 28px;
  padding: 0;
}
.brl-small-icon {
  font-size: 12px;
}
.brl-step-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 80px 80px 80px auto;
  gap: 8px;
  align-items: end;
}
.brl-step-sub-grid {
  display: grid;
  grid-template-columns: 80px 80px;
  gap: 8px;
  margin-top: 4px;
  padding-left: 8px;
}
.brl-step-additions {
  padding-left: 8px;
  margin-top: 6px;
}
.brl-add-addition-btn {
  margin-top: 2px;
  height: 24px;
  font-size: 12px;
  padding-left: 8px;
  color: var(--wa-color-neutral-50);
}
.brl-step-correctives {
  padding-left: 8px;
  margin-top: 4px;
}
.brl-add-corrective-btn {
  margin-top: 2px;
  height: 24px;
  font-size: 12px;
  padding-left: 8px;
  color: var(--wa-color-warning-40, #d97706);
}
.brl-create-dialog {
  --width: 920px;
}
.brl-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.brl-sizing-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.brl-card-radio-title {
  font-size: 14px;
  font-weight: 500;
}
.brl-card-radio-help {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.brl-span-2 {
  grid-column: span 2;
}
.brl-target-volume-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.brl-flexible-help {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.brl-assessment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.brl-assessment-classification,
.brl-assessment-account {
  margin-left: 6px;
}
.brl-assessment-reasons {
  margin-top: 4px;
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.brl-assessment-error {
  font-size: 12px;
  color: var(--wa-color-danger-40);
}
.brl-notes-textarea {
  margin-top: 12px;
}
.brl-section {
  margin-top: 20px;
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 16px;
}
.brl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.brl-section-title {
  margin: 0;
  font-size: 15px;
}
.brl-section-help {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
  margin-top: 4px;
}
.brl-labor-section {
  margin-top: 20px;
}
.brl-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* churn-risk.js */
.chr-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.chr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.chr-title {
  margin: 0;
}
.chr-cards-wrap {
  margin-bottom: 24px;
}
.chr-loading {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
}
.chr-error-card {
  padding: 24px;
  color: #991b1b;
}
.chr-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.chr-risk-card {
  padding: 20px;
  border: none;
  text-align: center;
}
.chr-risk-card--critical {
  background: #fee2e2;
}
.chr-risk-card--critical .chr-risk-label,
.chr-risk-card--critical .chr-risk-count {
  color: #991b1b;
}
.chr-risk-card--high {
  background: #fef3c7;
}
.chr-risk-card--high .chr-risk-label,
.chr-risk-card--high .chr-risk-count {
  color: #92400e;
}
.chr-risk-card--medium {
  background: #fef9c3;
}
.chr-risk-card--medium .chr-risk-label,
.chr-risk-card--medium .chr-risk-count {
  color: #854d0e;
}
.chr-risk-card--low {
  background: #d1fae5;
}
.chr-risk-card--low .chr-risk-label,
.chr-risk-card--low .chr-risk-count {
  color: #065f46;
}
.chr-risk-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.chr-risk-count {
  font-size: 32px;
  font-weight: 700;
}
.chr-table-card {
  padding: 0;
  overflow: hidden;
}
.chr-table-scroll {
  overflow-x: auto;
}
.chr-th-sortable {
  cursor: pointer;
}
.chr-th-score {
  min-width: 160px;
}
.list-table th.chr-th-sortable-right {
  text-align: right;
  cursor: pointer;
}
.list-table td.chr-empty-cell {
  text-align: center;
  color: var(--gray-400);
  padding: 24px;
}
.chr-customer-link {
  color: #2563eb;
  text-decoration: none;
}
.chr-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chr-score-track {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.chr-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.chr-score-fill--critical {
  background: #991b1b;
}
.chr-score-fill--high {
  background: #92400e;
}
.chr-score-fill--medium {
  background: #854d0e;
}
.chr-score-fill--low {
  background: #065f46;
}
.chr-score-pct {
  font-size: 12px;
  font-weight: 500;
  min-width: 36px;
  text-align: right;
}
.chr-level-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.chr-level-chip--critical {
  background: #fee2e2;
  color: #991b1b;
}
.chr-level-chip--high {
  background: #fef3c7;
  color: #92400e;
}
.chr-level-chip--medium {
  background: #fef9c3;
  color: #854d0e;
}
.chr-level-chip--low {
  background: #d1fae5;
  color: #065f46;
}
.chr-cell-right {
  text-align: right;
}
.chr-signal-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  background: #f3f4f6;
  color: #374151;
  margin: 1px 2px;
}

/* bank-reconciliation.js */
.bkr-amount {
  font-family: monospace;
  font-weight: 500;
}
.bkr-amount--pos {
  color: #16a34a;
}
.bkr-amount--neg {
  color: #dc2626;
}
.bkr-setup-card {
  margin-top: 24px;
  max-width: 600px;
}
.bkr-card-title {
  margin-bottom: 16px;
}
.bkr-card-title--flush {
  margin-bottom: 12px;
  flex-shrink: 0;
}
.bkr-field {
  margin-bottom: 12px;
}
.bkr-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.bkr-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.bkr-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.bkr-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.bkr-status--error {
  color: red;
}
.bkr-recon-summary {
  font-size: 13px;
  color: var(--gray-500);
}
.bkr-header-actions {
  display: flex;
  gap: 8px;
}
.bkr-abandon-btn {
  color: #dc2626;
}
.bkr-txn-card {
  margin-top: 16px;
  max-height: 700px;
  display: flex;
  flex-direction: column;
}
.bkr-txn-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.bkr-txn-scroll {
  overflow-y: auto;
  flex: 1;
}
.list-table th.bkr-col-right {
  text-align: right;
}
.bkr-col-action {
  width: 100px;
}
.list-table td.bkr-cell-date {
  font-size: 12px;
  white-space: nowrap;
}
.list-table td.bkr-cell-small {
  font-size: 12px;
}
.bkr-cell-right {
  text-align: right;
}
.bkr-match-btn {
  font-size: 11px;
  padding: 1px 8px;
  color: #16a34a;
}
.bkr-empty-note {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.bkr-summary-bar {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 2px solid var(--gray-200);
  padding: 12px 24px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 8px 8px;
}
.bkr-summary-left {
  display: flex;
  gap: 24px;
}
.bkr-summary-label {
  font-size: 12px;
  color: var(--gray-500);
}
.bkr-summary-value {
  font-size: 16px;
  font-weight: 600;
  margin-left: 8px;
}
.bkr-summary-value--matched {
  color: #16a34a;
}
.bkr-summary-value--unmatched {
  color: #a16207;
}
.bkr-summary-right {
  text-align: right;
}
.bkr-diff-value {
  font-size: 18px;
  font-weight: 700;
  margin-left: 8px;
}
.bkr-diff--ok {
  color: #16a34a;
}
.bkr-diff--off {
  color: #dc2626;
}
.bkr-ready-note {
  font-size: 11px;
  color: #16a34a;
  margin-left: 8px;
}

/* inventory-item-detail.js */
.auth-error.iid-inactive-banner {
  background: #fee;
  border: 1px solid #c33;
  border-radius: 4px;
  margin-bottom: 12px;
}
.iid-reactivate-btn {
  margin-left: 8px;
}
.iid-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.iid-type-label {
  margin: 0;
}
.iid-type-input-wrap {
  position: relative;
}
.iid-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.iid-suggestions.is-hidden {
  display: none;
}
.iid-supplier-hint {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 4px;
}
.iid-tracking-label {
  font-weight: 600;
  margin-bottom: 8px;
}
.iid-metered-note {
  font-size: 13px;
  color: var(--gray-500);
  padding: 4px 0 12px;
}
.iid-stock-current {
  padding: 12px;
  background: var(--gray-50, #f9fafb);
  border-radius: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.iid-stock-current--spaced {
  margin-bottom: 16px;
  gap: 8px;
}
.iid-stock-value {
  font-size: 28px;
  font-weight: 700;
}
.iid-stock-unit {
  font-size: 14px;
  color: var(--gray-500);
}
.iid-lot-rollup-note {
  font-size: 13px;
  color: var(--gray-500);
  padding: 8px 0;
}
.iid-lots-panel.is-hidden {
  display: none;
}
.iid-lots-panel {
  margin-top: 12px;
}
.iid-update-stock-wrap {
  margin-top: 8px;
}
.iid-detail-error.is-hidden {
  display: none;
}
#unit-save-error.is-hidden {
  display: none;
}
.iid-custom-tag {
  font-size: 11px;
  color: var(--gray-400);
}
.iid-loading-note {
  font-size: 13px;
  color: var(--gray-500);
}
.iid-lots-table th {
  text-align: left;
}
.iid-lots-table th.iid-lots-col-right,
.iid-lots-table td.iid-lots-col-right {
  text-align: right;
}
.iid-lots-table-scroll {
  overflow-x: auto;
}
.iid-lots-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.iid-mismatch-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--wa-color-warning-30);
}

/* vendor-shortfall-claim-detail.js */
.vscd-info-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid var(--wa-color-neutral-90, #f3f4f6);
}
.vscd-info-label {
  color: var(--wa-color-neutral-50, #6b7280);
  font-size: 13px;
}
.vscd-info-value {
  font-size: 13px;
  font-weight: 500;
}
.vscd-error-text {
  color: var(--wa-color-danger-30);
}
.vscd-back-link {
  font-size: 13px;
  color: var(--brand);
  text-decoration: none;
}
.vscd-title {
  margin-top: 4px;
}
.vscd-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.vscd-card-title {
  margin-bottom: 12px;
}
.vscd-amount {
  font-weight: 700;
}
.vscd-provenance-card {
  margin-bottom: 24px;
}
.vscd-link {
  color: var(--brand);
  text-decoration: none;
}
.vscd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vscd-status-msg {
  margin-top: 8px;
  font-size: 13px;
}
.vscd-status-msg--error {
  color: var(--wa-color-danger-30);
}
.vscd-card-spaced {
  margin-top: 24px;
}
.vscd-timeline-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vscd-timeline-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.vscd-timeline-label {
  min-width: 130px;
  font-size: 13px;
  font-weight: 600;
}
.vscd-timeline-ts {
  font-size: 12px;
  color: var(--wa-color-neutral-50, #6b7280);
}
.vscd-no-timeline {
  font-size: 13px;
  color: var(--wa-color-neutral-60);
}
.vscd-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vscd-dialog-overlay.is-hidden {
  display: none;
}
.vscd-dialog-box {
  background: var(--wa-color-neutral-95, white);
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.vscd-no-actions {
  font-size: 13px;
  color: var(--wa-color-neutral-60);
}
.vscd-dlg-title {
  margin-bottom: 16px;
}
.vscd-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.vscd-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 6px;
  resize: vertical;
}
.vscd-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--wa-color-neutral-70, #d1d5db);
  border-radius: 6px;
}
.vscd-dlg-status {
  font-size: 12px;
  margin: 8px 0;
  color: var(--wa-color-danger-30);
}
.vscd-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* audit-log.js */
.adl-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
.adl-title {
  margin: 0 0 4px 0;
}
.adl-subtitle {
  margin: 0 0 16px 0;
  color: var(--gray-500);
  font-size: 13px;
}
.adl-filter-card {
  padding: 16px;
  margin-bottom: 16px;
}
.adl-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.adl-date-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.adl-date-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}
.adl-custom-range {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.adl-custom-label {
  font-size: 12px;
  color: var(--gray-600);
}
.adl-custom-input {
  height: 32px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 0 8px;
}
.adl-tz-note {
  font-size: 11px;
  color: var(--gray-400);
}
.adl-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.adl-spacer {
  flex: 1;
}
.adl-loading {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
}
.adl-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adl-window-label {
  color: var(--gray-500);
}
.adl-error-card {
  padding: 24px;
  color: #991b1b;
}
.adl-empty-card {
  padding: 48px;
  text-align: center;
  color: var(--gray-400);
}
.adl-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
}
.adl-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gray-50);
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-200);
}
.adl-th-caret {
  width: 24px;
}
.adl-row {
  border-top: 1px solid var(--gray-200);
  cursor: pointer;
}
.adl-cell-caret {
  padding: 8px 12px;
  color: var(--gray-400);
}
.adl-cell-when {
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--gray-600);
}
.adl-cell-aggregate {
  padding: 8px 12px;
  font-size: 13px;
}
.adl-aggregate-id {
  color: var(--gray-500);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.adl-cell-event {
  padding: 8px 12px;
  font-size: 13px;
}
.adl-cell-actor {
  padding: 8px 12px;
  font-size: 13px;
}
.adl-detail-cell {
  padding: 0 12px 14px;
}
.adl-detail-summary {
  margin-bottom: 10px;
}
.adl-summary-card {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--gray-50);
  padding: 12px 14px;
}
.adl-summary-title {
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.adl-summary-lead {
  color: var(--gray-700);
  font-size: 13px;
}
.adl-summary-loading {
  color: var(--gray-500);
  font-size: 13px;
  padding: 10px 0;
}
.adl-summary-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 18px;
  margin: 12px 0 0;
}
.adl-summary-fact {
  min-width: 0;
}
.adl-summary-fact dt {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.adl-summary-fact dd {
  color: var(--gray-900);
  font-size: 13px;
  margin: 0;
  overflow-wrap: anywhere;
}
.adl-summary-list-title {
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 700;
  margin-top: 12px;
}
.adl-summary-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--gray-800);
  font-size: 13px;
}
.adl-summary-list li + li {
  margin-top: 4px;
}
.adl-detail-technical {
  margin-top: 8px;
}
.adl-detail-technical summary {
  color: var(--gray-600);
  cursor: pointer;
  font-size: 12px;
  margin-bottom: 6px;
}
.adl-detail-json {
  margin: 0;
  padding: 14px 16px;
  background: var(--gray-900);
  color: #e5e7eb;
  border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}
.adl-detail-ids {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray-500);
}

/* Batch 25: bank-transactions-list.js (btl-), corrections.js (corr-),
   costing-dashboard.js (cstd-), distillation-recipe-editor.js (dre-),
   bank-reconciliation-history.js (brh-), bonded-withdrawal-detail.js
   (bwd-), genealogy-viewer.js (gnv-), rfm-segmentation.js (rfm-) */

/* bank-transactions-list.js */
.btl-amount {
  font-family: var(--wa-font-family-mono);
  font-weight: 500;
}
.btl-amount--pos {
  color: #16a34a;
}
.btl-amount--neg {
  color: #dc2626;
}
.btl-workbench {
  max-width: 100%;
}
.btl-subtitle {
  color: var(--wa-color-text-quiet);
  margin: 0;
}
.btl-filter-card {
  margin-block: var(--wa-space-l);
  padding: var(--wa-space-l);
}
.btl-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--wa-space-m);
  align-items: end;
}
.btl-filter-actions,
.btl-pagination {
  display: flex;
  gap: var(--wa-space-s);
  align-items: center;
}
.btl-selected-banner {
  background: var(--wa-color-brand-fill-quiet);
  padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  margin-bottom: var(--wa-space-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-s);
}
.btl-empty-note {
  color: var(--wa-color-text-quiet);
  padding: var(--wa-space-xl);
  text-align: center;
}
.btl-col-checkbox {
  width: 30px;
}
.list-table th.btl-align-right {
  text-align: right;
}
.list-table td.btl-align-right {
  text-align: right;
}
.list-table td.btl-cell-date {
  white-space: nowrap;
}
.btl-table-wrap {
  overflow-x: auto;
}
.btl-row-open {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: var(--wa-space-2xs);
  padding: 0;
  text-align: start;
}
.btl-row-open small {
  color: var(--wa-color-text-quiet);
}
.btl-pagination {
  justify-content: flex-end;
  margin-top: var(--wa-space-m);
}
.btl-review-drawer {
  --size: min(36rem, 100vw);
}
.btl-drawer-stack,
.btl-split-lines,
.btl-evidence {
  display: grid;
  gap: var(--wa-space-m);
}
.btl-fact-card,
.btl-split-line {
  display: grid;
  gap: var(--wa-space-s);
  padding: var(--wa-space-m);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}
.btl-split-line {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.btl-evidence {
  grid-template-columns: max-content 1fr;
}
.btl-evidence dt {
  color: var(--wa-color-text-quiet);
}
.btl-evidence dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.btl-field-help {
  color: var(--wa-color-text-quiet);
}
@media (max-width: 48rem) {
  .btl-filter-grid,
  .btl-split-line {
    grid-template-columns: 1fr;
  }
}

/* corrections.js */
.corr-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}
.corr-title {
  margin: 0 0 4px 0;
}
.corr-subtitle {
  margin: 0 0 20px 0;
  color: var(--gray-500);
}
.corr-preview-out {
  margin-top: 24px;
}
.corr-commit-out {
  margin-top: 16px;
}
.corr-previewing {
  color: var(--gray-400);
  padding: 8px;
}
.corr-card {
  padding: 16px;
}
.corr-card-title {
  margin: 0 0 12px 0;
  font-size: 15px;
}
.corr-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}
.corr-detail-textarea {
  margin-top: 12px;
}
.corr-actions-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.corr-error-text {
  color: #991b1b;
  font-size: 13px;
}
.corr-readonly-notice {
  padding: 16px;
  color: var(--gray-500);
}
.corr-preview-title {
  margin: 0 0 4px 0;
  font-size: 15px;
}
.corr-preview-period {
  margin: 0 0 12px 0;
  color: var(--gray-500);
  font-size: 13px;
}
.corr-section-heading {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: var(--gray-600);
}
.corr-section-heading--spaced {
  margin-top: 16px;
}
.corr-primary-nodrift {
  font-size: 13px;
  padding: 4px 0;
  color: var(--gray-400);
}
.corr-primary-drift {
  padding: 4px 0;
}
.corr-primary-head {
  font-size: 13px;
  font-weight: 600;
}
.corr-drift-warn {
  color: #b45309;
}
.corr-changes-table {
  border-collapse: collapse;
  margin: 2px 0 0 8px;
}
.corr-forward-empty {
  font-size: 13px;
  color: var(--gray-500);
}
.corr-forward-box {
  border-left: 4px solid #b45309;
  background: #fffbeb;
  padding: 8px 12px;
  color: #92400e;
}
.corr-forward-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.corr-forward-row {
  border-top: 1px solid #f3e8c8;
}
.corr-forward-cell {
  padding: 4px 8px;
  font-size: 12px;
}
.corr-replayed-note {
  color: var(--gray-500);
  font-size: 12px;
}
.corr-amend-note {
  margin-top: 6px;
  font-size: 13px;
}
.corr-amend-note--warn {
  color: #92400e;
}
.corr-amend-note--none {
  color: var(--gray-500);
}
.corr-commit-card {
  padding: 16px;
  border-left: 4px solid #15803d;
  background: #f0fdf4;
}
.corr-commit-strong {
  color: #166534;
}
.corr-change-name {
  padding: 2px 12px 2px 0;
  font-size: 12px;
  color: var(--gray-700);
}
.corr-change-name--mono {
  font-family: monospace;
}
.corr-change-from {
  padding: 2px 8px;
  font-size: 12px;
  text-align: right;
  color: var(--gray-500);
}
.corr-change-arrow {
  padding: 2px 4px;
  font-size: 12px;
  color: var(--gray-400);
}
.corr-change-to {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* costing-dashboard.js */
.cstd-grid {
  padding: 0 24px 24px;
  max-width: 1100px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}
.cstd-card {
  padding: 20px;
}
.cstd-card-title {
  margin-bottom: 12px;
}
.cstd-card-desc {
  color: var(--gray-500);
  font-size: 13px;
  margin-bottom: 16px;
}
.cstd-btn-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.cstd-cost-form-grid {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 8px;
  margin-top: 12px;
}
.cstd-notes-textarea {
  margin-top: 8px;
}
.cstd-btn-wrap {
  margin-top: 12px;
}
.cstd-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--gray-500);
}
.cstd-rollup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cstd-rollup-content {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-500);
}
.cstd-status-ok {
  color: var(--gray-600);
}
.cstd-status-warn {
  color: var(--wa-color-warning-30);
}
.cstd-status-danger {
  color: var(--wa-color-danger-30);
}
.cstd-status-success {
  color: var(--wa-color-success-30);
}
.cstd-rollup-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.cstd-summary-box {
  background: var(--wa-color-neutral-50);
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.cstd-summary-label {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.cstd-summary-value {
  font-size: 20px;
  font-weight: 600;
}
.cstd-empty-note {
  color: var(--gray-400);
}
.cstd-rollup-table {
  margin: 0;
  font-size: 13px;
}
.list-table th.cstd-align-right {
  text-align: right;
}
.list-table td.cstd-align-right {
  text-align: right;
}
.list-table td.cstd-align-right-strong {
  text-align: right;
  font-weight: 500;
}

/* cost-policy-settings.js */
.cps-header {
  align-items: center;
}
.cps-card {
  margin-bottom: 16px;
}
.cps-upgrade-review {
  margin-bottom: 16px;
}
.cps-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cps-card-header > div {
  min-width: 0;
}
.cps-card-copy {
  color: var(--gray-600);
  font-size: 13px;
  margin: 4px 0 0;
}
.cps-workflow-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.cps-workflow-note {
  margin-top: 12px;
}
.cps-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}
.cps-form-actions {
  display: flex;
  align-items: end;
}
.cps-profile-guidance {
  margin-top: 12px;
}
.cps-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cps-status {
  color: var(--gray-500);
  font-size: 13px;
}
.cps-table-host {
  min-height: 48px;
}
.cps-table-scroll {
  overflow-x: auto;
}
.cps-table {
  min-width: 980px;
}
.cps-scope-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cps-scope-id {
  color: var(--gray-500);
  font-size: 12px;
}
.cps-field {
  min-width: 140px;
}
.cps-actions-cell {
  white-space: nowrap;
  text-align: right;
}
.cps-empty {
  color: var(--gray-500);
  padding: 12px 0;
}
@media (max-width: 900px) {
  .cps-form-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}
@media (max-width: 560px) {
  .cps-form-grid,
  .cps-workflow-form {
    grid-template-columns: 1fr;
  }
}
.list-table td.cstd-cell-mono {
  font-family: monospace;
  font-size: 12px;
}

/* distillation-recipe-editor.js */
.dre-empty {
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}
.dre-empty.is-hidden {
  display: none;
}
.dre-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.dre-row-remove-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 16px;
}
.dre-input-full {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.dre-legacy-note {
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.dre-field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 8px;
}
.dre-field-label {
  font-size: 11px;
  color: var(--gray-500);
}
.dre-hint-note {
  font-size: 11px;
  color: var(--gray-500);
  margin: 0 0 8px;
}
.dre-field-grid-qty-unit {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: end;
}
.dre-spirit-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 10px;
  align-items: start;
}
.dre-additive-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.dre-relative-wrap {
  position: relative;
}
.dre-out-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dre-out-heading {
  margin: 0;
  font-size: 14px;
  color: var(--gray-700);
}
.dre-out-empty {
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}
.dre-out-empty.is-hidden {
  display: none;
}
.dre-out-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: 6px;
}
.dre-out-error.is-hidden {
  display: none;
}
.dre-out-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dre-frac-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}
.dre-frac-select {
  display: inline-block;
  width: auto;
  margin-left: 6px;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.dre-out-remove-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 18px;
}
.dre-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.dre-band-box {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.dre-band-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}

/* bank-reconciliation-history.js */
.brh-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.brh-status-badge--in_progress {
  background: #dbeafe;
  color: #2563eb;
}
.brh-status-badge--completed {
  background: #dcfce7;
  color: #16a34a;
}
.brh-status-badge--abandoned {
  background: #f3f4f6;
  color: #6b7280;
}
.brh-amount {
  font-family: monospace;
  font-weight: 500;
}
.brh-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.brh-filter-card {
  margin-top: 16px;
  margin-bottom: 16px;
}
.brh-filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.brh-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.brh-filter-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.brh-filter-input--wide {
  min-width: 200px;
}
.brh-empty-note {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}
.list-table th.brh-align-right {
  text-align: right;
}
.list-table td.brh-align-right {
  text-align: right;
}
.brh-recon-row {
  cursor: pointer;
}
.brh-recon-row--selected {
  background: #f0f9ff;
}
.list-table td.brh-cell-strong-right {
  text-align: right;
  font-weight: 500;
}
.list-table td.brh-cell-notes {
  font-size: 12px;
  color: var(--gray-500);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brh-detail-card {
  margin-top: 24px;
}
.brh-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.brh-detail-title {
  margin: 0;
}
.brh-close-btn {
  font-size: 11px;
}
.brh-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.brh-summary-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.brh-summary-text {
  font-size: 13px;
}
.brh-summary-mono {
  font-family: monospace;
}
.brh-diff--ok {
  color: #16a34a;
}
.brh-diff--bad {
  color: #dc2626;
}
.brh-matched-heading {
  margin-bottom: 8px;
}
.brh-matched-scroll {
  max-height: 300px;
  overflow-y: auto;
}
.brh-matched-list {
  font-size: 12px;
  font-family: monospace;
  color: var(--gray-600);
  padding-left: 20px;
}
.brh-no-matched {
  color: var(--gray-400);
  font-size: 13px;
}

/* WORK-557 reconciliation workspace */
.bkr-v2 {
  display: grid;
  gap: var(--wa-space-l);
}
.bkr-v2-setup,
.bkr-v2-panel,
.bkr-evidence {
  display: grid;
  gap: var(--wa-space-m);
}
.bkr-v2-form-grid,
.bkr-v2-evidence-grid,
.bkr-v2-toolbar,
.bkr-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--wa-space-m);
}
.bkr-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wa-space-l);
}
.bkr-v2-table-wrap {
  overflow-x: auto;
}
.bkr-v2-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bkr-v2-row-actions,
.bkr-v2-actions,
.bkr-evidence-header {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  justify-content: space-between;
  flex-wrap: wrap;
}
.bkr-v2-summary {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--wa-space-s);
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-default);
  box-shadow: var(--wa-shadow-l);
}
.bkr-v2-summary-item {
  display: grid;
  gap: var(--wa-space-2xs);
  font-variant-numeric: tabular-nums;
}
.bkr-v2-summary-item.is-balanced strong { color: var(--wa-color-success-60); }
.bkr-v2-summary-item.is-blocked strong { color: var(--wa-color-danger-60); }
.bkr-v2-muted { color: var(--wa-color-text-quiet); }
.bkr-v2-panel tr.is-selected,
.bkr-v2-panel tr.is-suggested { background: var(--wa-color-brand-fill-quiet); }
.bkr-v2-mobile-tabs { display: none; }
.bkr-evidence-receipt {
  display: grid;
  gap: var(--wa-space-m);
  padding-block: var(--wa-space-m);
  border-top: 1px solid var(--wa-color-surface-border);
}
.bkr-evidence-grid dt { color: var(--wa-color-text-quiet); }
.bkr-evidence-grid dd { margin: var(--wa-space-2xs) 0 0; overflow-wrap: anywhere; }
.bkr-evidence-members { display: grid; gap: var(--wa-space-xs); margin-top: var(--wa-space-s); }

@media (max-width: 800px) {
  .bkr-v2-grid { grid-template-columns: 1fr; }
  .bkr-v2-summary { position: static; }
}

/* bonded-withdrawal-detail.js */
.detail-header.bwd-new-header {
  padding: 24px;
}
.bwd-form-body {
  padding: 0 24px 24px;
  max-width: 760px;
}
.bwd-card {
  padding: 20px;
}
.bwd-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  margin: 16px 0 6px;
}
.bwd-required-mark {
  color: var(--red-500);
}
.bwd-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gray-500);
}
.bwd-shipto-textarea {
  margin-top: 12px;
}
.bwd-paperwork {
  margin-top: 16px;
}
.bwd-paperwork.is-hidden {
  display: none;
}
.bwd-pw-section.is-hidden {
  display: none;
}
.bwd-notes-textarea {
  margin-top: 16px;
}
.bwd-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}
.bwd-error-text {
  color: red;
}
.detail-header.bwd-existing-header {
  align-items: flex-start;
  padding: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.bwd-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.bwd-h1-flush {
  margin: 0;
}
.bwd-recipient-line {
  color: var(--gray-600);
  font-size: 14px;
}
.bwd-pre-line {
  white-space: pre-line;
}
.bwd-shipped-note {
  color: var(--gray-500);
  font-size: 13px;
  margin-top: 4px;
}
.bwd-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bwd-content-grid {
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.bwd-section-title {
  margin-top: 0;
  font-size: 18px;
}
.list-table th.bwd-align-right {
  text-align: right;
}
.list-table td.bwd-align-right {
  text-align: right;
}
.bwd-add-item-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
.bwd-add-item-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--gray-700);
}
.bwd-add-item-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap: 8px;
  align-items: end;
}
.bwd-summary-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.bwd-danger-text {
  color: var(--red-600);
}
.bwd-notes-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
  white-space: pre-line;
}
.list-table td.bwd-empty-cell {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.list-table td.bwd-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.list-table td.bwd-cell-mono-muted {
  font-family: monospace;
  font-size: 12px;
  color: var(--gray-500);
}

/* genealogy-viewer.js */
.gnv-type-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.gnv-type-badge--inventory-item { background: #92400e18; color: #92400e; border: 1px solid #92400e40; }
.gnv-type-badge--material-lot { background: #92400e18; color: #92400e; border: 1px solid #92400e40; }
.gnv-type-badge--mash-recipe { background: #ca8a0418; color: #ca8a04; border: 1px solid #ca8a0440; }
.gnv-type-badge--mashing-process { background: #ca8a0418; color: #ca8a04; border: 1px solid #ca8a0440; }
.gnv-type-badge--fermentation-recipe { background: #16a34a18; color: #16a34a; border: 1px solid #16a34a40; }
.gnv-type-badge--fermentation-process { background: #16a34a18; color: #16a34a; border: 1px solid #16a34a40; }
.gnv-type-badge--distillation-profile { background: #2563eb18; color: #2563eb; border: 1px solid #2563eb40; }
.gnv-type-badge--batch-distillation-process { background: #2563eb18; color: #2563eb; border: 1px solid #2563eb40; }
.gnv-type-badge--continuous-distillation-process { background: #4f46e518; color: #4f46e5; border: 1px solid #4f46e540; }
.gnv-type-badge--spirit-lot { background: #0891b218; color: #0891b2; border: 1px solid #0891b240; }
.gnv-type-badge--blending-recipe { background: #7c3aed18; color: #7c3aed; border: 1px solid #7c3aed40; }
.gnv-type-badge--blending-process { background: #7c3aed18; color: #7c3aed; border: 1px solid #7c3aed40; }
.gnv-type-badge--barrel-specification { background: #ea580c18; color: #ea580c; border: 1px solid #ea580c40; }
.gnv-type-badge--barrel { background: #ea580c18; color: #ea580c; border: 1px solid #ea580c40; }
.gnv-type-badge--fill-process { background: #ea580c18; color: #ea580c; border: 1px solid #ea580c40; }
.gnv-type-badge--harvest-process { background: #ea580c18; color: #ea580c; border: 1px solid #ea580c40; }
.gnv-type-badge--product-spec { background: #db277718; color: #db2777; border: 1px solid #db277740; }
.gnv-type-badge--bottling-process { background: #db277718; color: #db2777; border: 1px solid #db277740; }
.gnv-type-badge--bottled-product-lot { background: #e11d4818; color: #e11d48; border: 1px solid #e11d4840; }
.gnv-type-badge--default { background: #6b728018; color: #6b7280; border: 1px solid #6b728040; }
.gnv-node-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gnv-node-dot--inventory-item { background: #92400e; }
.gnv-node-dot--material-lot { background: #92400e; }
.gnv-node-dot--mash-recipe { background: #ca8a04; }
.gnv-node-dot--mashing-process { background: #ca8a04; }
.gnv-node-dot--fermentation-recipe { background: #16a34a; }
.gnv-node-dot--fermentation-process { background: #16a34a; }
.gnv-node-dot--distillation-profile { background: #2563eb; }
.gnv-node-dot--batch-distillation-process { background: #2563eb; }
.gnv-node-dot--continuous-distillation-process { background: #4f46e5; }
.gnv-node-dot--spirit-lot { background: #0891b2; }
.gnv-node-dot--blending-recipe { background: #7c3aed; }
.gnv-node-dot--blending-process { background: #7c3aed; }
.gnv-node-dot--barrel-specification { background: #ea580c; }
.gnv-node-dot--barrel { background: #ea580c; }
.gnv-node-dot--fill-process { background: #ea580c; }
.gnv-node-dot--harvest-process { background: #ea580c; }
.gnv-node-dot--product-spec { background: #db2777; }
.gnv-node-dot--bottling-process { background: #db2777; }
.gnv-node-dot--bottled-product-lot { background: #e11d48; }
.gnv-node-dot--default { background: #6b7280; }
.gnv-filter-card {
  margin-bottom: 24px;
}
.gnv-filter-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.gnv-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.gnv-type-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.gnv-id-wrap {
  flex: 1;
  min-width: 240px;
}
.gnv-id-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
}
.gnv-direction-wrap {
  display: flex;
  gap: 0;
}
.gnv-dir-btn {
  padding: 8px 14px;
}
.gnv-dir-btn--left {
  border-radius: 6px 0 0 6px;
}
.gnv-dir-btn--mid {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.gnv-dir-btn--right {
  border-radius: 0 6px 6px 0;
}
.gnv-trace-btn {
  padding: 8px 20px;
}
.gnv-view-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.gnv-view-btn {
  font-size: 12px;
}
.gnv-spacer {
  flex: 1;
}
.gnv-meta-info {
  font-size: 12px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 12px;
}
.gnv-hint-note {
  color: var(--gray-400);
}
.gnv-error-text {
  color: #c00;
}
.gnv-section-spaced {
  margin-top: 16px;
}
.gnv-flat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.gnv-flat-heading {
  margin-bottom: 12px;
}
.gnv-flat-scroll {
  max-height: 500px;
  overflow-y: auto;
}
.gnv-flat-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
}
.gnv-node-link {
  font-weight: 500;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.gnv-node-label {
  font-weight: 500;
  font-size: 13px;
}
.gnv-node-id {
  font-family: monospace;
  font-size: 11px;
  color: var(--gray-400);
  margin-left: auto;
}
.gnv-edge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}
.gnv-edge-id {
  font-family: monospace;
  font-size: 11px;
}
.gnv-edge-arrow {
  color: var(--gray-400);
}
.gnv-edge-relation {
  color: var(--gray-500);
  font-size: 11px;
  margin-left: auto;
}
.gnv-no-edges {
  color: var(--gray-400);
  font-size: 13px;
}

/* rfm-segmentation.js */
.rfm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.rfm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.rfm-title {
  margin: 0;
}
.rfm-header-actions {
  display: flex;
  gap: 8px;
}
.rfm-overview-wrap {
  margin-bottom: 24px;
}
.rfm-filter-card {
  padding: 16px;
  margin-bottom: 16px;
}
.rfm-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rfm-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}
.rfm-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.rfm-loading {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
}
.rfm-error-card {
  padding: 24px;
  color: #991b1b;
}
.rfm-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.rfm-segment-card {
  padding: 16px;
  border: none;
  cursor: pointer;
}
.rfm-segment-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.rfm-segment-count {
  font-size: 22px;
  font-weight: 700;
}
.rfm-segment-revenue {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}
.rfm-segment-card--champion { background: #fef3c7; }
.rfm-segment-card--champion .rfm-segment-name, .rfm-segment-card--champion .rfm-segment-count, .rfm-segment-card--champion .rfm-segment-revenue { color: #92400e; }
.rfm-segment-card--loyal { background: #d1fae5; }
.rfm-segment-card--loyal .rfm-segment-name, .rfm-segment-card--loyal .rfm-segment-count, .rfm-segment-card--loyal .rfm-segment-revenue { color: #065f46; }
.rfm-segment-card--potential-loyalist { background: #dbeafe; }
.rfm-segment-card--potential-loyalist .rfm-segment-name, .rfm-segment-card--potential-loyalist .rfm-segment-count, .rfm-segment-card--potential-loyalist .rfm-segment-revenue { color: #1e40af; }
.rfm-segment-card--new-customer { background: #e0e7ff; }
.rfm-segment-card--new-customer .rfm-segment-name, .rfm-segment-card--new-customer .rfm-segment-count, .rfm-segment-card--new-customer .rfm-segment-revenue { color: #3730a3; }
.rfm-segment-card--promising { background: #fce7f3; }
.rfm-segment-card--promising .rfm-segment-name, .rfm-segment-card--promising .rfm-segment-count, .rfm-segment-card--promising .rfm-segment-revenue { color: #9d174d; }
.rfm-segment-card--need-attention { background: #fef3c7; }
.rfm-segment-card--need-attention .rfm-segment-name, .rfm-segment-card--need-attention .rfm-segment-count, .rfm-segment-card--need-attention .rfm-segment-revenue { color: #92400e; }
.rfm-segment-card--about-to-sleep { background: #f3f4f6; }
.rfm-segment-card--about-to-sleep .rfm-segment-name, .rfm-segment-card--about-to-sleep .rfm-segment-count, .rfm-segment-card--about-to-sleep .rfm-segment-revenue { color: #374151; }
.rfm-segment-card--at-risk { background: #fee2e2; }
.rfm-segment-card--at-risk .rfm-segment-name, .rfm-segment-card--at-risk .rfm-segment-count, .rfm-segment-card--at-risk .rfm-segment-revenue { color: #991b1b; }
.rfm-segment-card--cant-lose { background: #fecaca; }
.rfm-segment-card--cant-lose .rfm-segment-name, .rfm-segment-card--cant-lose .rfm-segment-count, .rfm-segment-card--cant-lose .rfm-segment-revenue { color: #991b1b; }
.rfm-segment-card--hibernating { background: #e5e7eb; }
.rfm-segment-card--hibernating .rfm-segment-name, .rfm-segment-card--hibernating .rfm-segment-count, .rfm-segment-card--hibernating .rfm-segment-revenue { color: #374151; }
.rfm-segment-card--lost { background: #f3f4f6; }
.rfm-segment-card--lost .rfm-segment-name, .rfm-segment-card--lost .rfm-segment-count, .rfm-segment-card--lost .rfm-segment-revenue { color: #374151; }
.rfm-segment-card--unknown { background: #f3f4f6; }
.rfm-segment-card--unknown .rfm-segment-name, .rfm-segment-card--unknown .rfm-segment-count, .rfm-segment-card--unknown .rfm-segment-revenue { color: #374151; }
.rfm-table-card {
  padding: 0;
  overflow: hidden;
}
.rfm-table-scroll {
  overflow-x: auto;
}
.rfm-th-sortable {
  cursor: pointer;
}
.list-table th.rfm-th-center {
  text-align: center;
  cursor: pointer;
}
.list-table th.rfm-th-right {
  text-align: right;
  cursor: pointer;
}
.list-table td.rfm-empty-cell {
  text-align: center;
  color: var(--gray-400);
  padding: 24px;
}
.rfm-customer-link {
  color: #2563eb;
  text-decoration: none;
}
.rfm-cell-center {
  text-align: center;
}
.rfm-cell-strong {
  font-weight: 600;
}
.rfm-cell-right {
  text-align: right;
}
.rfm-segment-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.rfm-segment-chip--champion { background: #fef3c7; color: #92400e; }
.rfm-segment-chip--loyal { background: #d1fae5; color: #065f46; }
.rfm-segment-chip--potential-loyalist { background: #dbeafe; color: #1e40af; }
.rfm-segment-chip--new-customer { background: #e0e7ff; color: #3730a3; }
.rfm-segment-chip--promising { background: #fce7f3; color: #9d174d; }
.rfm-segment-chip--need-attention { background: #fef3c7; color: #92400e; }
.rfm-segment-chip--about-to-sleep { background: #f3f4f6; color: #374151; }
.rfm-segment-chip--at-risk { background: #fee2e2; color: #991b1b; }
.rfm-segment-chip--cant-lose { background: #fecaca; color: #991b1b; }
.rfm-segment-chip--hibernating { background: #e5e7eb; color: #374151; }
.rfm-segment-chip--lost { background: #f3f4f6; color: #374151; }
.rfm-segment-chip--unknown { background: #f3f4f6; color: #374151; }

/* Batch 26: barrel-spec-detail.js (bsd-), account-detail.js (acd-),
   fulfillment-queue.js (fq-), ttb-filings.js (ttbf-),
   shipping-zones-list.js (szl-), state-reports.js (str-),
   budgets-list.js (bgl-), brokerage-detail.js (brkd- — distinct from
   the sibling brokerage-list.js's existing brk- prefix) */

/* barrel-spec-detail.js */
.bsd-empty-note {
  color: var(--gray-500);
  font-size: 13px;
}
.bsd-cell {
  padding: 4px 8px;
}
.bsd-cell-muted {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--gray-500);
}
.bsd-cell-center {
  padding: 4px 8px;
  text-align: center;
}
.bsd-readonly-table {
  width: 100%;
  border-collapse: collapse;
}
.bsd-readonly-head-row {
  text-align: left;
  font-size: 12px;
  color: var(--gray-500);
}
.bsd-editor-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.bsd-col-role {
  width: 160px;
}
.bsd-col-qty {
  width: 120px;
}
.bsd-col-action {
  width: 40px;
}
.bsd-input-full {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
}
.bsd-page {
  max-width: 900px;
}
.bsd-bom-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 0;
}
.bsd-save-error {
  margin: 0 auto 0 0;
  align-self: center;
  color: var(--wa-color-danger-60, #b42318);
  font-size: 13px;
}
.bsd-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bsd-content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}
.bsd-col-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bsd-input-disabled {
  background: var(--gray-100);
  color: var(--gray-500);
}
.bsd-status-tag-wrap {
  margin-bottom: 8px;
}
.bsd-status-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* account-detail.js */
.acd-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
}
.acd-badge--system {
  background: #e0f2fe;
  color: #0369a1;
}
.acd-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.acd-badge--inactive {
  background: #fecaca;
  color: #dc2626;
}
.acd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.acd-card-title {
  margin-bottom: 12px;
}
.acd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acd-btn-danger {
  color: #dc2626;
}
.acd-btn-success {
  color: #16a34a;
}
.acd-ledger-card {
  margin-top: 24px;
}
.acd-ledger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.acd-h3-flush {
  margin: 0;
}
.acd-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.acd-filter-label {
  font-size: 13px;
  color: var(--gray-500);
}
.acd-date-input {
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.acd-ledger-scroll {
  max-height: 500px;
  overflow-y: auto;
}
.list-table th.acd-align-right {
  text-align: right;
}
.list-table td.acd-align-right {
  text-align: right;
}
.list-table td.acd-align-right-strong {
  text-align: right;
  font-weight: 500;
}
.list-table td.acd-empty-cell {
  color: var(--gray-400);
  text-align: center;
  padding: 24px;
}
.acd-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acd-dialog-overlay.is-hidden {
  display: none;
}
.acd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.acd-error-text {
  color: red;
}
.acd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.acd-dlg-title {
  margin-bottom: 16px;
}
.acd-dlg-field {
  margin-bottom: 12px;
}
.acd-dlg-field--last {
  margin-bottom: 16px;
}
.acd-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.acd-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.acd-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.acd-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.acd-dlg-status--error {
  color: var(--red-500);
}
.acd-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.acd-type-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.acd-type-badge--asset {
  background: #dbeafe;
  color: #1e40af;
}
.acd-type-badge--liability {
  background: #fef3c7;
  color: #92400e;
}
.acd-type-badge--equity {
  background: #ede9fe;
  color: #5b21b6;
}
.acd-type-badge--revenue {
  background: #dcfce7;
  color: #16a34a;
}
.acd-type-badge--expense {
  background: #fecaca;
  color: #dc2626;
}
.acd-type-badge--default {
  background: #f3f4f6;
  color: #6b7280;
}

/* fulfillment-queue.js */
.fq-icon-gap {
  margin-right: 4px;
}
.fq-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.fq-stat-card {
  text-align: center;
}
.fq-stat-value {
  font-size: 32px;
  font-weight: 700;
}
.fq-stat-value--danger {
  color: #dc2626;
}
.fq-stat-value--warning {
  color: #a16207;
}
.fq-stat-value--success {
  color: #065f46;
}
.fq-stat-value--info {
  color: #0e7490;
}
.fq-stat-label {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}
.fq-section-card {
  margin-top: 24px;
}
.fq-section-title {
  margin-bottom: 12px;
}
.fq-empty-note {
  color: var(--gray-400);
}
.list-table th.fq-align-right {
  text-align: right;
}
.fq-cell-strong {
  font-weight: 500;
}
.list-table td.fq-align-right {
  text-align: right;
}
.list-table td.fq-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.fq-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fq-dialog-overlay.is-hidden {
  display: none;
}
.fq-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.fq-error-title {
  margin-bottom: 12px;
  color: #dc2626;
}
.fq-error-msg {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 16px;
}
.fq-error-actions {
  display: flex;
  justify-content: flex-end;
}
.fq-fatal-error {
  color: red;
}
.fq-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.fq-status-badge--draft {
  background: #f3f4f6;
  color: #6b7280;
}
.fq-status-badge--confirmed {
  background: #dbeafe;
  color: #2563eb;
}
.fq-status-badge--picking_packing {
  background: #fef3c7;
  color: #92400e;
}
.fq-status-badge--shipped {
  background: #d1fae5;
  color: #065f46;
}
.fq-status-badge--in_transit {
  background: #cffafe;
  color: #0e7490;
}
.fq-status-badge--delivered {
  background: #a7f3d0;
  color: #047857;
}
.fq-status-badge--returned {
  background: #fef3c7;
  color: #92400e;
}
.fq-status-badge--cancelled {
  background: #fee2e2;
  color: #991b1b;
}
.fq-tracking-link {
  color: #2563eb;
  text-decoration: underline;
}

/* ttb-filings.js */
.ttbf-card {
  padding: 16px;
  margin-bottom: 24px;
}
.ttbf-card-title {
  margin: 0 0 12px 0;
  font-size: 15px;
}
.ttbf-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}

.ttbf-companion-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--wa-space-l); }
.ttbf-companion-heading p { margin:var(--wa-space-2xs) 0 var(--wa-space-m); max-width:52rem; color:var(--wa-color-text-quiet); }
.ttbf-calendar-note { color:var(--wa-color-text-quiet); font-size:var(--wa-font-size-s); margin:var(--wa-space-s) 0 0; }
.ttbf-error-text {
  margin-top: 8px;
  color: #991b1b;
  font-size: 13px;
}
.ttbf-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.ttbf-title {
  margin: 0 0 4px 0;
}
.ttbf-subtitle {
  margin: 0 0 20px 0;
  color: var(--gray-500);
}
.ttbf-section-heading {
  margin: 0 0 8px 0;
  font-size: 15px;
}
.ttbf-outstanding-wrap {
  margin-bottom: 24px;
}
.ttbf-loading {
  color: var(--gray-400);
  padding: 16px;
}
.ttbf-dialog {
  --width: 480px;
}
.ttbf-dlg-prompt {
  margin: 0 0 12px 0;
  color: var(--gray-600);
}
.ttbf-drift-banner {
  padding: 14px 16px;
  margin-bottom: 20px;
  border-left: 4px solid #b45309;
  background: #fffbeb;
  color: #92400e;
}
/* WORK-449 — shared filed-period restatement banner (fixed, top-centered,
   above all views; the router never touches document.body). */
.restatement-banner-slot {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(720px, calc(100vw - 32px));
  pointer-events: none;
}
.restatement-banner-slot .restatement-banner {
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.restatement-banner-actions {
  margin-top: 8px;
}
/* WORK-470 — bond-coverage / exemption advisory (warning only). The banner
   sits just below the restatement banner slot. */
.bond-coverage-banner-slot {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: min(720px, calc(100vw - 32px));
  pointer-events: none;
}
.bond-coverage-banner-slot .bond-coverage-banner {
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.bond-coverage-banner-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.bc-callout {
  margin: 8px 0 12px;
}
.bc-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
}
.bc-note {
  font-size: 12px;
  color: var(--wa-color-neutral-40);
  margin-top: 4px;
}
.bc-reasons {
  margin: 6px 0 0 18px;
  font-size: 12px;
}
.bc-h4 {
  margin: 12px 0 4px;
  font-size: 14px;
}
.bc-years {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 6px 0 12px;
}
.bc-years th,
.bc-years td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--wa-color-neutral-80);
}
.bc-cert-history {
  margin: 6px 0 12px 18px;
  font-size: 13px;
}
.bc-guidance {
  margin: 8px 0;
}
#bc-decl.is-hidden,
#bc-coverage-reminder.is-hidden {
  display: none;
}
.ttbf-card-error {
  padding: 16px;
  color: #991b1b;
}
.ttbf-card-muted {
  padding: 16px;
  color: var(--gray-500);
}
.ttbf-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
}
.ttbf-thead {
  background: var(--gray-50);
}
.ttbf-row {
  border-top: 1px solid var(--gray-200);
}
.ttbf-due-date {
  color: #991b1b;
}
.ttbf-action-cell {
  padding: 6px 12px;
  text-align: right;
}
.ttbf-th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--gray-600);
}
.ttbf-td {
  padding: 6px 12px;
  font-size: 13px;
}
.ttbf-drift-flag {
  cursor: pointer;
}
.ttbf-muted-dash {
  color: var(--gray-400);
}
.ttbf-action-cell--nowrap {
  padding: 6px 12px;
  text-align: right;
  white-space: nowrap;
}
.ttbf-drift-detail-cell {
  padding: 0 12px 12px 40px;
  background: #fffbeb;
}
.ttbf-drift-note {
  font-size: 12px;
  color: #92400e;
  margin: 4px 0 6px 0;
}
.ttbf-drift-table {
  border-collapse: collapse;
}
.ttbf-nodetail-cell {
  padding: 2px 8px;
  font-size: 12px;
  color: var(--gray-500);
}
.ttbf-change-name {
  padding: 2px 12px 2px 0;
  font-size: 12px;
  color: var(--gray-700);
}
.ttbf-change-name--mono {
  font-family: monospace;
}
.ttbf-change-from {
  padding: 2px 8px;
  font-size: 12px;
  text-align: right;
  color: var(--gray-500);
}
.ttbf-change-arrow {
  padding: 2px 4px;
  font-size: 12px;
  color: var(--gray-400);
}
.ttbf-change-to {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.ttbf-evidence-dialog {
  --width: min(960px, calc(100vw - 32px));
}
.ttbf-evidence-heading {
  color: var(--gray-600);
  font-size: 13px;
  margin: -6px 0 16px;
}
.ttbf-evidence-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.ttbf-evidence-action-row > * {
  min-width: 0;
}
.ttbf-file-field {
  display: grid;
  gap: 6px;
  color: var(--wa-color-text-normal);
  font-size: 13px;
  font-weight: 600;
}
.ttbf-file-input {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  min-height: 38px;
  padding: 6px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font: inherit;
}
.ttbf-evidence-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.ttbf-evidence-status {
  min-height: 20px;
  margin: 10px 0;
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}
.ttbf-evidence-status[data-tone="success"] {
  color: var(--wa-color-success-30);
}
.ttbf-evidence-status[data-tone="error"] {
  color: var(--wa-color-danger-30);
}
.ttbf-evidence-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  font-size: 13px;
}
.ttbf-findings {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  font-size: 13px;
}
.ttbf-findings [data-tone="error"] {
  color: var(--wa-color-danger-30);
}
.ttbf-findings [data-tone="warning"] {
  color: var(--wa-color-warning-30);
}
.ttbf-preview-toolbar,
.ttbf-comparison-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
}
.ttbf-preview-toolbar {
  justify-content: space-between;
  margin-top: 8px;
}
.ttbf-cell-table-wrap,
.ttbf-comparison-table-wrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--gray-200);
}
.ttbf-cell-id {
  font-family: monospace;
  font-size: 12px;
}
.ttbf-comparison {
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--gray-200);
}
.ttbf-comparison:last-child {
  border-bottom: 0;
}
.ttbf-comparison-state {
  color: var(--gray-500);
  font-size: 11px;
  margin-left: 5px;
}
@media (max-width: 640px) {
  .ttbf-evidence-action-row {
    grid-template-columns: 1fr;
  }
  .ttbf-cell-table-wrap,
  .ttbf-comparison-table-wrap {
    max-height: 300px;
  }
}

/* shipping-zones-list.js */
.szl-icon-gap {
  margin-right: 4px;
}
.szl-filter-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  align-items: end;
}
.szl-filter-label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 2px;
}
.szl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.szl-table-card {
  margin-top: 16px;
}
.szl-empty-note {
  color: var(--gray-400);
}
.szl-cell-strong {
  font-weight: 500;
}
.szl-states-count {
  font-weight: 500;
  margin-right: 4px;
}
.szl-states-list {
  font-size: 12px;
  color: var(--gray-500);
}
.szl-yes-tag {
  color: #dc2626;
  font-weight: 500;
}
.szl-no-tag {
  color: var(--gray-400);
}
.szl-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.szl-status-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.szl-status-badge--inactive {
  background: #fecaca;
  color: #dc2626;
}
.szl-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.szl-dialog-overlay.is-hidden {
  display: none;
}
.szl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 480px;
  max-width: 580px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
}
.szl-dlg-title {
  margin-bottom: 16px;
}
.szl-dlg-field {
  margin-bottom: 12px;
}
.szl-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.szl-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.szl-dlg-textarea {
  resize: vertical;
}
.szl-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.szl-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.szl-dlg-status {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.szl-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.szl-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.szl-type-badge--direct_ship {
  background: #d1fae5;
  color: #065f46;
}
.szl-type-badge--three_tier {
  background: #fef3c7;
  color: #92400e;
}
.szl-type-badge--prohibited {
  background: #fee2e2;
  color: #991b1b;
}
.szl-type-badge--default {
  background: #f3f4f6;
  color: #6b7280;
}

/* state-reports.js */
.str-filter-card {
  margin-bottom: 24px;
}
.str-card-title {
  margin-bottom: 12px;
}
.str-filter-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.str-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.str-select {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 160px;
}
.str-select--wide {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 200px;
}
.str-input-year {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  width: 100px;
}
.str-select--period {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  min-width: 120px;
}
.str-generate-btn {
  padding: 8px 20px;
}
.str-generate-btn.is-hidden {
  display: none;
}
.str-hideable.is-hidden {
  display: none;
}
.str-rate-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 4px 0;
  border-bottom: 1px solid var(--gray-100);
}
.str-rate-label {
  color: var(--gray-500);
  font-size: 13px;
}
.str-rate-value {
  font-size: 13px;
  font-weight: 500;
}
.str-rate-note {
  color: var(--gray-400);
  font-weight: 400;
}
.str-tax-title {
  margin-bottom: 8px;
}
.str-warning {
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #a16207;
  font-size: 13px;
}
.str-cell {
  padding: 4px 8px;
}
.str-cell-mono-right {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
}
.str-total-row {
  border-top: 2px solid var(--gray-300);
  font-weight: 700;
}
.str-cell-right {
  padding: 4px 8px;
  text-align: right;
}
.list-table th.str-align-right {
  text-align: right;
}
.str-empty-note {
  color: var(--gray-400);
  font-size: 13px;
}
/* WORK-486 P4 — clickable figure cell + drilldown drawer. */
.str-cell-btn {
  all: unset;
  cursor: pointer;
  color: #0369a1;
  text-decoration: underline dotted;
  font-family: monospace;
}
.str-cell-btn:hover {
  text-decoration: underline;
}
.str-drawer {
  --size: 40rem;
}
.str-drilldown-meta {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.str-drilldown-meta code {
  color: var(--gray-700);
}
.str-section {
  margin-bottom: 24px;
}
.str-section-label {
  margin-bottom: 8px;
}
.str-report-title {
  margin-bottom: 16px;
}
.str-no-report {
  color: var(--gray-400);
}
.str-error-text {
  color: red;
}

/* budgets-list.js */
.bgl-filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bgl-filter-control {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.bgl-filter-input--wide {
  width: 180px;
}
.list-table th.bgl-align-right {
  text-align: right;
}
.bgl-empty-msg {
  text-align: center;
  padding: 40px;
  color: var(--gray-400);
}
.bgl-empty-msg.is-hidden {
  display: none;
}
.bgl-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bgl-dialog-overlay.is-hidden {
  display: none;
}
.bgl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 600px;
  max-width: 720px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
}
.bgl-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.bgl-status-badge--draft {
  background: #f3f4f6;
  color: #6b7280;
}
.bgl-status-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.bgl-status-badge--closed {
  background: #e5e7eb;
  color: #374151;
}
.bgl-cell-strong {
  font-weight: 600;
}
.list-table td.bgl-cell-mono {
  font-family: monospace;
  font-size: 12px;
}
.list-table td.bgl-align-right-strong {
  text-align: right;
  font-weight: 500;
}
.bgl-actions-cell {
  display: flex;
  gap: 4px;
}
.bgl-row-btn {
  font-size: 11px;
  padding: 2px 8px;
}
.bgl-month-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.bgl-month-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--gray-500);
}
.bgl-month-input {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
}
.bgl-running-total {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--gray-700);
}
.bgl-dlg-title {
  margin-bottom: 16px;
}
.bgl-dlg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.bgl-dlg-field {
  margin-bottom: 12px;
}
.bgl-dlg-field-monthly {
  margin-bottom: 16px;
}
.bgl-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.bgl-dlg-label--section {
  margin-bottom: 8px;
}
.bgl-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.bgl-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.bgl-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.bgl-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bgl-edit-subtitle {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* brokerage-detail.js */
.brkd-commission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.brkd-hint-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gray-500);
}
.brkd-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 24px;
}
.brkd-search-wrap {
  position: relative;
}
.brkd-cust-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
}
.brkd-cust-dropdown.is-hidden {
  display: none;
}
.brkd-chip-remove {
  margin-left: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-weight: bold;
}
.brkd-dropdown-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--gray-400);
}
.brkd-option-row {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-100);
}
.detail-header.brkd-new-header {
  padding: 24px;
}
.brkd-form-body {
  padding: 0 24px 24px;
  max-width: 760px;
}
.brkd-card {
  padding: 20px;
}
.brkd-card--spaced {
  margin-top: 16px;
}
.brkd-card-title {
  margin: 0 0 12px;
}
.brkd-dates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.brkd-notes-textarea {
  margin-top: 12px;
}
.brkd-linked-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gray-500);
}
.brkd-actions-row {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}
.detail-header.brkd-existing-header {
  align-items: flex-start;
  padding: 24px;
}
.brkd-status-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.brkd-header-actions {
  display: flex;
  gap: 8px;
}
.brkd-content-body {
  padding: 0 24px 24px;
  max-width: 960px;
}
.brkd-section-title {
  margin-bottom: 12px;
}
.brkd-info-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 8px;
  font-size: 14px;
}
.brkd-info-label {
  color: var(--gray-500);
}
.brkd-info-value {
  font-weight: 500;
}
.brkd-party-type {
  color: var(--gray-400);
  font-weight: normal;
}
.brkd-notes-text {
  margin: 12px 0 0;
  color: var(--gray-600);
}
.brkd-linked-readonly {
  margin: 0;
  color: var(--gray-500);
  font-size: 13px;
}
.brkd-commission-edit-host {
  margin-bottom: 12px;
}
.brkd-update-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.brkd-save-edit-wrap {
  margin-top: 16px;
}
.brkd-error-text {
  color: red;
}

/* Batch 27: distillation-profile-list.js (dpl-), vendor-payment-detail.js
   (vpd-), barrel-detail.js (bd- — distinct from blending-recipes-list.js's
   existing brl-), sales-order-detail.js (sod-), equipment-list.js (eql-),
   cost-trace.js (ctc-), invoice-detail.js (ivd-), payments-list.js (pml-) */

/* distillation-profile-list.js */
.dpl-filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dpl-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.dpl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.list-table th.dpl-align-center {
  text-align: center;
}
.list-table td.dpl-align-center {
  text-align: center;
}
.dpl-cell-strong {
  font-weight: 500;
}
.dpl-pooled-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: #ede9fe;
  color: #6d28d9;
  vertical-align: middle;
}
.list-table td.dpl-cell-muted {
  font-size: 12px;
  color: var(--gray-600);
}
.dpl-yes-text {
  color: #059669;
}
.dpl-no-text {
  color: #9ca3af;
}
.list-table td.dpl-align-right {
  text-align: right;
}
.dpl-dup-btn {
  font-size: 11px;
  padding: 2px 8px;
}
.dpl-error-text {
  color: red;
}
.dpl-chooser-desc {
  color: var(--gray-500);
  font-size: 13px;
  margin: 0 0 16px;
}
.dpl-chooser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dpl-chooser-card {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
}
.dpl-chooser-title {
  margin: 0 0 6px;
  font-size: 16px;
}
.dpl-chooser-copy {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}
.dpl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}
.dpl-section-label {
  font-size: 13px;
  color: var(--gray-700);
}
.dpl-help-note {
  font-size: 11px;
  color: var(--gray-400);
  margin: 0 0 8px;
}
.dpl-ing-empty {
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}
.dpl-ing-empty.is-hidden {
  display: none;
}
.dpl-btn-group {
  display: flex;
  gap: 6px;
}
.dpl-ing-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.dpl-ing-remove-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 16px;
}
.dpl-ing-fields-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.dpl-relative-wrap {
  position: relative;
}
.dpl-ing-field-label {
  font-size: 11px;
  color: var(--gray-500);
}
.dpl-ing-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.dpl-class-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dpl-class-badge--bourbon { background: #fef3c7; color: #92400e; }
.dpl-class-badge--gin { background: #f3e8ff; color: #7c3aed; }
.dpl-class-badge--vodka { background: #e0e7ff; color: #3730a3; }
.dpl-class-badge--rum { background: #fce7f3; color: #9d174d; }
.dpl-class-badge--brandy { background: #fef3c7; color: #78350f; }
.dpl-class-badge--aquavit { background: #d1fae5; color: #065f46; }
.dpl-class-badge--whiskey { background: #fef3c7; color: #92400e; }
.dpl-class-badge--default { background: #f3f4f6; color: #374151; }
.dpl-run-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dpl-run-badge--spirit { background: #dbeafe; color: #1e40af; }
.dpl-run-badge--stripping { background: #fef3c7; color: #92400e; }
.dpl-run-badge--default { background: #f3f4f6; color: #374151; }
.dpl-dash-muted {
  color: var(--gray-300);
}

/* vendor-payment-detail.js */
.vpd-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.vpd-status-badge--draft { background: #f3f4f6; color: #6b7280; }
.vpd-status-badge--approved { background: #dbeafe; color: #2563eb; }
.vpd-status-badge--sent { background: #fef9c3; color: #a16207; }
.vpd-status-badge--completed { background: #dcfce7; color: #16a34a; }
.vpd-status-badge--voided { background: #fecaca; color: #dc2626; }
.vpd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.vpd-info-label {
  color: var(--gray-500);
  font-size: 13px;
}
.vpd-info-value {
  font-size: 13px;
  font-weight: 500;
}
.vpd-back-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.vpd-title {
  margin-top: 4px;
}
.vpd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.vpd-card-title {
  margin-bottom: 12px;
}
.vpd-amount-strong {
  font-weight: 700;
}
.vpd-bills-card {
  margin-bottom: 24px;
}
.vpd-bills-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vpd-bill-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  text-decoration: none;
  color: var(--primary);
  font-size: 13px;
  transition: background 0.15s;
  background: white;
}
.vpd-bill-icon {
  font-size: 16px;
}
.vpd-empty-note {
  font-size: 13px;
  color: var(--gray-400);
}
.vpd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vpd-events-card {
  margin-top: 24px;
}
.vpd-events-scroll {
  max-height: 400px;
  overflow-y: auto;
}
.vpd-cell-strong {
  font-weight: 500;
  font-size: 13px;
}
.vpd-cell-muted {
  font-size: 12px;
  color: var(--gray-500);
}
.vpd-cell-details {
  font-size: 12px;
  color: var(--gray-600);
}
.vpd-status-note {
  font-size: 13px;
  color: var(--gray-500);
}
.vpd-error-text {
  color: red;
}
.vpd-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vpd-dialog-overlay.is-hidden {
  display: none;
}
.vpd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.vpd-btn-danger {
  color: #dc2626;
}
.vpd-dlg-title {
  margin-bottom: 16px;
}
.vpd-dlg-field {
  margin-bottom: 16px;
}
.vpd-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.vpd-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.vpd-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.vpd-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.vpd-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.vpd-btn-void {
  background: #dc2626;
  border-color: #dc2626;
}

/* barrel-detail.js */
.bd-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.bd-status-badge--filled { background: #dcfce7; color: #16a34a; }
.bd-status-badge--retired { background: #fecaca; color: #dc2626; }
.bd-status-badge--default { background: #f3f4f6; color: #6b7280; }
.bd-leak-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #fef3c7;
  color: #d97706;
  margin-left: 8px;
}
.bd-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bd-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.bd-card-title {
  margin-bottom: 12px;
}
.bd-link {
  color: var(--primary);
}
.bd-events-card {
  margin-top: 24px;
}
.bd-empty-note {
  color: var(--gray-500);
}
.bd-quality-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bd-h3-flush {
  margin: 0;
}
.bd-quality-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 8px 0 10px;
}
.bd-new-card {
  margin-top: 24px;
  max-width: 600px;
}
.bd-submit-btn {
  margin-top: 12px;
}
.bd-error-text {
  color: red;
}
.bd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 440px;
  max-width: 540px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.bd-dlg-title {
  margin-bottom: 16px;
}
.bd-current-loc {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.bd-tabs-wrap {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gray-200);
}
.bd-tab-btn {
  border: none;
  background: none;
  padding: 8px 16px;
  font-weight: 500;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
}
.bd-tab-btn--active {
  font-weight: 600;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}
.bd-dlg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.bd-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.bd-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.bd-dlg-input--upper {
  text-transform: uppercase;
}
.bd-dlg-field {
  margin-bottom: 12px;
}
.bd-dlg-field--last {
  margin-bottom: 16px;
}
.bd-dlg-status {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.bd-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bd-dash-muted {
  color: var(--gray-400);
}
.bd-event-detail {
  color: var(--gray-500);
  font-size: 11px;
}
.bd-event-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
}
.bd-event-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bd-event-type {
  font-weight: 600;
  font-size: 13px;
}
.bd-event-date {
  color: var(--gray-500);
  font-size: 11px;
}
.bd-event-details {
  margin-top: 4px;
}

/* sales-order-detail.js */
.sod-col-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sod-notes-text {
  font-size: 14px;
  color: var(--wa-color-neutral-30);
  white-space: pre-wrap;
}
.sod-status-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sod-allocations-loading {
  font-size: 13px;
  color: var(--wa-color-neutral-30);
}
.sod-tib-loading {
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}
.sod-muted-text {
  color: var(--wa-color-neutral-50);
}
.sod-tib-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--wa-color-neutral-90);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.sod-tib-link {
  color: var(--blue-500);
  font-family: monospace;
  font-size: 12px;
}
.sod-tib-status {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}
.sod-tib-counterparty {
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sod-tib-pg {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sod-error-text {
  color: var(--wa-color-danger-50);
}
.sod-danger-text {
  color: var(--wa-color-danger-30);
}
.sod-preview-results {
  margin-top: 12px;
}
.sod-lot-mono {
  font-family: var(--wa-font-mono, monospace);
  font-size: 12px;
}
.sod-validation-error {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--wa-color-danger-70);
  background: var(--wa-color-danger-50);
  border-radius: 6px;
}
.sod-line-label {
  font-weight: 500;
  margin-bottom: 4px;
}
.sod-line-meta {
  color: var(--wa-color-neutral-50);
  font-weight: normal;
}
.sod-cannot-allocate {
  color: var(--wa-color-danger-30);
  font-weight: 500;
}
.sod-preview-box {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 6px;
}
.sod-shortfall-text {
  color: var(--wa-color-danger-30);
  font-weight: 500;
  margin-bottom: 4px;
}
.sod-preview-table {
  margin-top: 4px;
}
.sod-avail-muted {
  color: var(--wa-color-neutral-60);
}
.sod-reason-cell {
  color: var(--wa-color-neutral-40);
  font-size: 12px;
}
.sod-banner-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.sod-banner-msg {
  white-space: pre-wrap;
  font-family: var(--wa-font-mono, monospace);
  font-size: 12px;
}
.sod-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.sod-save-wrap {
  margin-top: 16px;
}
.sod-save-btn {
  width: 100%;
}
.sod-add-line-wrap {
  margin-top: 8px;
}
.sod-total-label {
  padding-right: 12px;
}
.sod-th-item {
  min-width: 220px;
}
.sod-th-qty {
  width: 80px;
}
.sod-th-unit {
  width: 90px;
}
.sod-th-price {
  width: 110px;
}
.sod-th-total {
  width: 100px;
}
.sod-th-action {
  width: 40px;
}
.sod-align-right {
  text-align: right;
}
.sod-total-input {
  font-weight: 500;
}
.sod-cell-middle {
  vertical-align: middle;
}

/* equipment-list.js */
.eql-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #e0f2fe;
  color: #0369a1;
}
.eql-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.eql-status-badge--available { background: #dcfce7; color: #16a34a; }
.eql-status-badge--in_use { background: #dbeafe; color: #2563eb; }
.eql-status-badge--maintenance { background: #fef9c3; color: #a16207; }
.eql-status-badge--out_of_service { background: #fecaca; color: #dc2626; }
.eql-status-badge--retired { background: #f3f4f6; color: #6b7280; }
.eql-status-badge--default { background: #f3f4f6; color: #6b7280; }
.eql-process-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  background: #dbeafe;
  color: #1e40af;
  margin-right: 2px;
}
.eql-retired-badge {
  background: #fee;
  color: #a33;
  border: 1px solid #c33;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8em;
}
.eql-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eql-dialog-overlay.is-hidden {
  display: none;
}
#bottle-packaging.is-hidden {
  display: none;
}
.eql-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 460px;
  max-width: 560px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
}
.eql-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.eql-legend-dot--in_use { background: #2563eb; }
.eql-legend-dot--empty_clean { background: #16a34a; }
.eql-legend-dot--empty_dirty { background: #dc2626; }
.eql-legend-dot--unknown { background: #6b7280; }
.eql-muted-empty {
  color: #9ca3af;
}
.eql-row-wrap {
  font-size: 12px;
  line-height: 1.3;
}
.eql-cell-strong {
  font-weight: 500;
}
.eql-cell-muted {
  color: #6b7280;
}
.eql-activity-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  background: #fef3c7;
  color: #92400e;
  margin-right: 4px;
  text-transform: capitalize;
}
.eql-cleanliness-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.eql-cleanliness-badge--clean { background: #dcfce7; color: #15803d; }
.eql-cleanliness-badge--dirty { background: #fee2e2; color: #b91c1c; }
.eql-cleanliness-badge--unknown { background: #f3f4f6; color: #6b7280; }
.eql-dlg-title {
  margin-bottom: 8px;
}
.eql-dlg-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px;
}
.eql-dlg-grid {
  display: grid;
  gap: 12px;
}
.eql-dlg-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.eql-dlg-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.eql-dlg-row-flex {
  display: flex;
  gap: 8px;
  align-items: end;
}
.eql-dlg-status {
  font-size: 12px;
  color: #6b7280;
}
/* WORK-1068 — gauge reconciliation panel (components/gauge-reconciliation.js). */
/* `is-hidden` has no global rule (WORK-857); these consumers own theirs. */
.grc-preview.is-hidden,
.grc-warning.is-hidden,
.grc-classify.is-hidden,
.grc-cause.is-hidden,
.grc-measure-row.is-hidden {
  display: none;
}
.grc-book {
  font-size: 13px;
  color: var(--wa-color-neutral-30);
}
.grc-book-label {
  font-weight: 600;
}
.grc-book-account,
.grc-mode-help,
.grc-weight-basis {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.grc-mode-title {
  font-weight: 500;
  font-size: 14px;
}
.grc-weight-basis {
  margin-top: 4px;
}
.grc-panel {
  display: grid;
  gap: 8px;
}
.grc-preview {
  font-size: 13px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-neutral-95);
}
.grc-verdict {
  font-weight: 500;
}
.grc-classify {
  display: grid;
  gap: 8px;
}
.grc-kind {
  font-weight: 600;
}
.grc-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.grc-confirm-box {
  width: 16px;
  height: 16px;
}
.grc-report {
  font-size: 12px;
  color: var(--wa-color-neutral-40);
}
.eql-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.eql-dlg-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.eql-checkbox-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eql-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}
.eql-muted-text {
  color: #6b7280;
}
.eql-empty-note {
  color: #6b7280;
  font-size: 13px;
}
.eql-calc-result {
  font-size: 13px;
  color: #374151;
  flex: 1;
}
.eql-recon-box {
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  padding: 8px;
  border-radius: 6px;
}
.eql-recon-box.is-hidden {
  display: none;
}
.eql-classify-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
.eql-classify-grid.is-hidden {
  display: none;
}
.eql-warn-banner {
  font-size: 12px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 8px;
  border-radius: 6px;
}
.eql-warn-banner.is-hidden {
  display: none;
}
.eql-tolerance-ok {
  color: #15803d;
}
.eql-tolerance-warn {
  color: #b45309;
}

/* cost-trace.js */
.ctc-subtitle {
  color: var(--gray-500);
  font-size: 13px;
  max-width: 780px;
}
.ctc-body {
  padding: 0 24px 24px;
  max-width: 1100px;
}
.ctc-search-card {
  padding: 20px;
  margin-bottom: 20px;
}
.ctc-search-grid {
  display: grid;
  grid-template-columns: 240px 1fr 120px;
  gap: 12px;
  align-items: end;
}
.ctc-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--gray-500);
  min-height: 18px;
}
.ctc-danger-text {
  color: var(--wa-color-danger-30);
}
.ctc-missing-callout {
  margin-bottom: 16px;
}
.ctc-details-wrap {
  margin-top: 6px;
}
.ctc-missing-list {
  margin: 6px 0 0 16px;
  font-family: monospace;
  font-size: 12px;
}
.data-table td.ctc-empty-cell {
  text-align: center;
  color: var(--gray-500);
  padding: 12px;
}
.ctc-lot-row {
  cursor: pointer;
}
.ctc-align-right {
  text-align: right;
}
.ctc-chevron-cell {
  text-align: center;
  color: var(--gray-500);
}
.ctc-comp-cell {
  background: var(--gray-50);
  padding: 12px 24px;
}
.ctc-comp-host {
  font-size: 13px;
  color: var(--gray-600);
}
.ctc-section-heading {
  margin: 24px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.ctc-section-heading--flush {
  margin-top: 0;
}
.ctc-data-table {
  width: 100%;
  font-size: 13px;
}
.ctc-th-left {
  text-align: left;
}
.ctc-main-card {
  padding: 20px;
}
.ctc-basis-card {
  margin-top: 20px;
}
.ctc-total-row {
  border-top: 2px solid var(--gray-300);
}
.ctc-comp-table {
  width: 100%;
  font-size: 12px;
}
.ctc-source-muted {
  color: var(--gray-500);
}
.ctc-trace-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ctc-trace-chip {
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--gray-50);
  font-size: 12px;
}
.ctc-trace-label {
  color: var(--gray-500);
  margin-right: 4px;
}
.ctc-workspace {
  display: grid;
  gap: 16px;
}
.ctc-context-card,
.ctc-section-header,
.ctc-ledger-totals,
.ctc-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ctc-context-card {
  padding: 18px 20px;
}
.ctc-context-card h2,
.ctc-section-header h3,
.ctc-section-header p {
  margin: 0;
}
.ctc-eyebrow {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.ctc-context-status {
  display: grid;
  justify-items: end;
  max-width: 420px;
  gap: 6px;
  text-align: right;
}
.ctc-id-row {
  justify-content: flex-start;
  min-width: 0;
  color: var(--gray-500);
  font-size: 12px;
}
.ctc-id-row code {
  overflow-wrap: anywhere;
}
.ctc-copy {
  flex: 0 0 auto;
}
.ctc-tabs::part(body) {
  padding-top: 14px;
}
.ctc-equation {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr) auto minmax(130px, 1fr) auto minmax(130px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--gray-50);
  font-size: 13px;
}
.ctc-two-tables {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  overflow-x: auto;
}
.ctc-ledger-totals {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 14px 0;
}
.ctc-ledger-role {
  border-top: 1px solid var(--gray-200);
  padding: 10px 0;
}
.ctc-ledger-role summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
@media (max-width: 760px) {
  .ctc-body { padding-inline: 12px; }
  .ctc-search-grid,
  .ctc-two-tables { grid-template-columns: 1fr; }
  .ctc-context-card,
  .ctc-section-header { align-items: flex-start; flex-direction: column; }
  .ctc-context-status { justify-items: start; text-align: left; }
  .ctc-equation { grid-template-columns: 1fr; }
  .ctc-equation b { display: none; }
}

/* invoice-detail.js */
.ivd-icon-preload {
  display: none;
}
.ivd-col-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ivd-form-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.ivd-notes-text {
  font-size: 14px;
  color: var(--wa-color-neutral-30);
  white-space: pre-wrap;
}
.ivd-text-block + .ivd-text-block {
  margin-top: 14px;
}
.ivd-text-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-40);
}
.ivd-row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ivd-locked-note {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.ivd-th-action {
  width: 40px;
}
.ivd-total-label {
  padding-right: 12px;
}
.ivd-total-label--strong {
  font-weight: 600;
}
.ivd-total-value {
  font-weight: 600;
}
.ivd-amount-row--paid {
  color: var(--wa-color-success-40, #16a34a);
}
.ivd-payment-error {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--wa-color-danger-70);
  border-radius: var(--wa-border-radius-medium);
  background: var(--wa-color-danger-50);
  color: var(--wa-color-danger-10);
}
.ivd-payment-error-message {
  margin-top: 8px;
}
.ivd-payment-error-rule {
  margin-top: 6px;
  font-size: 13px;
}
.ivd-amount-row--large {
  font-size: 18px;
}
.ivd-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ivd-tib-loading {
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}
.ivd-field-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ivd-field-stack--tight {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ivd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ivd-dlg-hint {
  margin: 0;
  font-size: 12px;
  color: var(--wa-color-neutral-40);
}
.ivd-dlg-error {
  font-size: 13px;
  color: var(--wa-color-danger-30);
}
.ivd-payment-error {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--wa-color-danger-70);
  border-radius: var(--wa-border-radius-medium);
  background: var(--wa-color-danger-95);
  color: var(--wa-color-danger-20);
}
.ivd-payment-error-message {
  margin-top: 8px;
}
.ivd-payment-error-rule {
  margin-top: 6px;
  font-size: 13px;
}
.ivd-muted-text {
  color: var(--wa-color-neutral-50);
}
.ivd-tib-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--wa-color-neutral-90);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.ivd-tib-link {
  color: var(--blue-500);
  font-family: monospace;
  font-size: 12px;
}
.ivd-tib-status {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}
.ivd-tib-counterparty {
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ivd-tib-pg {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ivd-error-text {
  color: var(--wa-color-danger-50);
}
.ivd-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.ivd-save-wrap {
  margin-top: 16px;
}
.ivd-save-btn {
  width: 100%;
}
.ivd-add-line-wrap {
  margin-top: 8px;
}
.ivd-th-item {
  min-width: 220px;
}
.ivd-th-qty {
  width: 80px;
}
.ivd-th-unit {
  width: 120px;
}
.ivd-th-price {
  width: 110px;
}
.ivd-th-tax {
  width: 90px;
}
.ivd-th-total {
  width: 100px;
}
.ivd-align-right {
  text-align: right;
}
.ivd-total-cell {
  text-align: right;
  font-weight: 500;
}
.ivd-cell-middle {
  vertical-align: middle;
}
/* Invoice line-item numeric cells (WORK-750). Plain text inputs rather than
   `<wa-input type="number">`: a number input sanitizes `.value` to '' while
   the text is not a valid float, so a partially-typed `10.` reads as empty
   and the line total flickers to $0.00 mid-entry. Mirrors `.por-cell-input`,
   which the purchase-order editor already uses for the same reason. */
.ivd-cell-input {
  font-size: 13px;
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 4px 8px;
}
.ivd-addr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 110px) minmax(0, 110px);
  gap: 12px;
}
.ivd-min-w-0 {
  min-width: 0;
}
.ivd-state-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  min-width: 0;
}
.ivd-state-select {
  height: 36px;
  padding: 6px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  min-width: 0;
}

/* payments-list.js */
.pml-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.pml-badge--status-pending { background: #fef9c3; color: #a16207; }
.pml-badge--status-processing { background: #dbeafe; color: #2563eb; }
.pml-badge--status-completed { background: #dcfce7; color: #16a34a; }
.pml-badge--status-failed { background: #fecaca; color: #dc2626; }
.pml-badge--status-refunded { background: #e0e7ff; color: #3730a3; }
.pml-badge--status-cancelled { background: #f3f4f6; color: #6b7280; }
.pml-badge--method-credit_card { background: #dbeafe; color: #2563eb; }
.pml-badge--method-ach { background: #dcfce7; color: #16a34a; }
.pml-badge--method-wire { background: #e0e7ff; color: #3730a3; }
.pml-badge--method-check { background: #ffedd5; color: #c2410c; }
.pml-badge--method-cash { background: #f3f4f6; color: #6b7280; }
.pml-badge--method-other { background: #f3f4f6; color: #6b7280; }
.pml-summary-card {
  margin-bottom: 16px;
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 16px 24px;
}
.pml-stat-label {
  font-size: 12px;
  color: var(--gray-500);
}
.pml-stat-value {
  font-size: 20px;
  font-weight: 700;
}
.pml-stat-value--collected {
  color: #16a34a;
}
.pml-stat-value--refunded {
  color: #3730a3;
}
.pml-stat-value--net {
  color: var(--gray-900);
}
.pml-filter-card {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
}
.pml-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.pml-empty-note {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}
.pml-th-sortable {
  cursor: pointer;
}
.list-table th.pml-th-sortable-right {
  text-align: right;
  cursor: pointer;
}
.pml-cell-strong {
  font-weight: 500;
}
.list-table td.pml-amount-cell {
  font-weight: 600;
  color: #16a34a;
  text-align: right;
}
.list-table td.pml-cell-processor {
  color: var(--gray-600);
}
.list-table td.pml-cell-reference {
  color: var(--gray-500);
}
.pml-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pml-dialog-overlay.is-hidden {
  display: none;
}
.pml-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 460px;
  max-width: 560px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
}
.pml-dlg-title {
  margin-bottom: 16px;
}
.pml-dlg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.pml-dlg-field {
  margin-bottom: 12px;
}
.pml-dlg-field--last {
  margin-bottom: 16px;
}
.pml-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.pml-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.pml-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.pml-dlg-status {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.pml-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Batch 28 — fermentation-wizard.js */
.fw-mt-1 {
  margin-top: 1rem;
}
.fw-mt-05 {
  margin-top: 0.5rem;
}
.fw-mt-15 {
  margin-top: 1.5rem;
}
.fw-cursor-default {
  cursor: default;
}
.fw-row-flex-gap6 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fw-optional-label {
  font-weight: 400;
  color: var(--gray-500);
}
.fw-mb-05 {
  margin-bottom: 0.5rem;
}
.fw-none-row {
  border-top: 1px dashed var(--gray-300);
  margin-top: 4px;
  padding-top: 8px;
}
.fw-muted-text {
  color: var(--gray-500);
}
.fw-row-flex-gap8 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fw-flex-1 {
  flex: 1;
}
.fw-unit-label {
  font-size: 13px;
  color: var(--gray-500);
  min-width: 32px;
}
.fw-change-link {
  font-size: 12px;
  margin-left: 6px;
}
.fw-cap-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.fw-cap-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 12px;
}
.fw-bold {
  font-weight: 600;
}
.fw-ack-label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  cursor: pointer;
}
.fw-ack-label > input[type="checkbox"] {
  flex: none;
  width: 1rem;
  height: 1rem;
  padding: 0;
}
.fw-cap-error-title {
  font-weight: 600;
  color: #991b1b;
  margin-bottom: 4px;
}
.fw-cap-error-text {
  color: #991b1b;
}
.fw-milestone-grid-3 {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: end;
}
.fw-milestone-grid-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: end;
}
.fw-mt-075 {
  margin-top: 0.75rem;
}
.fw-actions-end {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}
.fw-abv-display {
  font-size: 1.5rem;
  font-weight: 600;
  padding-top: 0.25rem;
}
.fw-mt-025 {
  margin-top: 0.25rem;
}
.fw-toggle-link {
  font-size: 0.85rem;
}
.fw-abv-override-input {
  margin-top: 0.5rem;
}
.fw-abv-override-input.is-hidden {
  display: none;
}
.fw-final-card {
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  background: white;
}
.fw-final-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fw-final-card-header h3 {
  margin: 0 0 3px;
}
.fw-target-schedule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-200);
}
.fw-target-schedule > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: white;
}
.fw-target-schedule > div.expected {
  background: var(--wa-color-brand-95, #eff6ff);
}
.fw-target-schedule span {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.fw-target-schedule strong {
  font-size: 13px;
}
.fw-final-time-actions,
.fw-completion-actions,
.fw-final-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fw-final-time-actions {
  margin-top: 7px;
}
.fw-final-label-row {
  justify-content: space-between;
  margin-bottom: 5px;
}
.fw-final-label-row .field-label {
  margin-bottom: 0;
}
.fw-completion-prompt {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--wa-color-brand-70, #93bafa);
  border-radius: 8px;
  background: var(--wa-color-brand-95, #eff6ff);
}
.fw-completion-prompt.is-hidden,
.fw-final-error.is-hidden,
.fw-final-outcome.is-hidden {
  display: none;
}
.fw-final-error,
.fw-final-outcome {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
}
.fw-final-error {
  border: 1px solid var(--wa-color-danger-60, #dc6666);
  background: var(--wa-color-danger-95, #fff1f1);
  color: var(--wa-color-danger-20, #7f1d1d);
}
.fw-final-outcome {
  border: 1px solid var(--wa-color-warning-60, #d6a742);
  background: var(--wa-color-warning-95, #fff8e7);
  color: var(--wa-color-warning-20, #713f12);
}
.fw-handoff-icon {
  font-size: 3rem;
  color: #10b981;
}

@media (max-width: 720px) {
  .fw-target-schedule {
    grid-template-columns: 1fr;
  }
}

/* Batch 28 */
/* fermentation-detail.js */

.fdd-batch-code-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.fdd-batch-code-value {
  font-family: monospace;
  font-size: 15px;
  font-weight: 600;
}

.fdd-status-wrap {
  margin-top: 8px;
}

.fdd-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.fdd-card-title {
  margin-bottom: 12px;
}

.fdd-section-gap {
  margin-top: 24px;
}

.fdd-link {
  color: #2563eb;
  text-decoration: none;
}

.fdd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Dialog widths — wa-dialog's --width custom property, one utility per
   value shared across the file's several dialogs. */
.fdd-w-440 {
  --width: 440px;
}
.fdd-w-400 {
  --width: 400px;
}
.fdd-w-480 {
  --width: 480px;
}
.fdd-w-560 {
  --width: 560px;
}
.fdd-w-680 {
  --width: 680px;
}
.fdd-w-720 {
  --width: 720px;
}
.fdd-w-420 {
  --width: 420px;
}

.fdd-edit-batch-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* NOTE: the #edit-batch-code-error wa-callout's original
   style="display:none" was dropped entirely rather than moved into a
   class. That element only ever sits inside <wa-dialog
   id="edit-batch-code-dialog">, which itself stays closed until
   `open` is set — so the child's default display has no visible
   effect. The show/hide toggle lives in ../lib/batch-code-edit.js
   (shared with mashing-detail.js, out of scope for this batch) via
   direct `.style.display` CSSOM writes; since the element no longer
   carries an initial style="" attribute, those writes are the
   CSP-exempt case per this program's established rule. */

.fdd-fatal-error {
  color: red;
}

.fdd-mt-12 {
  margin-top: 12px;
}

.fdd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fdd-empty-text {
  color: var(--gray-400);
  font-size: 13px;
}

.fdd-table-flush {
  margin: 0;
}

.fdd-scroll-x {
  overflow-x: auto;
}

/* .list-table th already sets text-align:left at (class,element)
   specificity, so the right-align modifier needs the compound form. */
.list-table th.fdd-col-right {
  text-align: right;
}

/* .list-table td does not set text-align, so a bare class is safe here. */
.fdd-align-right {
  text-align: right;
}

.fdd-cell-strong-right {
  text-align: right;
  font-weight: 500;
}

/* .list-table td already sets font-size:13px at (class,element)
   specificity — these truncation/size variants need the compound form
   to override it. Two different max-width values (200 vs 300) are
   kept as separate classes per the byte-identical-diff rule. */
.list-table td.fdd-cell-truncate-300 {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-table td.fdd-cell-truncate-200 {
  font-size: 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-table td.fdd-cell-12 {
  font-size: 12px;
}

.fdd-cell-strong {
  font-weight: 500;
}

.fdd-dialog-stack {
  display: grid;
  gap: 12px;
}

.fdd-grid-2-120 {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
}

.fdd-grid-2-80 {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 8px;
}

.fdd-muted-13 {
  font-size: 13px;
  color: var(--gray-500);
}

.fdd-load-error {
  color: #dc2626;
}

.fdd-note-text {
  font-size: 13px;
}

.fdd-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.fdd-field-box {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}

/* Mash-charge dialog error box — fixed 2-variant enum (danger/warning),
   converted to a base class + is-hidden toggle + modifier classes per
   the small-fixed-enum convention. Both the markup and the JS that
   toggles it live in this file. */
.fdd-mash-charge-error {
  font-size: 13px;
  border-radius: 6px;
  padding: 8px;
}
.fdd-mash-charge-error.is-hidden {
  display: none;
}
.fdd-mash-charge-error--danger {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.fdd-mash-charge-error--warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.fdd-align-center {
  text-align: center;
}

.fdd-deviation-icon {
  color: var(--wa-color-warning-40, #d97706);
  font-weight: 600;
}

.fdd-step-done-icon {
  color: var(--wa-color-success-40, #16a34a);
  font-weight: 600;
}

.fdd-step-pending-icon {
  color: var(--wa-color-neutral-70);
}

.fdd-step-notes-snippet {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
  margin-top: 2px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .list-table td already sets padding + border-bottom at
   (class,element) specificity — needs the compound form. */
.list-table td.fdd-corrective-cell {
  padding: 4px 8px 8px 40px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: none;
}

.fdd-corrective-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-warning-30, #a16207);
  margin-bottom: 4px;
}

.fdd-corrective-item {
  font-size: 12px;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid var(--wa-color-warning-80, #fde68a);
}

/* The inline style previously beat everything including
   .list-table tbody tr:hover's background at (0,2,2) specificity.
   Reproducing that here needs both the base compound and an explicit
   :hover compound of equal specificity, since main.css loads before
   list-view.css and a tie at equal specificity is resolved by source
   order (list-view.css would otherwise win on hover). */
.list-table tbody tr.fdd-row-deviation {
  background: var(--wa-color-warning-50, #fffbeb);
}
.list-table tbody tr.fdd-row-deviation:hover {
  background: var(--wa-color-warning-50, #fffbeb);
}

.fdd-cell-num {
  text-align: center;
  font-weight: 600;
}

.fdd-step-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
}

.fdd-record-btn {
  height: 28px;
  font-size: 12px;
}

.list-table th.fdd-col-num {
  text-align: center;
  width: 40px;
}
.list-table th.fdd-col-done {
  text-align: center;
  width: 50px;
}
.list-table th.fdd-col-record {
  text-align: center;
  width: 80px;
}

.fdd-step-additions-block {
  margin-top: 16px;
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 12px;
}

.fdd-step-additions-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

.fdd-addition-row {
  padding: 8px;
  margin-bottom: 8px;
  background: var(--wa-color-neutral-50);
  border-radius: 6px;
  border: 1px solid var(--wa-color-neutral-80);
}

.fdd-addition-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.fdd-addition-name {
  font-weight: 500;
  font-size: 13px;
}

.fdd-addition-planned {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}

.fdd-corrective-ref-box {
  margin-top: 12px;
  padding: 8px;
  background: var(--wa-color-warning-50, #fffbeb);
  border-radius: 6px;
  border: 1px solid var(--wa-color-warning-80, #fde68a);
}

.fdd-corrective-ref-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--wa-color-warning-30, #a16207);
  margin-bottom: 4px;
}

.fdd-corrective-ref-item {
  font-size: 12px;
  margin-bottom: 4px;
}

.fdd-corrective-ref-note {
  color: var(--gray-500);
  font-size: 11px;
}

.fdd-step-header-box {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--wa-color-neutral-50);
  border-radius: 8px;
}

.fdd-step-header-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.fdd-step-header-desc {
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}

.fdd-step-header-planned {
  margin-top: 8px;
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.fdd-step-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fdd-step-checkbox-wrap {
  display: flex;
  align-items: end;
  padding-bottom: 4px;
}

.fdd-step-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.fdd-step-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--wa-color-brand-40);
}

.fdd-time-active-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Status badge — fixed 7-value enum + fallback, converted from a
   per-status inline style string to a base class + modifier map. */
.fdd-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.fdd-status-badge--created,
.fdd-status-badge--default {
  background: #f3f4f6;
  color: #374151;
}
.fdd-status-badge--pitched {
  background: #fef3c7;
  color: #92400e;
}
.fdd-status-badge--active {
  background: #dbeafe;
  color: #1e40af;
}
.fdd-status-badge--crashing {
  background: #e0e7ff;
  color: #3730a3;
}
.fdd-status-badge--transferring {
  background: #fce7f3;
  color: #9d174d;
}
.fdd-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}
.fdd-status-badge--failed {
  background: #fee2e2;
  color: #991b1b;
}

.fdd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* Shared .auth-error is-hidden toggle for the renderNew() form-level
   error banner (used elsewhere in this program too; harmless if
   another batch's file also defines the identical compound rule). */
.auth-error.is-hidden {
  display: none;
}

/* mash-recipes-list.js */

.mrl-step-group-label {
  padding: 4px 12px;
  color: var(--wa-color-neutral-50);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.mrl-addition-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 6px;
  background: var(--wa-color-neutral-95, #fafafa);
}

.mrl-addition-field {
  min-width: 0;
}

.mrl-addition-field > wa-select,
.mrl-addition-field > wa-input,
.mrl-addition-field > select {
  width: 100%;
}

.mrl-addition-field--item {
  grid-column: span 6;
}

.mrl-addition-field--category,
.mrl-addition-field--basis {
  grid-column: span 3;
}

.mrl-addition-field--quantity {
  grid-column: span 2;
}

.mrl-addition-field--unit,
.mrl-addition-field--temperature,
.mrl-addition-field--volume {
  grid-column: span 3;
}

.mrl-addition-label {
  display: block;
  margin: 0 0 4px;
  color: var(--wa-color-neutral-40);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.mrl-addition-remove {
  grid-column: span 1;
  justify-self: end;
}

.mrl-addition-basis-warning {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--wa-color-warning-60);
  border-radius: 5px;
  background: var(--wa-color-warning-95);
  color: var(--wa-color-warning-30);
  font-size: 12px;
}

.mrl-addition-basis-warning[hidden] {
  display: none;
}

.mrl-addition-basis-warning span {
  flex: 1;
}

.mrl-relative-wrap {
  position: relative;
}

.mrl-input-compact {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

.mrl-suggestions-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mrl-select-compact {
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  font-size: 13px;
  background: white;
  box-sizing: border-box;
}

.mrl-remove-btn--30 {
  height: 30px;
  min-width: 28px;
  padding: 0;
}

.mrl-remove-btn--28 {
  height: 28px;
  min-width: 28px;
  padding: 0;
}

.mrl-remove-btn--36 {
  height: 36px;
  min-width: 36px;
  padding: 0;
}

.mrl-icon-11 {
  font-size: 11px;
}

.mrl-icon-12 {
  font-size: 12px;
}

.mrl-icon-14 {
  font-size: 14px;
}

.mrl-parallel-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--wa-color-neutral-30);
}

.mrl-parallel-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--wa-color-brand-40);
}

.mrl-step-fields-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 80px 80px auto;
  gap: 8px;
  align-items: end;
}

.mrl-spacer-36 {
  height: 36px;
}

.mrl-step-additions {
  padding-left: 8px;
  margin-top: 6px;
}

.mrl-btn-add-addition {
  margin-top: 2px;
  height: 24px;
  font-size: 12px;
  padding-left: 8px;
  color: var(--wa-color-neutral-50);
}

.mrl-step-correctives {
  padding-left: 8px;
  margin-top: 4px;
}

.mrl-btn-add-corrective {
  margin-top: 2px;
  height: 24px;
  font-size: 12px;
  padding-left: 8px;
  color: var(--wa-color-warning-40, #d97706);
}

.mrl-corrective-row {
  display: grid;
  grid-template-columns: 1fr 1fr 70px 70px 28px;
  gap: 6px;
  align-items: end;
  margin-bottom: 4px;
}

.mrl-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.mrl-input-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  font-size: 14px;
}

.mrl-select-full {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  font-size: 14px;
  background: white;
}

/* --width is a dialog.css custom-property hook consumed by <wa-dialog>. */
.mrl-dialog-wide {
  --width: 920px;
}

.mrl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mrl-span-2 {
  grid-column: span 2;
}

.mrl-mode-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

/* .card-radio-group (detail-view.css) sets display:flex;gap:12px at bare
   (0,1,0) and loads after main.css, so a bare mrl class would lose a
   load-order tie. Compound to (0,2,0) to win unconditionally. */
.card-radio-group.mrl-mode-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* .card-radio (detail-view.css) already sets border:1px solid
   neutral-300, border-radius:6px and cursor:pointer at bare (0,1,0) —
   border-radius/cursor here would be redundant so only the genuinely
   overridden properties (width + unselected color + padding) are set.
   .card-radio.selected (also detail-view.css, 0,2,0) sets border-color
   to primary-500 and, loading after main.css, wins the equal-specificity
   tie against this compound for the color property when both classes are
   present — so the selected-state color intentionally comes from that
   existing rule via cascade, not from a rule here. */
.card-radio.mrl-mode-card {
  border-width: 2px;
  padding: 10px 12px;
  border-color: var(--wa-color-neutral-80);
}

.mrl-mode-card-title {
  font-weight: 500;
  font-size: 14px;
}

.mrl-mode-card-desc {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.mrl-bordered-section {
  grid-column: span 2;
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 16px;
}

.mrl-bordered-section.is-hidden {
  display: none;
}

.mrl-block-title {
  font-weight: 600;
}

.mrl-block-title--spaced {
  font-weight: 600;
  margin-bottom: 8px;
}

.mrl-section-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--wa-color-neutral-50);
}

.mrl-hint-text {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.mrl-target-batch-grid {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  align-items: end;
}

.mrl-flex-header-mb8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mrl-flex-header-mb12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mrl-flex-header-steps-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 8px;
}

.mrl-bom-status {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.mrl-bom-status--issues {
  color: var(--wa-color-danger-40);
}

.mrl-bom-status--ok {
  color: var(--wa-color-success-40);
}

.mrl-bom-body {
  padding: 12px;
  background: var(--wa-color-neutral-50);
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 6px;
  font-size: 13px;
}

.mrl-muted-em {
  color: var(--wa-color-neutral-50);
}

.mrl-percentage-total {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.mrl-percentage-total--ok {
  color: var(--wa-color-success-40);
}

.mrl-percentage-total--mismatch {
  color: var(--wa-color-danger-40);
}

.mrl-warning-box {
  padding: 12px;
  background: var(--wa-color-warning-50);
  border: 1px solid var(--wa-color-warning-80);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}

.mrl-warning-link {
  color: var(--wa-color-brand-40);
  text-decoration: underline;
}

.mrl-grain-row {
  display: grid;
  grid-template-columns: 1.5fr 80px 40px;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.mrl-btn-add-margin {
  margin-top: 4px;
}

.mrl-ttb-warning {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: 1px solid var(--wa-color-warning-70, #fcd34d);
  border-radius: 6px;
  font-size: 13px;
  color: var(--wa-color-warning-10, #78350f);
}

.mrl-ttb-warning.is-hidden {
  display: none;
}

.mrl-summary-title {
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}

/* Base step-row style, plus concurrent-group modifier classes replacing
   updateAllParallelBorders()'s former direct .style.* writes (background +
   4 border sides + radii + margin/padding vary per solo/start/mid/end
   position — a small fixed enum, so it's expressed as classes). */
.mrl-step-row {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 6px;
}

.mrl-step-row--grouped {
  background: var(--wa-color-brand-95, #eff6ff);
  border-top: 1px solid var(--wa-color-brand-50);
  border-right: 1px solid var(--wa-color-brand-50);
  border-bottom: 1px solid var(--wa-color-brand-50);
  border-left: 4px solid var(--wa-color-brand-50);
  padding-left: 5px;
}

.mrl-step-row--grouped.mrl-step-row--start {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin-bottom: 0;
}

.mrl-step-row--grouped.mrl-step-row--mid {
  border-top: none;
  border-bottom: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.mrl-step-row--grouped.mrl-step-row--end {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-bottom: 12px;
}

.mrl-targets-grid-1 {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.mrl-select-min-110 {
  min-width: 110px;
}

.mrl-targets-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  margin-top: 12px;
  align-items: end;
}

.mrl-select-min-120 {
  min-width: 120px;
}

.mrl-targets-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items: end;
}

.mrl-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
}

.mrl-truncate-cell {
  font-size: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.mrl-bom-error {
  margin-top: 6px;
  color: var(--wa-color-danger-30);
}

.mrl-bom-error-sm {
  margin-top: 6px;
  color: var(--wa-color-danger-30);
  font-size: 12px;
}

.mrl-subblock-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.mrl-bom-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.mrl-bom-thead-row {
  border-bottom: 1px solid var(--wa-color-neutral-80);
}

.mrl-bom-th-left {
  text-align: left;
  padding: 4px 6px;
}

.mrl-bom-th-right {
  text-align: right;
  padding: 4px 6px;
}

.mrl-bom-td {
  padding: 3px 6px;
}

.mrl-bom-td-right {
  text-align: right;
  padding: 3px 6px;
}

.mrl-bom-total-row {
  font-weight: 600;
  border-top: 1px solid var(--wa-color-neutral-70);
}

.mrl-bom-td-total {
  padding: 4px 6px;
}

.mrl-bom-td-total-right {
  text-align: right;
  padding: 4px 6px;
}

.mrl-target-row--warn {
  color: var(--wa-color-danger-30);
}

.mrl-target-row--muted {
  color: var(--wa-color-neutral-50);
}

.mrl-bom-drift-msg {
  padding: 4px 6px;
  color: var(--wa-color-danger-30);
  font-size: 11px;
}

.mrl-water-line {
  margin-bottom: 8px;
}

.mrl-adjuncts-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}

.mrl-step-second-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-top: 6px;
}

.mrl-temp-input-88 {
  width: 88px;
}

.mrl-step-arrow {
  padding-bottom: 8px;
  color: var(--wa-color-neutral-50);
}

.mrl-until-select {
  min-width: 150px;
}

.mrl-minutes-input {
  width: 120px;
}

.mrl-run-summary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wa-color-neutral-80);
  font-size: 13px;
}

.mrl-unestimated-warning {
  color: var(--wa-color-warning-30);
}

.mrl-muted-em--tight {
  font-size: 11px;
  margin-top: 2px;
}

.mrl-water-schedule-block {
  margin-top: 6px;
}

/* Full-page mash-recipe authoring workspace. The detailed mode follows the
   approved mockup: primary step cards at left, live/sticky planning summary at
   right, and no modal viewport competing with the form's own scroll. */
.mrc-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4px 48px;
}

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

.mrc-page-header h1 {
  margin: 8px 0 4px;
  font-size: 28px;
  line-height: 1.2;
}

.mrc-page-header p,
.mrc-card-heading p {
  margin: 0;
  color: var(--wa-color-neutral-40);
  font-size: 13px;
}

.mrc-back-button {
  margin-left: -10px;
}

.mrc-header-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.mrc-card {
  display: block;
  background: var(--wa-color-surface-default, white);
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04), 0 8px 24px rgba(20, 30, 50, 0.04);
  margin: 0 0 16px;
  overflow: visible;
}

.mrc-card.is-hidden {
  display: none;
}

.mrl-checkpoint-row {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 10px;
  background: var(--wa-color-surface-default, white);
}

.mrl-checkpoint-row .is-hidden {
  display: none;
}

.mrl-form-error,
.mrl-checkpoint-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--wa-color-danger-70);
  border-radius: 8px;
  background: var(--wa-color-danger-50);
  color: var(--wa-color-danger-30);
  font-size: 13px;
  line-height: 1.45;
}

.mrl-form-error {
  margin: 0 0 14px;
}

.mrl-checkpoint-error {
  margin-top: 12px;
}

.mrl-form-error.is-hidden,
.mrl-checkpoint-error.is-hidden {
  display: none;
}

.mrl-form-error-action.is-hidden,
.mrl-checkpoint-material.is-hidden,
.mrl-checkpoint-options.is-hidden {
  display: none;
}

.mrl-corrective-remeasurement {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wa-color-neutral-30);
  font-size: 12px;
}

.mrl-corrective-remeasurement input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--wa-color-brand-40);
}

.mrc-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--wa-color-neutral-90);
}

.mrc-card-heading h2 {
  margin: 0 0 2px;
  font-size: 16px;
}

.mrc-card-body {
  padding: 16px;
}

.mrc-identity-card {
  padding: 16px;
  margin-bottom: 20px;
}

.mrc-identity-card > .mrc-card-heading {
  margin: -16px -16px 16px;
}

.mrc-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.mrc-page[data-mode="simple"] .mrc-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.mrc-page[data-mode="simple"] .mrc-side-column {
  display: none;
}

.mrc-main-column,
.mrc-side-column {
  min-width: 0;
}

.mrc-sticky-summary {
  position: sticky;
  top: 18px;
}

.mrc-procedure-card[open] > .mrc-procedure-summary wa-icon {
  transform: rotate(180deg);
}

.mrc-procedure-summary {
  cursor: pointer;
  list-style: none;
}

.mrc-procedure-summary::-webkit-details-marker {
  display: none;
}

.mrc-procedure-summary span {
  display: grid;
  gap: 2px;
}

.mrc-procedure-summary small {
  color: var(--wa-color-neutral-40);
  font-weight: 400;
}

.mrc-procedure-summary wa-icon {
  transition: transform 150ms ease;
}

.mrc-procedure-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  color: var(--wa-color-brand-30);
  background: var(--wa-color-brand-95);
  border: 1px solid var(--wa-color-brand-80);
  border-radius: 8px;
  font-size: 12px;
}

.mrc-page .mrl-step-row {
  padding: 0;
  border-radius: 10px;
  border-color: var(--wa-color-neutral-80);
  overflow: visible;
  background: var(--wa-color-surface-default, white);
}

.mrc-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--wa-color-neutral-90);
  background: var(--wa-color-neutral-95);
  border-radius: 10px 10px 0 0;
}

.mrc-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--wa-color-brand-30);
  background: var(--wa-color-brand-90);
  font-size: 12px;
  font-weight: 700;
}

.mrc-step-header > div {
  display: grid;
  gap: 1px;
}

.mrc-step-header small {
  color: var(--wa-color-neutral-40);
  font-size: 11px;
}

.mrc-page .mrl-parallel-toggle {
  margin: 10px 12px 0;
}

.mrc-page .mrl-step-fields-grid,
.mrc-page .mrl-step-second-row,
.mrc-page .mrl-step-additions,
.mrc-page .mrl-step-correctives,
.mrc-page .mrl-btn-add-addition,
.mrc-page .mrl-btn-add-corrective {
  margin-left: 12px;
  margin-right: 12px;
}

.mrc-page .mrl-step-fields-grid {
  grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.7fr) 40px;
  padding-top: 12px;
}

.mrc-page .mrl-step-second-row {
  padding-bottom: 2px;
}

.mrc-page .mrl-step-additions {
  margin-top: 12px;
  padding: 12px 0 0;
  border-top: 1px dashed var(--wa-color-neutral-80);
}

.mrc-page .mrl-btn-add-corrective {
  margin-bottom: 12px;
}

.mrc-page .mrl-step-row--grouped {
  border-left: 4px solid var(--wa-color-brand-50);
  background: var(--wa-color-brand-95);
}

.mrc-guide-list {
  display: grid;
  gap: 12px;
}

.mrc-guide-list > div {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: start;
}

.mrc-guide-list span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand-30);
  font-size: 11px;
  font-weight: 700;
}

.mrc-guide-list p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--wa-color-neutral-40);
}

.mrc-guide-list strong {
  color: var(--wa-color-text-normal, inherit);
}

.mrc-page .mrl-bom-body {
  padding: 0;
  background: transparent;
  border: 0;
}

.mrc-labor-card .lrs-section {
  border: 0;
  padding: 16px;
}

.mrc-labor-card .lrs-title {
  font-size: 16px;
}

.mrc-mobile-actions {
  display: none;
}

@media (max-width: 1120px) {
  .mrc-workspace {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

}

@media (max-width: 900px) {
  .mrc-workspace,
  .mrc-page[data-mode="simple"] .mrc-workspace {
    grid-template-columns: 1fr;
  }

  .mrc-page[data-mode="detailed"] .mrc-side-column {
    display: block;
    grid-row: 1;
  }

  .mrc-sticky-summary {
    position: static;
  }

  .mrc-header-actions {
    display: none;
  }

  .mrc-mobile-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    background: color-mix(in srgb, var(--wa-color-surface-default, white) 94%, transparent);
    border-top: 1px solid var(--wa-color-neutral-80);
    backdrop-filter: blur(8px);
  }
}

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

  .mrc-page .mrl-form-grid,
  .card-radio-group.mrl-mode-picker-grid,
  .mrc-page .mrl-targets-grid-1,
  .mrc-page .mrl-targets-grid-2,
  .mrc-page .mrl-targets-grid-3,
  .mrc-page .mrl-step-fields-grid,
  .mrc-page .mrl-corrective-row {
    grid-template-columns: 1fr;
  }

  .mrc-page .mrl-addition-row {
    grid-template-columns: 1fr 1fr;
  }

  .mrc-page .mrl-addition-field,
  .mrc-page .mrl-addition-remove {
    grid-column: auto;
  }

  .mrc-page .mrl-addition-field--item {
    grid-column: 1 / -1;
  }

  .mrc-page .mrl-addition-remove {
    justify-self: end;
  }

  .mrc-page .mrl-span-2 {
    grid-column: span 1;
  }
}

/* blending-recipe-detail.js */

/* Header */
.brd-recipe-id { font-family: monospace; font-size: 13px; color: var(--gray-500); }
.brd-badges-row { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.brd-header-actions { display: flex; gap: 8px; }

/* Recipe Info / Actions grid */
.brd-info-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.brd-h3 { margin-bottom: 12px; }
.brd-btn-full { width: 100%; }
.brd-actions-help { font-size: 12px; color: var(--gray-500); margin-top: 8px; }
.brd-empty-text { color: var(--gray-400); font-size: 13px; }

/* .card has no base CSS rule anywhere in the stylesheet set (verified via
   grep), so this bare modifier class is safe with no compound needed. */
.brd-card-mt { margin-top: 24px; }

/* Ingredients table */
.brd-table-wrap { overflow-x: auto; }
.brd-table-flush { margin: 0; }
.brd-th-icon { width: 24px; }
/* .list-table th sets text-align:left at (0,1,1) in list-view.css — a bare
   class can't win, so this must compound against the base class. */
.list-table th.brd-th-right { text-align: right; }
.brd-anchor-icon { font-size: 14px; color: var(--wa-color-brand-40); }
.brd-td-strong { font-weight: 500; }
/* .list-table td doesn't set text-align, so this is safe as a bare class. */
.brd-td-right { text-align: right; }
/* .list-table td sets font-size:13px and color:var(--gray-700) at (0,1,1) —
   compound needed to override both. */
.list-table td.brd-td-notes { font-size: 12px; color: var(--gray-500); }
.list-table td.brd-td-truncate {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scale Calculator */
.brd-calc-desc { font-size: 13px; color: var(--gray-500); margin-bottom: 12px; }
.brd-calc-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.brd-field-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.brd-select { padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }

/* Scale-mode toggle group (#scale-anchor-inputs / #scale-target-inputs /
   #scale-mult-inputs): wireScaleCalculator's updateVisibility() now toggles
   .is-hidden via classList instead of writing .style.display directly. */
.brd-scale-toggle { display: flex; gap: 8px; align-items: end; }
.brd-scale-toggle.is-hidden { display: none; }

.brd-w-100 { width: 100px; }
.brd-w-120 { width: 120px; }
.brd-w-130 { width: 130px; }
.brd-w-140 { width: 140px; }
.brd-w-160 { width: 160px; }

.brd-anchor-note { font-size: 12px; color: var(--gray-400); margin-top: 6px; }
.brd-scale-results { margin-top: 16px; }
.brd-steps-list { display: flex; flex-direction: column; gap: 12px; }

/* Start Blend dialog shell */
.brd-start-dialog { --width: 700px; }
.brd-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; }
.brd-error-text { color: red; }
.brd-inline-error { color: red; font-size: 13px; }

/* Scale results card (renderScaleResults) */
.brd-scale-result-card {
  padding: 12px;
  background: var(--wa-color-brand-95, #eff6ff);
  border-radius: 8px;
  border: 1px solid var(--wa-color-brand-80, #bfdbfe);
}
.brd-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.brd-result-title { font-size: 14px; }
.brd-result-mult { font-size: 13px; color: var(--wa-color-brand-30); }
.brd-result-output { font-size: 13px; margin-bottom: 8px; }
.brd-result-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.brd-result-tr-head { border-bottom: 1px solid var(--wa-color-brand-80); }
.brd-result-th-left { text-align: left; padding: 4px 8px; }
.brd-result-th-right { text-align: right; padding: 4px 8px; }
.brd-result-tr-body { border-bottom: 1px solid var(--wa-color-brand-90); }
/* was a per-row inline font-weight ternary (600 anchor / 400 default) — a
   two-value fixed enum, so converted to a base class + modifier class
   instead of a dynamic CSSOM/inline-style value. */
.brd-result-td-name { padding: 4px 8px; }
.brd-result-td-name.brd-anchor-weight { font-weight: 600; }
.brd-result-td-orig { text-align: right; padding: 4px 8px; color: var(--gray-500); }
.brd-result-td-scaled { text-align: right; padding: 4px 8px; font-weight: 600; }
.brd-result-td-unit { padding: 4px 8px; }

/* Start Blend dialog content (showStartBlendDialog) */
.brd-dialog-grid { display: grid; gap: 16px; }
.brd-dialog-intro { font-size: 13px; color: var(--gray-600); }

/* Shared identical style string between the "Scaling" panel (showStartBlendDialog)
   and the step card (renderStepCard) — same padding/background/border/radius. */
.brd-neutral-card {
  padding: 12px;
  background: var(--wa-color-neutral-50);
  border-radius: 8px;
  border: 1px solid var(--wa-color-neutral-80);
}
.brd-scaling-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.brd-scale-radio-row { display: flex; gap: 8px; margin-bottom: 8px; }
.brd-radio-label { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; }
.brd-radio-accent { accent-color: var(--wa-color-brand-40); }

/* Start-blend scale-mode toggle group (#start-anchor-inputs / #start-target-inputs /
   #start-mult-inputs / #start-none-inputs): showStartBlendDialog's
   updateStartVisibility() now toggles .is-hidden via classList instead of
   writing .style.display directly. */
.brd-start-toggle { display: flex; gap: 8px; align-items: end; }
.brd-start-toggle.is-hidden { display: none; }
/* #start-none-inputs is a plain div (default display:block) with no other
   layout needs, so no base declaration is required beyond the hidden state. */
.brd-start-toggle-block.is-hidden { display: none; }

.brd-muted-note { font-size: 12px; color: var(--gray-400); }
.brd-mt-8 { margin-top: 8px; }

/* Step card (renderStepCard) */
.brd-step-header { display: flex; justify-content: space-between; align-items: flex-start; }
.brd-step-number { font-weight: 600; font-size: 14px; margin-right: 8px; }
.brd-step-desc { margin: 8px 0 4px; font-size: 14px; }
.brd-step-targets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.brd-step-target-badge {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--wa-color-brand-95);
  border-radius: 4px;
  color: var(--wa-color-brand-30);
}
.brd-step-ingredients { margin-top: 6px; font-size: 12px; color: var(--gray-500); }
.brd-step-additions {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--wa-color-success-50, #f0fdf4);
  border-radius: 4px;
  font-size: 12px;
}
.brd-mt-2 { margin-top: 2px; }
.brd-step-notes { margin-top: 4px; font-size: 12px; color: var(--gray-500); font-style: italic; }
.brd-step-corrective {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--wa-color-warning-50);
  border-radius: 4px;
  font-size: 12px;
}

/* infoRow() helper */
.brd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.brd-info-row-label { font-size: 13px; color: var(--gray-500); }

/* shipping-zone-detail.js */

.szd-type-badge-wrap {
  margin-left: 12px;
}

.szd-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.szd-badge--active {
  background: #dcfce7;
  color: #16a34a;
  margin-left: 8px;
}
.szd-badge--inactive {
  background: #fecaca;
  color: #dc2626;
  margin-left: 8px;
}
/* zoneTypeBadge() fixed-enum modifiers (direct_ship/three_tier/prohibited)
   plus a --default fallback for unrecognized zone types. */
.szd-badge--direct-ship {
  background: #d1fae5;
  color: #065f46;
}
.szd-badge--three-tier {
  background: #fef3c7;
  color: #92400e;
}
.szd-badge--prohibited {
  background: #fee2e2;
  color: #991b1b;
}
.szd-badge--default {
  background: #f3f4f6;
  color: #6b7280;
}

.szd-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.szd-h3-mb12 {
  margin-bottom: 12px;
}
.szd-h3-m0 {
  margin: 0;
}

.szd-flex-wrap-gap8 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.szd-mt-24 {
  margin-top: 24px;
}

.szd-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* .btn-secondary sets color at (0,1,0) specificity same as a bare modifier
   class — compound to guarantee the override wins regardless of source
   order in the assembled main.css (established convention, see batch 12+
   .list-table td traps and prior .btn-secondary overrides). */
.btn-secondary.szd-btn-deactivate {
  color: #dc2626;
}
.btn-secondary.szd-btn-reactivate {
  color: #16a34a;
}

.szd-state-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  background: #e0f2fe;
  color: #0369a1;
}
.szd-remove-state {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #3b82f6;
}

/* Shared muted/empty-state note text: reused for "No states configured.",
   "No restrictions.", and the "Checking..." status message — all
   byte-identical color:var(--gray-400);font-size:13px. */
.szd-muted-note {
  color: var(--gray-400);
  font-size: 13px;
}

.szd-restr-list {
  margin: 0;
  padding-left: 20px;
}
.szd-restr-item {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.szd-restr-text {
  flex: 1;
  font-size: 13px;
}
.szd-restr-remove-btn {
  font-size: 11px;
  padding: 2px 8px;
  color: #dc2626;
}

.szd-license-text {
  font-size: 13px;
  white-space: pre-wrap;
}

.szd-carrier-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
}

.szd-check-row {
  display: flex;
  gap: 8px;
  align-items: end;
}
.szd-check-input {
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  width: 80px;
  text-transform: uppercase;
}
.szd-check-btn {
  margin-bottom: 1px;
}
.szd-check-result {
  margin-top: 12px;
}

.szd-event-scroll {
  max-height: 400px;
  overflow-y: auto;
}
/* .list-table td sets color/font-size at (0,1,1) specificity — a bare
   class on the td cannot win, so these compound with .list-table td
   (see the batch 12/14 .list-table td trap noted elsewhere in main.css). */
.list-table td.szd-ev-type {
  font-weight: 500;
  font-size: 13px;
}
.list-table td.szd-ev-time {
  font-size: 12px;
  color: var(--gray-500);
}
.list-table td.szd-ev-details {
  font-size: 12px;
  color: var(--gray-600);
}
.list-table td.szd-empty-cell {
  color: var(--gray-400);
}

.szd-dialog-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.szd-dialog-overlay.is-hidden {
  display: none;
}
.szd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.szd-dlg-title {
  margin-bottom: 16px;
}
.szd-field-mb16 {
  margin-bottom: 16px;
}
.szd-field-mb12 {
  margin-bottom: 12px;
}
.szd-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.szd-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.szd-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.szd-input-upper {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  text-transform: uppercase;
}
.szd-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.szd-field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.szd-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.szd-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* CSSOM-write conversion: #dlg-status carries the szd-dlg-status base
   class (font-size/margin-bottom only, no color), so this bare modifier
   is safe to add via classList when a validation/save error occurs. */
.szd-status-error {
  color: red;
}

.szd-check-allowed {
  padding: 12px;
  border-radius: 8px;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
}
.szd-check-allowed-title {
  color: #065f46;
}
.szd-check-allowed-sub {
  font-size: 13px;
  color: #047857;
  margin-top: 4px;
}
.szd-check-allowed-req {
  font-size: 12px;
  color: #047857;
  margin-top: 4px;
}
.szd-check-denied {
  padding: 12px;
  border-radius: 8px;
  background: #fee2e2;
  border: 1px solid #fecaca;
}
.szd-check-denied-title {
  color: #991b1b;
}
.szd-check-denied-reason {
  font-size: 13px;
  color: #991b1b;
  margin-top: 4px;
}
.szd-check-denied-reason-item {
  font-size: 12px;
  color: #991b1b;
  margin-top: 2px;
}
.szd-check-error {
  color: red;
  font-size: 13px;
}

.szd-load-error {
  color: red;
}

.szd-info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--gray-100);
}
.szd-info-label {
  color: var(--gray-500);
  font-size: 13px;
}
.szd-info-value {
  font-size: 13px;
  font-weight: 500;
}

/* Batch 29 */
/* distribution.js */

/* Generic spacing / layout utilities used across the workspace, board,
   coverage, territories, reps, reports and detail views. */
.dsb-mt-12 {
  margin-top: 12px;
}

.dsb-scroll-x {
  overflow: auto;
}

/* .detail-card sets margin-bottom: 20px in detail-view.css, loaded after
   main.css. A bare .dsb-m0 would lose that cascade tie on margin-bottom,
   so this is deliberately compounded with .detail-card. */
.detail-card.dsb-m0 {
  margin: 0;
}

/* .detail-header sets align-items: center in detail-view.css, loaded
   after main.css. Compounded with .detail-header so this wins. */
.detail-header.dsb-header-top {
  align-items: flex-start;
  gap: 12px;
}

.dsb-subtitle {
  color: var(--wa-color-text-quiet);
  font-size: 13px;
  margin-top: 4px;
}

.dsb-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.dsb-flex-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dsb-flex-row--mb10 {
  margin-bottom: 10px;
}

.dsb-flex-end-row {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}

.dsb-flex-end-row--mt12 {
  margin-top: 12px;
}

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

.dsb-tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

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

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

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

.dsb-grid-autofit-12 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Pursuit filters bar toggled between the pursuits tab and other tabs.
   Scoped is-hidden compound per the program convention (no global rule). */
.dsb-pursuit-filters.is-hidden {
  display: none;
}

/* Kanban board (pursuits tab) */
.dsb-board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.dsb-board-column {
  min-width: 0;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: 8px;
  background: var(--wa-color-surface-lowered);
  padding: 10px;
  min-height: 180px;
}

.dsb-board-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dsb-board-column-title {
  font-size: 14px;
  margin: 0;
}

.dsb-stack-gap8 {
  display: grid;
  gap: 8px;
}

.dsb-board-empty {
  font-size: 13px;
  color: var(--wa-color-text-quiet);
  padding: 10px;
}

.dsb-pursuit-card {
  cursor: pointer;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: 8px;
  padding: 10px;
  min-height: 156px;
  display: grid;
  gap: 8px;
}

.dsb-card-top-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.dsb-card-title {
  font-size: 14px;
  line-height: 1.25;
}

.dsb-card-muted {
  font-size: 12px;
  color: var(--wa-color-text-quiet);
}

.dsb-text-12 {
  font-size: 12px;
}

/* Shared plain-table primitives (pursuits list, coverage, territories,
   reps tables). None of these tables carry class="list-table", so the
   list-view.css .list-table th/td rules never apply here. */
.dsb-table {
  width: 100%;
  border-collapse: collapse;
}

.dsb-th {
  text-align: left;
  padding: 10px;
}

.dsb-td {
  padding: 10px;
}

.dsb-td-bold {
  padding: 10px;
  font-weight: 600;
}

.dsb-td-empty {
  padding: 16px;
  color: var(--wa-color-text-quiet);
}

.dsb-row-clickable {
  cursor: pointer;
  border-top: 1px solid var(--wa-color-surface-border);
}

.dsb-row-top {
  border-top: 1px solid var(--wa-color-surface-border);
}

/* Pursuit detail form */
.dsb-muted-m0 {
  color: var(--wa-color-text-quiet);
  margin: 0;
}

.dsb-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.dsb-field-label--top-spaced {
  margin: 12px 0 4px;
}

.dsb-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: 6px;
}

.dsb-error-text {
  color: var(--wa-color-danger-fill-loud);
  min-height: 20px;
  margin-top: 8px;
}

/* State market view */
.dsb-blocked-row {
  padding: 8px 0;
  border-top: 1px solid var(--wa-color-surface-border);
}

.dsb-muted-13 {
  font-size: 13px;
  color: var(--wa-color-text-quiet);
}

.dsb-muted {
  color: var(--wa-color-text-quiet);
}

.dsb-metric-label {
  font-size: 12px;
  color: var(--wa-color-text-quiet);
  text-transform: uppercase;
}

.dsb-metric-value {
  font-size: 28px;
  font-weight: 700;
}

/* Reports panel heading override */
.dsb-heading-mt0 {
  margin-top: 0;
}

/* batch-distillation-list.js */

/* Header / filter bar / list table */
.bdl-header-actions {
  align-items: center;
}
.bdl-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bdl-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.bdl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
/* .list-table th already sets text-align:left at (class,element) specificity
   (see the batch 12/14 .list-table th/td trap) — needs the compound form. */
.list-table th.bdl-col-right {
  text-align: right;
}
.list-table td.bdl-col-right {
  text-align: right;
}
/* No global .is-hidden{display:none} rule exists — every consumer needs its
   own scoped compound rule (see CLAUDE.md WORK-283 convention). */
.bdl-list-empty.is-hidden {
  display: none;
}
.bdl-create-dialog {
  --width: clamp(640px, 80vw, 1080px);
}
.bdl-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* List rows */
.bdl-cell-strong {
  font-weight: 600;
}
.list-table td.bdl-cell-small {
  font-size: 12px;
}
.list-table td.bdl-error-row {
  color: red;
}

/* Create-run dialog form */
.bdl-profile-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
  background: #f0fdf4;
}
.bdl-label-sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.bdl-label-block {
  display: block;
  margin-bottom: 6px;
}
.bdl-select-wide {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.bdl-help-text {
  font-size: 11px;
  color: var(--gray-400);
  margin: 4px 0 0 0;
}
.bdl-help-text-mt6 {
  font-size: 11px;
  color: var(--gray-400);
  margin: 6px 0 0;
}
.bdl-help-text-tight {
  font-size: 11px;
  color: var(--gray-400);
  margin: -4px 0 0 0;
}
.bdl-formula-panel {
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 14px;
  background: #faf5ff;
}
.bdl-formula-panel.is-hidden {
  display: none;
}
.bdl-formula-title {
  margin: 0 0 4px 0;
  color: #7c3aed;
  font-size: 14px;
}
.bdl-formula-desc {
  font-size: 11px;
  color: var(--gray-500);
  margin: 0 0 12px 0;
}
.bdl-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bdl-field-label {
  font-size: 12px;
  color: var(--gray-500);
}
.bdl-field-label-block {
  font-size: 12px;
  color: var(--gray-500);
  display: block;
  margin-bottom: 4px;
}
.bdl-input-wide {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.bdl-mt-10 {
  margin-top: 10px;
}
.bdl-fp-readout {
  margin-top: 12px;
  font-size: 13px;
  color: #6b21a8;
  background: #fff;
  border: 1px solid #e9d5ff;
  border-radius: 6px;
  padding: 10px;
}
#bd-fp-retry.is-hidden {
  display: none;
}

.bdl-fp-readout.is-hidden {
  display: none;
}
.bdl-actions-end {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.bdl-botanical-toggle.is-hidden {
  display: none;
}
/* Shared visual shell for the capacity + output-handling info panels;
   .bdl-capacity-panel--* modifiers override background at higher
   specificity for the JS-driven fill-severity state (was a .style.background
   CSSOM write on an element with an initial style attribute). */
.bdl-info-panel {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
  background: var(--gray-50);
  font-size: 12px;
  color: var(--gray-700);
}
.bdl-info-panel.is-hidden {
  display: none;
}
.bdl-info-panel.bdl-capacity-panel--block {
  background: #fef2f2;
}
.bdl-info-panel.bdl-capacity-panel--warn {
  background: #fffbeb;
}
.bdl-info-panel.bdl-capacity-panel--ok {
  background: var(--gray-50);
}
.bdl-charge-estimate-panel {
  margin-top: 10px;
}
.bdl-charge-estimate-panel--complete {
  border-color: var(--green-500);
  background: var(--green-100);
}
.bdl-charge-estimate-panel--incomplete {
  border-color: var(--wa-color-warning-60);
  background: var(--wa-color-warning-50);
}
.bdl-charge-estimate-title {
  display: block;
  margin-bottom: 4px;
}
.bdl-charge-estimate-copy {
  color: var(--gray-600);
}
.bdl-charge-estimate-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--gray-800);
  font-size: 14px;
}
.bdl-charge-estimate-note {
  margin-top: 4px;
  color: var(--gray-600);
  font-size: 11px;
}
.bdl-charge-estimate-issues {
  margin: 4px 0 0;
  padding-left: 18px;
}
.bdl-inputs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bdl-block-mb4 {
  display: block;
  margin-bottom: 4px;
}
.bdl-receiver-row {
  margin-top: 10px;
}
.bdl-receiver-row.is-hidden {
  display: none;
}
.bdl-botanical-section.is-hidden {
  display: none;
}
.bdl-botanical-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px;
  background: #faf5ff;
}
.bdl-botanical-title {
  margin: 0 0 12px 0;
  color: #7c3aed;
  font-size: 14px;
}
.bdl-stack-12 {
  display: grid;
  gap: 12px;
}
.bdl-ingredients-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 8px;
}
.bdl-btn-row {
  display: flex;
  gap: 6px;
}
.bdl-expected-finish {
  font-size: 12px;
  color: var(--gray-600);
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}
.bdl-expected-finish.is-hidden {
  display: none;
}
.bdl-muted-500 {
  color: var(--gray-500);
}
.bdl-pooled-note {
  margin-top: 6px;
}
.bdl-pooled-note.is-hidden {
  display: none;
}

/* addInputRow row template */
.bdl-input-no-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}
/* Shared borderless icon-only remove button (input row + ingredient row). */
.bdl-icon-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 16px;
}
.bdl-mt-8 {
  margin-top: 8px;
}
/* Default-visible state is display:grid (mountRowPicker sets it once a
   charge role is mounted); .is-hidden covers the "no role selected" state. */
.bdl-draw-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.bdl-draw-row.is-hidden {
  display: none;
}
.bdl-spirit-charge-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bdl-spirit-charge-options.is-hidden {
  display: none;
}
.bdl-spirit-temp-wrap.is-hidden {
  display: none;
}
.bdl-draw-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bdl-draw-qty-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.bdl-draw-unit {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 42px;
}
.bdl-spirit-metrics {
  font-size: 12px;
  color: var(--gray-600);
}
.bdl-spirit-metrics.is-hidden {
  display: none;
}

/* Inline-from-still-charge affordance */
.bdl-pending-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--brand-50, #eef2ff);
  border: 1px solid var(--brand-200, #c7d2fe);
  border-radius: 6px;
  font-size: 12px;
}
.bdl-flex-1 {
  flex: 1;
}
.bdl-muted-600 {
  color: var(--gray-600);
}
.bdl-inline-complete-btn.is-hidden {
  display: none;
}

/* chooseInlineFermentation picker dialog */
.bdl-stack-8 {
  display: grid;
  gap: 8px;
}
.bdl-ferm-pick-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  cursor: pointer;
}

/* Capacity panel innerHTML content */
.bdl-capacity-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
}
.bdl-ack-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* addIngredientRow row template */
.bdl-ingredient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.bdl-ingredient-heading {
  font-size: 11px;
  font-weight: 600;
  color: #7c3aed;
}
.bdl-ingredient-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bdl-added-label {
  font-size: 11px;
  color: var(--gray-600);
  display: flex;
  gap: 4px;
  align-items: center;
}
.bdl-ingredient-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
}
.bdl-relative {
  position: relative;
}
.bdl-field-label-sm {
  font-size: 11px;
  color: var(--gray-500);
}
.bdl-input-wide-sm {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.bdl-mt-6 {
  margin-top: 6px;
}

/* runTypeBadge / statusBadge — small fixed enums as modifier classes
   instead of a per-item inline style. */
.bdl-run-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.bdl-run-type-badge--spirit {
  background: #dbeafe;
  color: #1e40af;
}
.bdl-run-type-badge--stripping {
  background: #fef3c7;
  color: #92400e;
}
.bdl-run-type-badge--default {
  background: #f3f4f6;
  color: #374151;
}
.bdl-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.bdl-status-badge--ready {
  background: #fef3c7;
  color: #92400e;
}
.bdl-status-badge--distilling {
  background: #dbeafe;
  color: #1e40af;
}
.bdl-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}
.bdl-status-badge--failed {
  background: #fee2e2;
  color: #991b1b;
}
.bdl-status-badge--reversed {
  background: #f3f4f6;
  color: #6b7280;
}
.bdl-status-badge--default {
  background: #f3f4f6;
  color: #374151;
}

/* bottled-product-lot-detail.js */

/* Header title row + status badges */
.bpld-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bpld-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.bpld-badge--pending { background: #fef3c7; color: #92400e; }
.bpld-badge--approved { background: #dbeafe; color: #1d4ed8; }
.bpld-badge--released { background: #dcfce7; color: #16a34a; }
.bpld-badge--quarantine { background: #fde68a; color: #d97706; }
.bpld-badge--rejected { background: #fecaca; color: #dc2626; }
.bpld-badge--depleted { background: var(--gray-100); color: var(--gray-500); }
.bpld-badge--expired { background: #fecaca; color: #dc2626; }

/* Generic flex row used for the header actions bar and several
   action-panel control rows (identical inline style repeated ~6x). */
.bpld-flex-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Disabled read-only field styling (repeated ~20x across the view). */
.bpld-input-disabled {
  background: var(--gray-100);
  color: var(--gray-500);
}

.bpld-input-disabled--bold {
  background: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
}

.bpld-input-disabled--flex {
  background: var(--gray-100);
  color: var(--gray-500);
  flex: 1;
}

/* Conditional add-on class applied alongside .bpld-input-disabled when
   the lot is expired; must be declared after the base rule so its
   color wins the same-specificity tie. */
.bpld-input-disabled--expired-flag {
  color: #dc2626;
  font-weight: 600;
}

/* Inventory Status stat grid + cards */
.bpld-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.bpld-stat-card {
  text-align: center;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
}

.bpld-stat-value {
  font-size: 22px;
  font-weight: 700;
}

.bpld-stat-value--total { color: #1d4ed8; }
.bpld-stat-value--available { color: #16a34a; }
.bpld-stat-value--allocated { color: #d97706; }
.bpld-stat-value--shipped { color: #6b7280; }

.bpld-stat-caption {
  font-size: 11px;
  color: var(--gray-500);
}

.bpld-stat-bottles {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  margin-top: 4px;
}

.bpld-stat-caption-alt {
  font-size: 11px;
  color: var(--gray-400);
}

.bpld-stat-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
  font-weight: 600;
}

/* Inventory progress bar. Segment widths are set via a CSSOM
   `.style.width` write in JS (elements carry no inline style
   attribute of their own); only the fixed background colors live
   here as modifier classes. */
.bpld-bar-track {
  background: var(--gray-100);
  border-radius: var(--radius);
  height: 8px;
  overflow: hidden;
  margin-top: 8px;
}

.bpld-bar-fill {
  display: flex;
  height: 100%;
}

.bpld-bar-segment--shipped { background: #6b7280; }
.bpld-bar-segment--allocated { background: #d97706; }
.bpld-bar-segment--available { background: #16a34a; }

.bpld-bar-legend {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--gray-500);
}

.bpld-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.bpld-legend-dot--shipped { background: #6b7280; }
.bpld-legend-dot--allocated { background: #d97706; }
.bpld-legend-dot--available { background: #16a34a; }

/* Location row (Location field + Move button) */
.bpld-location-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Source Spirit Lots / Source Barrels tag lists */
.bpld-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bpld-tag-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Origin trace subsection */
.bpld-origin-section {
  margin-top: 16px;
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}

.bpld-origin-heading {
  font-size: 14px;
  margin: 0 0 4px;
}

.bpld-origin-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 10px;
}

/* Quality panel header. The h2 must beat the `.detail-card h2` (0,1,1)
   compound rule in detail-view.css, so this is written as a compound
   selector rather than a bare class. */
.bpld-quality-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.detail-card h2.bpld-quality-heading {
  margin: 0;
}

.bpld-quality-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 8px 0 10px;
}

/* Actions card: repeated subsection spacer/heading + control sizing. */
.bpld-section-spacer {
  margin-bottom: 16px;
}

.bpld-subsection-heading {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gray-700);
}

/* Only the layout properties that diverge from the global
   `input, select, textarea` base rule (main.css) are set here — the
   original inline styles duplicated padding/border/border-radius/
   font-size that the base rule already provides. */
.bpld-input-flex-200 {
  flex: 1;
  min-width: 200px;
}

.bpld-input-w100 {
  width: 100px;
}

.bpld-input-flex-150 {
  flex: 1;
  min-width: 150px;
}

.bpld-caption {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Ship button green override. `.btn-primary` sets `background` at
   (0,1,0); compounding with the base class guarantees this wins
   regardless of stylesheet append order. */
.btn-primary.bpld-btn-ship {
  background: #16a34a;
}

/* Solid danger button (Mark Expired / Deplete Lot) on top of the bare
   `.btn-sm` class, which also sets `padding` at (0,1,0) — compounded
   for the same reason as .bpld-btn-ship. */
.btn-sm.bpld-btn-danger-solid {
  background: #dc2626;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
}

.bpld-destructive-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

/* Case label print dialog */
.bpld-case-label-dialog {
  --width: 560px;
}

.bpld-dialog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Only `padding` diverges from the global input/select/textarea base
   rule (which already sets border, border-radius, font-size, and
   width: 100%). */
.bpld-dialog-field {
  padding: 8px 10px;
}

.bpld-select-white {
  background: white;
}

.bpld-dialog-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 10px;
}

.bpld-dialog-footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bpld-dialog-field-wrap--full {
  grid-column: span 2;
}

.bpld-dialog-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
}

/* financial-reports.js */

.fnr-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0;
  border-bottom: 2px solid var(--gray-200);
}

/* .tab-btn has no CSS rule anywhere in the stylesheet set, so a bare
   class on the same element is safe. */
.fnr-tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-500);
  margin-bottom: -2px;
}

.fnr-tab-btn.is-active {
  background: var(--gray-100);
  border-bottom: 2px solid var(--primary);
  font-weight: 600;
  color: var(--primary);
}

.fnr-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* .card has no base CSS rule anywhere in the stylesheet set, so a bare
   class is safe here. */
.fnr-report-content {
  min-height: 200px;
}

.fnr-empty-state {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}

.fnr-error-text {
  color: red;
  padding: 24px;
}

.fnr-ctrl-label {
  font-size: 13px;
  color: var(--gray-500);
}

.fnr-date-input {
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}

.fnr-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.fnr-title-flush {
  margin: 0;
}

.fnr-title-spaced {
  margin-bottom: 12px;
}

.fnr-balance-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

/* .list-table th sets text-align:left at (0,1,1) (list-view.css) — a bare
   class cannot win, so this must compound with .list-table th. */
.list-table th.fnr-col-right {
  text-align: right;
}

/* .list-table td does not set font-weight, so a bare class is safe. */
.fnr-cell-strong {
  font-weight: 500;
}

/* .list-table td does not set text-align, so a bare class is safe. */
.fnr-cell-right {
  text-align: right;
}

/* .list-table td sets padding:7px 10px (shorthand, including padding-left)
   at (0,1,1) — a bare class overriding padding-left cannot win, so this
   must compound with .list-table td. */
.list-table td.fnr-cell-indent {
  padding-left: 24px;
}

/* .list-table td sets padding:7px 10px at (0,1,1) — same trap as above,
   plus color differs from the default var(--gray-700), so this must
   compound with .list-table td. */
.list-table td.fnr-cell-empty {
  color: var(--gray-400);
  padding: 8px 24px;
}

/* .list-table td sets font-size:13px at (0,1,1) — a bare class overriding
   font-size cannot win, so this must compound with .list-table td. */
.list-table td.fnr-cell-section {
  font-weight: 600;
  font-size: 14px;
}

.fnr-row-total-2 {
  font-weight: 600;
  border-top: 2px solid var(--gray-300);
}

.fnr-row-subtotal {
  font-weight: 600;
  border-top: 1px solid var(--gray-300);
}

.fnr-row-grand-total {
  font-weight: 700;
  border-top: 2px solid var(--gray-400);
  background: var(--gray-50);
}

.fnr-row-net-income {
  font-weight: 700;
  border-top: 2px solid var(--gray-400);
}

.fnr-row-section-header {
  background: var(--gray-50);
}

.fnr-summary-row {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.fnr-summary-box {
  padding: 12px 20px;
  border-radius: 8px;
}

.fnr-summary-label {
  font-size: 12px;
  font-weight: 500;
}

.fnr-summary-value {
  font-size: 20px;
  font-weight: 700;
}

/* Shared green/red/blue/amber background + text modifiers — reused across
   the balance badge, the net-income row, inflow/outflow amount cells, and
   the cash-flow summary boxes. Verified byte-identical hex values at every
   call site before consolidating into one set of modifier classes. */
.fnr-bg-green {
  background: #dcfce7;
}

.fnr-bg-red {
  background: #fecaca;
}

.fnr-bg-blue {
  background: #dbeafe;
}

.fnr-bg-amber {
  background: #fef3c7;
}

.fnr-text-green {
  color: #16a34a;
}

.fnr-text-red {
  color: #dc2626;
}

.fnr-text-blue {
  color: #2563eb;
}

.fnr-text-amber {
  color: #92400e;
}

/* analytics-dashboard.js */

/* Page shell */
.anb-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 28px;
}
.anb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.anb-title {
  margin: 0;
}
.anb-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Filter bar */
.anb-filter-card {
  margin-bottom: 24px;
  padding: 16px;
}
.anb-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  align-items: end;
}
.anb-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
}
.anb-select {
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  background: white;
}
/* Standalone (not combined with .anb-select) so there's no same-file class-order
   dependency between the enabled and disabled variants. */
.anb-select--disabled {
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  background: var(--gray-50);
  color: var(--gray-500);
}
.anb-period-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.anb-period-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}
.anb-period-buttons {
  display: flex;
  gap: 4px;
}
.anb-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.anb-date-input {
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.anb-date-to-label {
  font-size: 13px;
  color: var(--gray-400);
}

/* Loading / empty / error states */
.anb-loading {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
}
.anb-error-card {
  padding: 24px;
  color: #991b1b;
}
/* Shared by the 4 "No ... data available." notes (customers/products/fact
   rows/segments) — all four were byte-identical. */
.anb-empty-note {
  color: var(--gray-400);
  font-size: 13px;
}
/* Distinct from .anb-empty-note: no text-align, different padding. */
.anb-chart-empty {
  color: var(--gray-400);
  font-size: 13px;
  padding: 16px 0;
}

/* Revenue summary stat cards */
.anb-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.anb-stat-card {
  padding: 20px;
  text-align: center;
}
.anb-stat-label {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.anb-stat-value {
  font-size: 28px;
  font-weight: 700;
}
.anb-stat-value--revenue { color: #059669; }
.anb-stat-value--quantity { color: #2563eb; }
.anb-stat-value--rows { color: #7c3aed; }
.anb-stat-value--customers { color: #0f766e; }

/* Sales-source context banner */
.anb-context-card {
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #0f766e;
}
.anb-context-icon {
  font-size: 24px;
  color: #0f766e;
}
.anb-flex-1 {
  flex: 1;
}
.anb-context-heading {
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 500;
}
.anb-context-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-700);
}
.anb-context-facets {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
}

/* Chart / panel cards */
.anb-chart-card {
  padding: 20px;
  margin-bottom: 24px;
}
.anb-chart-title {
  margin: 0 0 16px 0;
  font-size: 16px;
}
.anb-two-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.anb-panel-card {
  padding: 20px;
}
.anb-panel-title {
  margin: 0 0 12px 0;
  font-size: 16px;
}
.anb-chart-scroll {
  overflow-x: auto;
}

/* Tables — .list-table already sets width:100% and th text-align:left, so
   those inline styles were simply dropped (redundant), not re-implemented
   as classes (see main.css .brd-th-icon precedent). .list-table th sets
   text-align:left at (0,1,1) specificity so the right-align override must
   compound with the base class; .list-table td does not set text-align, so
   a bare class is sufficient there. */
.list-table th.anb-col-right {
  text-align: right;
}
.anb-cell-right {
  text-align: right;
}

/* Customer link */
.anb-customer-link {
  color: #2563eb;
  text-decoration: none;
}

/* Churn risk summary cards — small fixed enum (Critical/High/Medium/Low),
   mirrors the .chr-score-fill--{variant} pattern already in main.css. */
.anb-churn-total {
  margin-bottom: 12px;
  font-size: 14px;
}
.anb-churn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.anb-churn-card {
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}
.anb-churn-card--critical { background: #fee2e2; }
.anb-churn-card--high { background: #fef3c7; }
.anb-churn-card--medium { background: #fef9c3; }
.anb-churn-card--low { background: #d1fae5; }

.anb-churn-label {
  font-size: 12px;
  font-weight: 500;
}
.anb-churn-label--critical { color: #991b1b; }
.anb-churn-label--high { color: #92400e; }
.anb-churn-label--medium { color: #854d0e; }
.anb-churn-label--low { color: #065f46; }

.anb-churn-count {
  font-size: 24px;
  font-weight: 700;
}
.anb-churn-count--critical { color: #991b1b; }
.anb-churn-count--high { color: #92400e; }
.anb-churn-count--medium { color: #854d0e; }
.anb-churn-count--low { color: #065f46; }

/* Segment distribution bars — 11-value fixed enum (RFM segment names) plus
   a genuinely per-item continuous width. Width is intentionally NOT in this
   stylesheet: it's set via a post-render `el.style.width = ...` CSSOM write
   in JS off a `data-fill-width` attribute (same pattern as
   churn-risk.js's .chr-score-fill), which is CSP-exempt because the
   element's own markup carries no initial style="" attribute. */
.anb-segment-row {
  margin-bottom: 8px;
}
.anb-segment-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 2px;
}
.anb-segment-count {
  font-weight: 500;
}
.anb-segment-track {
  height: 20px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.anb-seg-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.anb-seg-fill--champion { background: #fbbf24; }
.anb-seg-fill--loyal { background: #34d399; }
.anb-seg-fill--potential-loyalist { background: #60a5fa; }
.anb-seg-fill--new-customer { background: #818cf8; }
.anb-seg-fill--promising { background: #f472b6; }
.anb-seg-fill--need-attention { background: #fbbf24; }
.anb-seg-fill--about-to-sleep { background: #9ca3af; }
.anb-seg-fill--at-risk { background: #f87171; }
.anb-seg-fill--cant-lose { background: #ef4444; }
.anb-seg-fill--hibernating { background: #9ca3af; }
.anb-seg-fill--lost { background: #6b7280; }
.anb-seg-fill--default { background: #6b7280; }

/* shipment-detail.js */

/* Header */
.shd-id-label { font-size: 13px; color: var(--gray-500); margin-left: 8px; }
.shd-badge-wrap { margin-left: 12px; }

/* Status timeline card. `.card` has no base CSS rule anywhere in the
   stylesheet set (confirmed by grep), so bare modifier classes on it are
   safe with no compound needed. */
.shd-timeline-card { margin-top: 20px; padding: 24px 32px; }
.shd-timeline-row { display: flex; align-items: center; gap: 0; }
.shd-timeline-step { display: flex; flex-direction: column; align-items: center; min-width: 60px; }

.shd-timeline-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shd-timeline-circle--cancelled { background: #fee2e2; border-color: #991b1b; }
.shd-timeline-circle--completed { background: #16a34a; border-color: #16a34a; }
.shd-timeline-circle--pending { background: #e5e7eb; border-color: #d1d5db; }

.shd-timeline-check { color: white; font-size: 12px; font-weight: 700; }

.shd-timeline-label { font-size: 10px; margin-top: 4px; text-transform: capitalize; white-space: nowrap; }
.shd-timeline-label--current { color: #111827; font-weight: 600; }
.shd-timeline-label--completed { color: #16a34a; font-weight: 400; }
.shd-timeline-label--pending { color: #9ca3af; font-weight: 400; }

.shd-timeline-line { height: 2px; flex: 1; margin-top: -16px; }
.shd-timeline-line--filled { background: #16a34a; }
.shd-timeline-line--pending { background: #e5e7eb; }

/* Layout helpers */
.shd-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.shd-h3 { margin-bottom: 12px; }
.shd-link { color: #2563eb; }
.shd-link--underline { text-decoration: underline; }
.shd-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.shd-danger-text { color: #dc2626; }
.shd-actions-empty-note { color: var(--gray-400); font-size: 13px; margin-top: 8px; }

/* `.card` has no base rule, so bare is safe; shd-return-border compounds
   alongside it for the return-info card's extra left border. */
.shd-card-mt { margin-top: 24px; }
.shd-return-border { border-left: 3px solid #dc2626; }

/* Line items table. `.list-table th` sets text-align:left and
   `.list-table td` sets font-size:13px/color:var(--gray-700) at (0,1,1),
   which beats a bare (0,1,0) class regardless of source order — compound
   selectors are required to win on those elements. */
.shd-ta-right { text-align: right; }
.list-table th.shd-ta-right { text-align: right; }
.list-table td.shd-lot-id-cell { font-size: 12px; }

/* Event history */
.shd-events-scroll { max-height: 400px; overflow-y: auto; }
/* eventType's font-size:13px matches `.list-table td`'s own default, so
   only font-weight is net-new here (no compound needed). */
.shd-event-type-cell { font-weight: 500; }
.list-table td.shd-event-ts-cell { font-size: 12px; color: var(--gray-500); }
.list-table td.shd-event-details-cell { font-size: 12px; color: var(--gray-600); }
.list-table td.shd-no-events-cell { color: var(--gray-400); }

/* Dialog overlay/box. Starts hidden via `is-hidden` in markup; JS toggles
   the class rather than writing to `.style.display` directly. Every
   consumer needs its own scoped `.is-hidden` compound — there is no
   global rule for it in this codebase. */
.shd-dialog-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.shd-dialog-overlay.is-hidden { display: none; }
.shd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Dialog form fields — shared across the 5 command dialogs in this view */
.shd-dlg-h3 { margin-bottom: 16px; }
.shd-dlg-field { margin-bottom: 12px; }
.shd-dlg-field-last { margin-bottom: 16px; }
.shd-dlg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.shd-dlg-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.shd-dlg-input { width: 100%; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px; }
.shd-resize-vertical { resize: vertical; }
.shd-dlg-status { font-size: 12px; margin-bottom: 8px; }
/* Additive error state for #dlg-status; JS only ever adds this class
   (never removes it) since each dialog re-render starts fresh. */
.shd-dlg-status-error { color: red; }
.shd-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Destructive dialog-save buttons (Initiate Return / Cancel Shipment).
   These were previously `btn-primary` + an inline `background:#dc2626`
   override; since an inline style always wins over `.btn-primary:hover`
   regardless of hover state, the resting red never actually changed on
   hover. Dropping `btn-primary` entirely (rather than compounding on top
   of it) reproduces that exact behavior without fighting the
   `.btn-primary:hover` (0,2,0) specificity. */
.shd-btn-danger { background: #dc2626; color: white; }

/* Misc */
.shd-error-text { color: red; }

/* infoRow() helper */
.shd-info-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--gray-100); }
.shd-info-label { color: var(--gray-500); font-size: 13px; }
.shd-info-value { font-size: 13px; font-weight: 500; }

/* statusBadge() — small fixed enum (8 statuses), converted to modifier
   classes rather than a per-item inline style / CSSOM write. */
.shd-status-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.shd-status-badge--draft { background: #f3f4f6; color: #6b7280; }
.shd-status-badge--confirmed { background: #dbeafe; color: #2563eb; }
.shd-status-badge--picking_packing { background: #fef3c7; color: #92400e; }
.shd-status-badge--shipped { background: #d1fae5; color: #065f46; }
.shd-status-badge--in_transit { background: #cffafe; color: #0e7490; }
.shd-status-badge--delivered { background: #a7f3d0; color: #047857; }
.shd-status-badge--returned { background: #fef3c7; color: #92400e; }
.shd-status-badge--cancelled { background: #fee2e2; color: #991b1b; }

/* fixed-assets-list.js */

.fal-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fal-filter-control {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.fal-filter-input--wide {
  width: 180px;
}

/* .list-table th sets text-align:left at (0,1,1) specificity (list-view.css)
   — a bare class cannot win, so this compounds with .list-table th. */
.list-table th.fal-th-right {
  text-align: right;
}

/* .list-table td does not set text-align/font-weight, so these are safe
   as bare classes. */
.fal-td-right {
  text-align: right;
}
.fal-td-medium {
  font-weight: 500;
}
.fal-td-strong {
  font-weight: 600;
}

.fal-empty-msg {
  text-align: center;
  padding: 40px;
  color: var(--gray-400);
}
.fal-empty-msg.is-hidden {
  display: none;
}

.fal-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fal-dialog-overlay.is-hidden {
  display: none;
}
.fal-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 520px;
  max-width: 700px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
}

/* Status badge — small fixed 3-value enum (active/fully_depreciated/disposed). */
.fal-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.fal-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.fal-badge--fully_depreciated {
  background: #dbeafe;
  color: #2563eb;
}
.fal-badge--disposed {
  background: #f3f4f6;
  color: #6b7280;
}

.fal-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.fal-info-label {
  color: var(--gray-500);
  font-size: 13px;
}
.fal-info-value {
  font-size: 13px;
  font-weight: 500;
}

.fal-schedule-section {
  margin-top: 16px;
}
.fal-schedule-heading {
  margin-bottom: 8px;
}
.fal-schedule-scroll {
  max-height: 250px;
  overflow-y: auto;
}

.fal-dlg-title {
  margin-bottom: 16px;
}
.fal-mono-id {
  font-family: monospace;
  font-size: 12px;
}

.fal-progress-section {
  margin-top: 12px;
}
.fal-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.fal-progress-track {
  background: var(--gray-200);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
/* Width is genuinely per-instance continuous data (0-100%), so it stays a
   CSSOM write (progressFill.style.width = ...) — CSP-exempt since the
   element carries no initial style attribute. The background color is only
   a 2-value threshold (>=100% complete vs in-progress), so that part is a
   modifier class toggled via classList instead of a CSSOM color write. */
.fal-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: #16a34a;
}
.fal-progress-fill--complete {
  background: #2563eb;
}

.fal-dispose-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
.fal-dispose-btn {
  color: #dc2626;
}
.fal-dispose-text {
  font-size: 13px;
  margin-bottom: 12px;
}

/* Dialog footer action row. Base has no margin-top (used standalone in the
   dispose/new-asset/run-depreciation dialogs); the detail dialog's footer
   additionally needs margin-top:16px, so it gets the modifier alongside
   the base class. */
.fal-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.fal-dlg-actions--mt16 {
  margin-top: 16px;
}

.fal-btn-danger {
  background: #dc2626;
  border-color: #dc2626;
}

/* Generic form-field primitives shared across all three create/dispose/
   run-depreciation dialogs — byte-identical across every usage. */
.fal-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.fal-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.fal-field-textarea {
  resize: vertical;
}

/* Two-column grid field row. margin-bottom is 12px everywhere except the
   Run Monthly Depreciation dialog's row, which needs 16px — that one usage
   pairs .fal-form-row with .fal-mb-16 (defined below, later in this file so
   it wins the tie on the shared margin-bottom property via source order). */
.fal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.fal-mb-12 {
  margin-bottom: 12px;
}
.fal-mb-16 {
  margin-bottom: 16px;
}

/* Shared by #dlg-dispose-status / #dlg-status / #dlg-dep-status — identical
   base style="font-size:12px;margin-bottom:8px" across all three dialogs. */
.fal-status-msg {
  font-size: 12px;
  margin-bottom: 8px;
}
.fal-status-msg--error {
  color: red;
}

.fal-dep-intro {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 12px;
}

.fal-dep-result-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 12px;
}
.fal-dep-result-title {
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 4px;
}
.fal-dep-result-line {
  font-size: 13px;
}
.fal-dep-result-line--error {
  color: #dc2626;
}

/* tib-transfer-detail.js */

/* .detail-header (detail-view.css) already sets display:flex;
   align-items:center;justify-content:space-between;margin-bottom:24px —
   the new-form header only adds padding, which the base rule doesn't
   set, so a bare class is safe here (no compound needed). */
.tibd-header-pad { padding: 24px; }

/* The existing-transfer header overrides align-items (center -> flex-start),
   which IS set by .detail-header at (0,1,0) in detail-view.css — a bare
   class in this file can't win, so this must compound against the base
   class itself. */
.detail-header.tibd-header-existing { align-items: flex-start; padding: 24px; }

.tibd-new-body { padding: 0 24px 24px; max-width: 760px; }

/* .card has no base CSS rule anywhere in the stylesheet set, so this bare
   modifier class is safe with no compound needed. */
.tibd-card-pad { padding: 20px; }
.tibd-card-span { grid-column: 1 / -1; }

.tibd-no-auths-warning { color: var(--orange-600, #ea580c); margin: 0 0 12px; }
.tibd-no-locations-warning { margin: 4px 0 0; font-size: 12px; color: var(--orange-600, #ea580c); }

.tibd-link { color: var(--blue-500); }
.tibd-link-mono { font-family: monospace; font-size: 12px; }

.tibd-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* Shared by the three new-form sections that are hidden/shown via a
   classList.toggle('is-hidden', ...) JS write instead of inline
   style.display (winery section, receiving-location section, customer
   section) — all three carry the identical margin-top:16px base and all
   three start hidden in the initial markup. There is no global
   .is-hidden rule anywhere in this codebase, so this compound is
   required per-consumer. */
.tibd-toggle-mt16 { margin-top: 16px; }
.tibd-toggle-mt16.is-hidden { display: none; }

.tibd-mt12 { margin-top: 12px; }
.tibd-mt16 { margin-top: 16px; }

/* Destination-kind section shares the plain .tibd-mt16 margin (it does
   NOT start hidden, unlike the .tibd-toggle-mt16 group above), so it
   gets its own scoped is-hidden compound instead of duplicating the
   margin-top declaration. */
.tibd-dest-kind-section.is-hidden { display: none; }

.tibd-field-label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.tibd-required-mark { color: var(--red-500); }
.tibd-customer-picker-wrap { position: relative; }
.tibd-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--gray-500); }
.tibd-field-hint.is-hidden,
#ttx-container-type-section.is-hidden,
#ai-weight-fields.is-hidden,
#ai-tracking.is-hidden,
#ai-lot-evidence.is-hidden,
#ai-bulk-only.is-hidden { display: none; }
.tibd-actions-row { margin-top: 20px; display: flex; gap: 8px; }

.tibd-action-date { min-width: 150px; }

.tibd-info-label { color: var(--gray-500); }
.tibd-error-text { color: red; }

.tibd-status-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.tibd-transfer-number { color: var(--gray-500); font-family: monospace; font-size: 12px; }
.tibd-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tibd-existing-body { padding: 0 24px 24px; max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tibd-h3-tight { margin: 0 0 12px; }
.tibd-h3-flush { margin: 0; }

.tibd-info-grid { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; font-size: 14px; }
.tibd-info-grid-narrow { display: grid; grid-template-columns: 140px 1fr; row-gap: 8px; font-size: 14px; }

.tibd-mono { font-family: monospace; }
.tibd-pre-wrap { white-space: pre-wrap; }

.tibd-empty-note { color: var(--gray-400); margin: 0; }
.tibd-doc-fields-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tibd-items-header { display: flex; justify-content: space-between; align-items: center; }
.tibd-no-items-text { color: var(--gray-400); margin: 12px 0 0; }
.tibd-section-h4 { margin: 16px 0 8px; font-size: 13px; color: var(--gray-600); }

/* .list-table th sets text-align:left at (0,1,1) in list-view.css — a
   bare class can't win, so this must compound against the base class. */
.list-table th.tibd-th-right { text-align: right; }
/* .list-table td doesn't set text-align, so this is safe as a bare class. */
.tibd-td-right { text-align: right; }
/* .list-table td sets font-size:13px and color:var(--gray-700) at
   (0,1,1) — our override needs font-size:12px, which a bare class can't
   win against, so this compounds too (font-family is new, but bundled
   into the same compound rule for the one declaration block). */
.list-table td.tibd-td-mono { font-family: monospace; font-size: 12px; }

.tibd-shipper-ref { color: var(--gray-500); font-size: 11px; }

.tibd-dialog-col { display: flex; flex-direction: column; gap: 12px; }
.tibd-kind-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tibd-kind-checkbox { width: 16px; height: 16px; accent-color: var(--wa-color-brand-60); }
.tibd-dialog-wide { --width: 640px; }
.tibd-container-id-note { margin: 0; font-size: 12px; color: var(--gray-500); }
.tibd-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.tibd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Add-item dialog's barrel-only fields block: toggled via
   classList.toggle('is-hidden', ...) instead of style.display
   'grid'/'none'. Reuses .tibd-grid-2 for the base grid layout (visible
   by default, matching the original markup with no inline display:none)
   and adds its own is-hidden compound. */
.tibd-barrel-only.is-hidden { display: none; }

/* Batch 30 */
/* purchase-order-detail.js */

.por-empty-dash {
  color: var(--gray-400);
}

/* --- Address edit dialog (openAddressDialog) --- */
.por-addr-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.por-addr-row3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 110px) minmax(0, 110px);
  gap: 12px;
}

.por-min-w0 {
  min-width: 0;
}

.por-addr-state-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  min-width: 0;
}

.por-addr-state-select {
  height: 36px;
  padding: 6px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 4px;
  min-width: 0;
}

.por-addr-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.por-addr-hint {
  font-size: 12px;
  color: var(--gray-500);
}

/* --- Detail header / order-details card (renderExisting) --- */
.por-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.por-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Disabled read-only field styling shared across renderExisting/renderEditForm. */
.por-disabled-field {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* PO # field is emphasized (larger, darker, bold) vs. the plain disabled fields. */
.por-disabled-field-strong {
  background: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 16px;
}

/* .form-row (detail-view.css) already sets display/grid-template-columns/gap(16px)/
   margin-bottom at (0,1,0) bare-class specificity, and detail-view.css loads AFTER
   main.css — a bare override class here would lose the cascade. Compound against
   .form-row itself to win, overriding gap to 12px and adding margin-top. */
.form-row.por-addr-form-row {
  gap: 12px;
  margin-top: 8px;
}

.por-addr-label {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.por-addr-block-body {
  font-size: 13px;
  color: var(--gray-700);
  margin-top: 4px;
  line-height: 1.4;
  min-height: 60px;
}

.por-muted-label {
  color: var(--gray-500);
}

.por-status-tag-wrap {
  margin-bottom: 8px;
}

/* .order-actions (detail-view.css) already sets display:flex/gap/margin-top;
   flex-direction isn't touched there so this is safe as a plain additive class. */
.por-actions-col {
  flex-direction: column;
}

.por-panel-note {
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}

/* --- Line items table (renderExisting) --- */
.por-table-spaced {
  margin-top: 8px;
}

/* .list-table th sets text-align:left at (0,1,1) — a bare class can't beat that,
   so the th usage needs the compound form. Bare rule below covers td usage,
   where .list-table td never sets text-align. */
.por-col-right {
  text-align: right;
}
.list-table th.por-col-right {
  text-align: right;
}

.por-received-hint {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}

.por-qty-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.por-total-row {
  font-weight: 700;
  border-top: 2px solid var(--gray-300);
}

/* .list-table td sets padding:7px 10px (incl. padding-right) at (0,1,1); needs
   the compound form to win the padding-right override. */
.list-table td.por-total-label {
  text-align: right;
  padding-right: 12px;
}

/* --- Linked TIB transfers / landed-cost allocation panels --- */
.por-muted-note {
  color: var(--wa-color-neutral-50);
}

.por-danger-note {
  color: var(--wa-color-danger-50);
}

.por-list-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--wa-color-neutral-90);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.por-mono-link {
  color: var(--blue-500);
  font-family: monospace;
  font-size: 12px;
}

.por-status-label {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}

.por-truncate-cell {
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.por-tabular-cell {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.por-flex-cell {
  font-size: 12px;
  flex: 1;
}

.por-total-summary-row {
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}

.por-tabular {
  font-variant-numeric: tabular-nums;
}

/* --- Line-item edit table (wireLineItems, new/edit forms) --- */
.por-table-flush {
  margin-top: 0;
}

.por-col-item {
  min-width: 220px;
}

/* th usages need the compound form to beat .list-table th's text-align:left. */
.list-table th.por-col-qty {
  width: 100px;
  text-align: right;
}

.por-col-unit {
  width: 120px;
}

.list-table th.por-col-price {
  width: 120px;
  text-align: right;
}

.list-table th.por-col-total {
  width: 110px;
  text-align: right;
}

.por-col-action {
  width: 36px;
}

.por-cell-input {
  font-size: 13px;
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 4px 8px;
}

.por-cell-textarea {
  resize: vertical;
  min-height: 32px;
  line-height: 1.4;
}

.por-cell-right {
  text-align: right;
}

.por-cell-bold {
  font-weight: 500;
}

.por-remove-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

/* CSSOM-write conversion: removeBtn.style.visibility = 'hidden' when there's
   only one line item left (can't remove the last row). */
.por-remove-hidden {
  visibility: hidden;
}

/* --- New/Edit forms --- */
.por-error-panel {
  padding: 24px;
  color: var(--wa-color-danger-50);
}

.por-field-hint {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 4px;
}

.por-link {
  color: var(--brand-600);
  text-decoration: underline;
}

.por-relative {
  position: relative;
}

.por-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.por-addr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.por-addr-preview {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.4;
  min-height: 60px;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
}

.por-section-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px;
}

.por-section-hint-sm {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.por-mt-12 {
  margin-top: 12px;
}

.por-total-bar {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: baseline;
}

.por-total-caption {
  font-weight: 600;
  color: var(--gray-600);
}

.por-total-value {
  font-size: 20px;
  font-weight: 700;
}

.por-revise-warnings {
  margin-bottom: 16px;
}

/* receive-wizard.js */

.rwz-mt-8 { margin-top: 8px; }
.rwz-mt-16 { margin-top: 16px; }
.rwz-mb-16 { margin-bottom: 16px; }
.rwz-m0 { margin: 0; }

.rwz-muted { color: var(--wa-color-neutral-50); }
.rwz-text-secondary { color: var(--wa-color-neutral-40); }
.rwz-text-secondary-14 { color: var(--wa-color-neutral-40); font-size: 14px; }
.rwz-danger-text { color: var(--wa-color-danger-30); }

.rwz-hint-mt4 { font-size: 12px; color: var(--wa-color-neutral-50); margin-top: 4px; }
.rwz-status-block { margin: 8px 0; font-size: 13px; }

.rwz-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rwz-progress-counter { margin-left: 12px; color: var(--wa-color-neutral-40); font-size: 13px; }
.rwz-help-text { margin: 8px 0 0 0; color: var(--wa-color-neutral-40); font-size: 12px; }
.rwz-help-text-mb8 { margin: 0 0 8px 0; font-size: 12px; color: var(--wa-color-neutral-40); }

.rwz-field-row { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rwz-field-col-280 { max-width: 280px; flex: 1 1 280px; }
.rwz-field-col-240 { max-width: 280px; flex: 1 1 240px; }
.rwz-note-11 { margin: 4px 0 0 0; font-size: 11px; color: var(--wa-color-neutral-50); }
.rwz-status-mt4-12 { margin-top: 4px; font-size: 12px; }

.rwz-warning-card { margin-bottom: 16px; border-left: 3px solid var(--wa-color-warning-40,#d97706); }
.rwz-note-13-700 { margin: 4px 0 0 0; font-size: 13px; color: var(--wa-color-neutral-30); }
.rwz-note-mt6-12 { margin: 6px 0 0 0; font-size: 12px; color: var(--wa-color-neutral-40); }

.rwz-h3-tight-4 { margin: 0 0 4px 0; }
.rwz-h4-tight-8 { margin: 0 0 8px 0; }
.rwz-h4-lots { margin: 12px 0 6px 0; }
.rwz-flex-row-center { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rwz-status-mt8-13 { margin-top: 8px; font-size: 13px; }

.rwz-overage-panel { margin-top: 8px; }
.rwz-overage-radios { display: flex; flex-direction: column; gap: 8px; }
.rwz-overage-radio { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--wa-color-neutral-80); border-radius: 8px; cursor: pointer; }
.rwz-overage-radio:has(input:checked) { border-color: var(--wa-color-brand-50); background: var(--wa-color-brand-95); }
.rwz-overage-radio-title { font-weight: 500; font-size: 14px; }
.rwz-overage-radio-blurb { font-size: 12px; color: var(--wa-color-neutral-40); }

.rwz-line-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.rwz-meta-13 { font-size: 13px; color: var(--wa-color-neutral-40); }
.rwz-mr-12 { margin-right: 12px; }
.rwz-collapsed-warning {
  background: var(--wa-color-warning-50,#fffbeb);
  border: 1px solid var(--wa-color-warning-70,#fcd34d);
  margin: 0 0 8px 0;
  padding: 10px;
}

.rwz-lot-actions-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
/* .variance-reason is a plain JS-hook class with no existing CSS rule
   anywhere in the stylesheet set, so this bare class is safe. */
.rwz-variance-reason { min-width: 200px; }
.rwz-variance-reason.rwz-flag-error {
  outline: 2px solid var(--wa-color-danger-50);
  border-radius: 4px;
}
.rwz-flex-1 { flex: 1; }

.rwz-quality-branch { margin-top: 10px; }
.rwz-quality-details { width: 100%; --spacing: 12px; }
.rwz-quality-summary { display: flex; align-items: center; gap: 8px; }
.rwz-quality-summary-copy { display: flex; flex-direction: column; gap: 2px; }
.rwz-quality-summary-title { font-size: 13px; font-weight: 600; }
.rwz-quality-summary-hint { color: var(--wa-color-neutral-40); font-size: 12px; }
.rwz-quality-fields { padding-top: 2px; }
.rwz-checkbox-mt2 { margin-top: 2px; }
.rwz-quality-grid-3 {
  display: grid;
  grid-template-columns: minmax(140px,1fr) minmax(180px,1fr) minmax(120px,1fr);
  gap: 8px;
}
.rwz-quality-grid-2 {
  display: grid;
  grid-template-columns: minmax(180px,240px) 1fr;
  gap: 8px;
  margin-top: 8px;
}
.rwz-quality-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* .lot-row grid-template-columns varied by item-type flags (showBarrelCode /
   showSpirit) in the original inline style; showSpirit=true implies
   showBarrelCode=true, so there are exactly 3 real combinations. */
.rwz-lot-row { display: grid; gap: 8px; margin-bottom: 6px; align-items: end; }
.rwz-lot-row--basic { grid-template-columns: 90px 1fr 130px 36px; }
.rwz-lot-row--barrel { grid-template-columns: 90px 1fr 130px 110px 36px; }
.rwz-lot-row--spirit { grid-template-columns: 90px 1fr 130px 110px 90px 90px 36px; }
.rwz-spirit-age-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(180px, 220px) 1fr;
  gap: 8px;
  align-items: end;
  padding: 6px 0 10px;
}
.rwz-spirit-age-message { color: var(--wa-color-neutral-30); font-size: 13px; align-self: center; }
.rwz-spirit-age-fields .lot-age-error { grid-column: 1 / -1; min-height: 1em; }
.rwz-spirit-age-fields .lot-original-fill-date.is-hidden { display: none; }
.rwz-spirit-provenance-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(220px, 1fr) minmax(180px, 240px) minmax(220px, 1fr);
  gap: 8px;
  align-items: end;
  padding: 0 0 10px;
}
.rwz-spirit-provenance-help { grid-column: 1 / -1; color: var(--wa-color-neutral-30); font-size: 13px; }
.rwz-spirit-provenance-fields .lot-provenance-error { grid-column: 1 / -1; min-height: 1em; }

.rwz-relative { position: relative; }
.rwz-field-label { display: block; font-size: 12px; color: var(--wa-color-neutral-30); margin-bottom: 2px; }
.rwz-loc-input {
  width: 100%;
  height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--wa-color-neutral-70,#d1d5db);
  border-radius: 4px;
  font-size: 13px;
}
/* Initial-hidden dropdown; the shared autocomplete-create.js component (a
   different file, out of scope for this batch) toggles visibility via its
   own `.style.display` writes on this element — those remain functionally
   correct against the class-based default since an inline style write from
   that component still wins over this class. */
.rwz-loc-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--wa-color-neutral-95,white);
  border: 1px solid var(--wa-color-neutral-80,#e5e7eb);
  border-radius: 4px;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--wa-shadow-large,0 4px 12px rgba(0,0,0,0.15));
}
.rwz-remove-btn { height: 36px; min-width: 36px; padding: 0; }

.rwz-dialog-stack { display: flex; flex-direction: column; gap: 12px; }
.rwz-font-13 { font-size: 13px; }

.rwz-checkbox-label-mt10 { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-size: 13px; }
.rwz-seed-note { margin: 4px 0 0; font-size: 12px; color: var(--wa-color-neutral-50); }
.rwz-bonded-toggle-label { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
/* JS toggles `is-hidden` on this element's own classList (openCompleteDialog's
   bondedToggle change handler), replacing a `.style.display` CSSOM write. */
.rwz-bonded-fields { margin-top: 8px; }
.rwz-bonded-fields.is-hidden { display: none; }
.rwz-bonded-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rwz-btn-row-mt8 { display: flex; gap: 8px; margin-top: 8px; }

.rwz-done-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rwz-lot-link { color: var(--blue-500); font-family: var(--wa-font-mono,monospace); font-size: 12px; }
.rwz-mono-12 { font-family: var(--wa-font-mono,monospace); font-size: 12px; }

.rwz-quality-result {
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid transparent;
}
.rwz-quality-result--warning {
  border-color: var(--wa-color-warning-70,#fcd34d);
  background: var(--wa-color-warning-50,#fffbeb);
}
.rwz-quality-result--success {
  border-color: var(--wa-color-success-70,#86efac);
  background: var(--wa-color-success-50,#f0fdf4);
}
.rwz-warning-pre { color: var(--wa-color-warning-20,#92400e); white-space: pre-wrap; }
.rwz-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.rwz-danger-pre { color: var(--wa-color-danger-30); white-space: pre-wrap; font-family: inherit; margin: 0; }
.rwz-error-card { border-left: 3px solid var(--wa-color-danger-50); }
.rwz-error-body { color: var(--wa-color-danger-30); font-size: 13px; white-space: pre-wrap; }

/* schedule-assignee-catalog.js — WORK-894 action slot */

.sched-catalog-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
}
.sched-catalog-status {
  color: var(--wa-color-neutral-on-quiet);
  font-size: var(--wa-font-size-s);
}
.sched-catalog-status--error {
  color: var(--wa-color-danger-on-quiet);
}

/* bank-import.js */

.bank-import-workflow-stack {
  --wa-space: var(--wa-space-l);
  margin-top: var(--wa-space-l);
}
.bank-import-mapping-grid { --min-column-size: 14rem; }
.bank-import-mapping-library-row {
  justify-content: space-between;
  margin-block: var(--wa-space-xs);
}

/* Step indicator */
.bnim-steps { display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:32px; }
.bnim-step { display:flex;align-items:center;gap:8px; }
.bnim-step-circle { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px; }
.bnim-step-circle--current { background:#2563eb;color:white; }
.bnim-step-circle--done { background:#dcfce7;color:#16a34a; }
.bnim-step-circle--pending { background:#f3f4f6;color:#9ca3af; }
.bnim-step-label { font-size:13px;font-weight:500;color:var(--gray-500); }
.bnim-step-label--current { color:#1e40af; }
.bnim-step-connector { width:40px;height:2px;background:var(--gray-200); }

/* Generic wizard-panel sizing/layout (reused across steps 1-4) */
.bnim-panel-sm { max-width:500px;margin:0 auto; }
.bnim-panel-md { max-width:700px;margin:0 auto; }
.bnim-panel-lg { max-width:900px;margin:0 auto; }
.bnim-panel-sm-loading { max-width:500px;margin:0 auto;text-align:center;padding:40px 0; }
.bnim-panel-sm-center { max-width:500px;margin:0 auto;text-align:center; }

/* Generic spacing utilities used repeatedly throughout the wizard */
.bnim-mb-12 { margin-bottom:12px; }
.bnim-mb-16 { margin-bottom:16px; }
.bnim-mb-24 { margin-bottom:24px; }
.bnim-flex-end { display:flex;justify-content:flex-end; }
.bnim-flex-between { display:flex;gap:8px;justify-content:space-between; }
.bnim-flex-gap-12 { display:flex;gap:12px; }
.bnim-flex-gap-8-center { display:flex;gap:8px;justify-content:center; }
.bnim-fw-600 { font-weight:600; }
.bnim-hint { font-size:11px;color:var(--gray-500); }

/* Step 1 - account / file-type selection */
.bnim-field-label { display:block;font-size:13px;font-weight:500;margin-bottom:4px; }
.bnim-select-full { width:100%;padding:8px;border:1px solid var(--gray-300);border-radius:6px;font-size:14px; }
.bnim-file-type-option { display:flex;align-items:center;gap:6px;cursor:pointer;padding:12px 20px;border-radius:8px;flex:1;border:2px solid var(--gray-200); }
.bnim-file-type-option--selected { border-color:#2563eb; }

/* Step 2 - CSV / QBO paste + column mapping */
.bnim-textarea-csv { width:100%;padding:8px;border:1px solid var(--gray-300);border-radius:6px;font-family:monospace;font-size:12px;resize:vertical; }
.bnim-textarea-qbo { width:100%;padding:8px;border:1px solid var(--gray-300);border-radius:6px;font-family:monospace;font-size:11px;resize:vertical; }
.bnim-map-grid { display:grid;grid-template-columns:1fr 80px;gap:8px;align-items:center; }
.bnim-map-label { font-size:13px;font-weight:500; }
.bnim-map-input { padding:6px;border:1px solid var(--gray-300);border-radius:4px;text-align:center; }
.bnim-map-select { padding:6px;border:1px solid var(--gray-300);border-radius:4px;font-size:12px; }
.bnim-parsed-summary { font-size:13px;color:var(--gray-600); }
.bnim-step-status { font-size:12px;margin-bottom:12px; }
.bnim-step-status--error { color:red; }
.bnim-step-status--warn { color:#a16207; }

/* Step 3 - preview table */
.bnim-preview-intro { font-size:13px;color:var(--gray-500);margin-bottom:16px; }
.bnim-preview-card { max-height:500px;overflow-y:auto;margin-bottom:16px; }
.bnim-preview-footer { font-size:12px;color:var(--gray-500);margin-bottom:16px; }
.bnim-th-checkbox { width:30px; }
/* .list-table th sets text-align:left at (0,1,1) in list-view.css — a bare
   class cannot win, so this compounds with .list-table th. */
.list-table th.bnim-th-right { text-align:right; }
/* .list-table td sets font-size:13px/color:var(--gray-700) at (0,1,1) —
   a bare class cannot override, so these compound with .list-table td. */
.list-table td.bnim-cell-date { font-size:12px; }
.list-table td.bnim-amount-cell { text-align:right;font-family:monospace; }
.list-table td.bnim-amount--positive { color:#16a34a; }
.list-table td.bnim-amount--negative { color:#dc2626; }
/* tr is not covered by the .list-table td/th trap (opacity isn't set by
   .list-table tbody tr), so a bare class is safe here. */
.bnim-row-skipped { opacity:0.4; }

/* Step 4 - import result */
.bnim-loading-text { font-size:16px;color:var(--gray-500); }
.bnim-check-icon { font-size:48px;margin-bottom:16px; }
.bnim-result-card { text-align:left;margin-bottom:24px; }
.bnim-result-row { display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--gray-100); }
.bnim-result-imported { color:#16a34a;font-weight:600; }
.bnim-warnings-block { margin-top:12px; }
.bnim-warnings-label { color:#a16207; }
.bnim-warnings-list { margin:4px 0;padding-left:20px;font-size:12px;color:#a16207; }

/* Outer wizard card */
.bnim-wizard-card { margin-top:24px;padding:32px; }

/* fermentation-recipes-list.js */

/* Filter bar above the list table */
.frl-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.frl-filter-control {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.frl-search-input {
  width: 200px;
}

/* .list-table th sets text-align:left at (0,1,1) — a bare class can't
   win, so this compounds with the base selector regardless of load
   order (same trap documented for other list views). */
.list-table th.frl-th-right {
  text-align: right;
}

/* .list-table td sets font-size/color at (0,1,1); this cell also
   overrides font-size, so it must compound too. */
.list-table td.frl-cell-temp {
  font-size: 12px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .list-table td doesn't set text-align/font-weight, so these are safe
   as bare classes. */
.frl-cell-strong {
  font-weight: 500;
}
.frl-cell-right {
  text-align: right;
}
/* .list-table td sets color at (0,1,1); overriding it needs a compound. */
.list-table td.frl-error-row {
  color: red;
}

/* .btn-sm sets padding at bare (0,1,0); compound so this wins
   regardless of stylesheet append order (same pattern as
   .btn-sm.bpld-btn-danger-solid elsewhere in main.css). */
.btn-sm.frl-duplicate-btn {
  font-size: 11px;
  padding: 2px 8px;
}

/* Create-dialog shell */
.frl-create-dialog {
  --width: 1120px;
}
.frl-create-content {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.frl-required-contract {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wa-color-brand-80, #b8d4ff);
  border-radius: 8px;
  background: var(--wa-color-brand-95, #eff6ff);
  color: var(--gray-700);
  font-size: 13px;
}
.frl-validation-summary {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--wa-color-danger-60, #dc6666);
  border-radius: 8px;
  background: var(--wa-color-danger-95, #fff1f1);
  color: var(--wa-color-danger-20, #7f1d1d);
  font-size: 13px;
}
.frl-validation-summary.is-hidden {
  display: none;
}
.frl-validation-summary ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.frl-validation-summary a {
  color: inherit;
  text-decoration: underline;
}
.frl-validation-field {
  border-radius: 7px;
}
.frl-validation-field--invalid {
  padding: 8px;
  border: 1px solid var(--wa-color-danger-60, #dc6666);
  background: var(--wa-color-danger-95, #fff1f1);
}
.frl-field-error {
  margin-top: 5px;
  color: var(--wa-color-danger-30, #991b1b);
  font-size: 12px;
  font-weight: 600;
}
.frl-field-error.is-hidden {
  display: none;
}
.frl-selection-status {
  margin-top: 5px;
  color: var(--gray-500);
  font-size: 12px;
}
.frl-selection-status.is-success {
  color: var(--wa-color-success-30, #166534);
}
.frl-selection-status.is-danger {
  color: var(--wa-color-danger-30, #991b1b);
}
.frl-invalid-control,
/* `frl-invalid-control` is applied to wa-input and wa-button controls; the
   deprecated generic `base` part resolves to `input-wrapper` on the former
   and `button` on the latter. */
.frl-invalid-control::part(input-wrapper),
.frl-invalid-control::part(button) {
  border-color: var(--wa-color-danger-50, #dc2626);
}
.frl-content-grid {
  display: grid;
  gap: 16px;
}
.frl-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
.frl-field-stack {
  display: grid;
  gap: 8px;
}
.frl-yeast-input-wrap {
  position: relative;
}

/* .card-radio-group (detail-view.css) sets display:flex;gap:12px at
   bare (0,1,0) and loads after main.css, so a bare frl class would
   lose a load-order tie. Compound to (0,2,0) to win unconditionally —
   same pattern as .card-radio-group.mrl-mode-picker-grid. */
.card-radio-group.frl-mode-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* .card-radio (detail-view.css) already sets border:1px solid
   neutral-300, border-radius:6px and cursor:pointer at bare (0,1,0) —
   redundant here, so only the overridden properties (width + default
   unselected color + padding) are set. .card-radio.selected (also
   detail-view.css, 0,2,0) sets border-color to primary-500 and wins
   the equal-specificity tie for that property when both classes are
   present, so the selected-state color intentionally comes from that
   existing rule via cascade, not from a rule here. */
.card-radio.frl-mode-card {
  border-width: 2px;
  padding: 10px 12px;
  border-color: var(--wa-color-neutral-80);
}
.frl-mode-card-title {
  font-weight: 500;
  font-size: 14px;
}
.frl-mode-card-desc {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

/* Bordered section cards used throughout the create dialog */
.frl-bordered-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
}
.frl-card-title {
  margin: 0 0 8px 0;
  font-size: 14px;
}
.frl-card-title-inline {
  margin: 0;
  font-size: 14px;
}
.frl-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Field grid layouts */
.frl-grid-2col-fixed120 {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
}
.frl-grid-yeast-qty {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 8px;
}
.frl-grid-2col-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frl-grid-og-fg-row {
  display: grid;
  grid-template-columns: 110px 1fr 110px 130px;
  gap: 8px;
}
.frl-final-ph-help {
  align-self: end;
  padding-bottom: 9px;
}

/* Temperature unit toggle row */
.frl-unit-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.frl-unit-label {
  font-size: 12px;
  color: var(--gray-500);
}
.frl-unit-toggle-group {
  display: inline-flex;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  overflow: hidden;
}
/* Existing markup class (not newly invented) — filling in its rule
   plus a selected-state modifier so the applyUnit() handler can drop
   its .style.background/.color/.fontWeight writes entirely. */
.fr-temp-unit-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  background: white;
  color: var(--gray-600);
  font-weight: 400;
}
.fr-temp-unit-btn.selected {
  background: var(--wa-color-brand-95, #eff6ff);
  color: var(--wa-color-brand-30, #1d4ed8);
  font-weight: 500;
}

/* Helper/caption text + spacing utilities */
.frl-helper-text {
  font-size: 12px;
  color: var(--gray-500);
}
.frl-mt-6 {
  margin-top: 6px;
}
.frl-mt-8 {
  margin-top: 8px;
}
.frl-mb-8 {
  margin-bottom: 8px;
}

/* Detailed-mode temperature profile / SOP steps blocks start hidden in
   Simple mode. Scoped by id since applyMode() already queries these
   elements by id — no global .is-hidden rule exists in this codebase,
   so every consumer needs its own compound (see program convention). */
#fr-temp-detailed.is-hidden {
  display: none;
}
#fr-steps-card.is-hidden {
  display: none;
}

.frl-steps-empty-msg {
  font-size: 13px;
  color: var(--gray-400);
  padding: 8px 0;
}
.frl-steps-empty-msg.is-hidden {
  display: none;
}

/* Temperature-stage / SOP-step / corrective-action row builders.
   These class names already existed in the markup as JS hooks
   (querySelector targets) with no prior CSS rule — filling them in
   directly rather than introducing redundant frl- wrapper classes. */
.fr-stage-row {
  display: grid;
  grid-template-columns: 32px 1fr 90px 80px 90px 110px 32px;
  gap: 6px;
  align-items: end;
  margin-bottom: 8px;
  padding: 6px;
  background: var(--gray-50, #f9fafb);
  border-radius: 6px;
}
.fr-stage-num,
.fr-step-num {
  text-align: center;
  font-weight: 600;
  color: var(--gray-500);
}
.fr-stage-remove,
.fr-step-remove,
.fr-ca-remove {
  height: 32px;
  min-width: 32px;
  padding: 0;
}

.fr-step-row {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: white;
}
.frl-step-row-grid {
  display: grid;
  grid-template-columns: 32px 1.2fr 2fr 90px 90px 90px 32px;
  gap: 6px;
  align-items: end;
}
.frl-step-flags-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-600);
}
.frl-checkbox-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.fr-step-ccp {
  accent-color: var(--wa-color-warning-50, #d97706);
}
.fr-step-qc {
  accent-color: var(--wa-color-brand-50);
}
.fr-step-correctives {
  margin-top: 8px;
}
.fr-step-add-corrective {
  font-size: 11px;
  color: var(--wa-color-warning-40, #d97706);
  margin-top: 4px;
}
.fr-step-notes {
  margin-top: 8px;
}

.fr-corrective-row {
  display: grid;
  grid-template-columns: 1fr 1fr 80px 70px 32px;
  gap: 6px;
  align-items: end;
  padding: 6px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: 1px solid var(--wa-color-warning-80, #fde68a);
  border-radius: 4px;
  margin-bottom: 4px;
}
.frl-icon-sm {
  font-size: 12px;
}

/* equipment-detail.js */

/* Small spacing utilities used across the new-mode form + edit-mode layout. */
.eqd-mt-8 { margin-top: 8px; }
.eqd-mt-12 { margin-top: 12px; }
.eqd-mt-24 { margin-top: 24px; }
.eqd-mb-12 { margin-bottom: 12px; }
.eqd-mb-16 { margin-bottom: 16px; }
.eqd-ml-8 { margin-left: 8px; }
.eqd-h3-flush { margin: 0; }

/* Conditional new-mode cards (#materials-card / #measurement-card) toggled
   via classList in syncTypeVisibility(). Neither property is touched by the
   shared .detail-card rule (detail-view.css), so a bare compound is safe. */
.eqd-materials-card.is-hidden { display: none; }
.eqd-measurement-card.is-hidden { display: none; }

/* Load error paragraph (renderEdit fetch failure). */
.eqd-error-text { color: red; }

/* Retired banner. .auth-error already sets background/border/padding/
   border-radius/font-size (auth.css); compounded here to override the
   colors + radius that differ, and to add the margin-bottom auth-error
   doesn't set. padding matches the base rule so it's omitted. */
.auth-error.eqd-retired-banner {
  background: #fee;
  border: 1px solid #c33;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* Type / status / active-state badges in the header. Base layout shared,
   colors vary by a small fixed enum via modifier classes. */
.eqd-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.eqd-badge--mr { margin-right: 8px; }

.eqd-badge--type {
  background: #e0f2fe;
  color: #0369a1;
}

.eqd-badge--status-available { background: #dcfce7; color: #16a34a; }
.eqd-badge--status-in_use { background: #dbeafe; color: #2563eb; }
.eqd-badge--status-maintenance { background: #fef9c3; color: #a16207; }
.eqd-badge--status-out_of_service { background: #fecaca; color: #dc2626; }
.eqd-badge--status-retired { background: #f3f4f6; color: #6b7280; }
.eqd-badge--status-default { background: #f3f4f6; color: #6b7280; }

.eqd-badge--active-true { background: #dcfce7; color: #16a34a; }
.eqd-badge--active-false { background: #fecaca; color: #dc2626; }

/* Two-column info-card grid + shared row-header layout above the h3/action
   button pairs inside each card. */
.eqd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.eqd-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.eqd-row-header-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Allowed-processes tag row + autocomplete input wrapper. */
.eqd-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.eqd-autocomplete-wrap {
  position: relative;
  max-width: 280px;
}

/* Vessel-info "Materials" sub-section. */
.eqd-materials-section {
  margin-top: 12px;
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
}
.eqd-materials-label {
  font-size: 13px;
  color: var(--gray-500);
}
.eqd-materials-actions {
  display: flex;
  gap: 6px;
}

/* Actions card button row + inline color modifiers on the retire/reactivate
   buttons. */
.eqd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eqd-btn-success-text { color: #16a34a; }
.eqd-btn-danger-text { color: #dc2626; }

/* Event-history scroll container + row cell styling. */
.eqd-events-scroll {
  max-height: 400px;
  overflow-y: auto;
}
.eqd-event-type { font-weight: 500; font-size: 13px; }
.eqd-event-ts { font-size: 12px; color: var(--gray-500); }
.eqd-event-details { font-size: 12px; color: var(--gray-600); }
.eqd-event-empty { color: var(--gray-400); }

/* Tag-editor empty state + pill/remove-glyph styling (process + material
   tag sections both reuse setupTagSection()). */
.eqd-tags-empty { color: var(--gray-400); font-size: 13px; }
.eqd-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
}
.eqd-tag-remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
  color: #3b82f6;
}

/* Dialog overlay + box. Overlay's visible state is display:flex (not the
   browser default), so is-hidden must explicitly win over it. */
.eqd-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eqd-dialog-overlay.is-hidden { display: none; }
.eqd-dialog-box {
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Shared dialog chrome: title spacing, field label, footer button row. */
.eqd-dlg-title { margin-bottom: 16px; }
.eqd-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.eqd-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.eqd-dlg-error {
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 8px;
}
.eqd-dlg-error.is-hidden { display: none; }

/* Edit-Details dialog: capacity value + unit row, and the two 2-col grids
   for fill-percent / severity fields. */
.eqd-capacity-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: flex-end;
}
.eqd-capacity-input { flex: 1; }
.eqd-capacity-unit-select {
  width: 200px;
  margin-top: auto;
}
.eqd-fill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

/* bottling-process-detail.js */

.bpd-run-code {
  font-family: monospace;
  font-size: 15px;
  font-weight: 600;
}

.bpd-status-wrap {
  margin-top: 8px;
}

/* WORK-429 — run-code edit affordance (bottling + batch distillation). */
.bpd-run-code-row, .bdd-run-code-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.bdd-run-code {
  font-family: monospace;
  font-size: 15px;
  font-weight: 600;
}
.bpd-run-code-form, .bdd-run-code-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bpd-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.bpd-card-title {
  margin-bottom: 12px;
}

.bpd-link {
  color: #2563eb;
}

.bpd-flex-wrap-gap8 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bpd-equip-chip {
  padding: 4px 10px;
  background: var(--wa-color-neutral-50);
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 6px;
  font-size: 13px;
}

.bpd-empty-note {
  color: var(--gray-400);
  font-size: 13px;
}

/* WORK-1083: inline validation message under a dialog date control. */
.bpd-field-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--wa-color-danger-40, #b91c1c);
}
.bpd-field-error.is-hidden {
  display: none;
}

/* `.card` has no base CSS rule anywhere in the stylesheet set, so a bare
   margin-top class is safe to combine with class="card". */
.bpd-card-mt24 {
  margin-top: 24px;
}

.bpd-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bpd-gauge-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: var(--gray-500);
}

.bpd-flex-center-gap12 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bpd-empty-gauges {
  color: var(--gray-400);
  font-size: 13px;
  padding: 12px;
  background: var(--wa-color-neutral-50);
  border-radius: 6px;
  text-align: center;
}

/* Per-dialog width, formerly `style="--width:...px"` on <wa-dialog>. */
.bpd-dialog--gauge {
  --width: 480px;
}

.bpd-dialog--complete {
  --width: 520px;
}

.bpd-dialog--cancel {
  --width: 400px;
}

.bpd-dialog--start {
  --width: 440px;
}

.bpd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bpd-cell-strong {
  font-weight: 500;
}

.bpd-cell-truncate {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bpd-error-text {
  color: red;
}

.bpd-gauge-progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.bpd-gauge-progress--met {
  background: #d1fae5;
  color: #065f46;
}

.bpd-gauge-progress--pending {
  background: #fef3c7;
  color: #b45309;
}

.bpd-tol-indicator {
  font-size: 11px;
}

.bpd-tol-indicator--ok {
  color: #065f46;
}

.bpd-tol-indicator--out {
  color: #dc2626;
  font-weight: 600;
}

/* .list-table td does not set text-align, so a bare class is safe there.
   .list-table th DOES set text-align:left at (class, element) specificity
   (0,1,1), which beats a bare class on the same element — the compound
   override below is required for the <th> usages (see the documented
   .so-col-right precedent in main.css from an earlier batch). */
.bpd-col-right {
  text-align: right;
}

.list-table th.bpd-col-right {
  text-align: right;
}

.bpd-freshness-warn {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
}

.bpd-dialog-grid-14 {
  display: grid;
  gap: 14px;
}

.bpd-gauge-help {
  font-size: 13px;
  color: var(--gray-500);
}

.bpd-target-proof-note {
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
}

/* is-hidden toggle convention: no global .is-hidden rule exists, so each
   consumer gets its own scoped compound rule. */
.bpd-custom-pos.is-hidden {
  display: none;
}

.bpd-gauge-full-grid {
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.bpd-complete-grid {
  display: grid;
  gap: 16px;
}

.bpd-gauge-compliance-note {
  padding: 10px 14px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 6px;
  font-size: 13px;
  color: #065f46;
}

.bpd-grid-2col-12 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bpd-bottles-derived {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: -8px;
}

.bpd-field-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 2px;
}

.bpd-classification-value {
  font-weight: 600;
}

.bpd-classification-empty {
  color: var(--gray-400);
  font-weight: 400;
}

.bpd-residual-wrap.is-hidden {
  display: none;
}

.bpd-residual-help {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.bpd-residual-derived {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 6px;
}

.bpd-loss-preview {
  font-size: 13px;
  border-radius: 6px;
  padding: 8px 12px;
}

.bpd-loss-preview.is-hidden {
  display: none;
}

.bpd-loss-preview--loss {
  background: #fef2f2;
  color: #b91c1c;
}

.bpd-loss-preview--gain {
  background: #f0fdf4;
  color: #15803d;
}

.bpd-coding-section {
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 12px;
  display: grid;
  gap: 12px;
}

.bpd-coding-title {
  font-weight: 600;
  font-size: 13px;
}

.bpd-batch-custom.is-hidden {
  display: none;
}

.bpd-serial-start.is-hidden {
  display: none;
}

.bpd-loss-warn {
  color: #9a3412;
}

.bpd-dialog-grid-12 {
  display: grid;
  gap: 12px;
}

.bpd-start-help {
  font-size: 12px;
  color: var(--gray-500);
}

/* Small fixed enum (5 statuses) → base + modifier map. */
.bpd-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.bpd-status-badge--planned {
  background: #f3f4f6;
  color: #374151;
}

.bpd-status-badge--in_progress {
  background: #dbeafe;
  color: #1e40af;
}

.bpd-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}

.bpd-status-badge--cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.bpd-status-badge--reversed {
  background: #fce7f3;
  color: #9d174d;
}

.bpd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.bpd-info-label {
  font-size: 13px;
  color: var(--gray-500);
}

/* tenant-profile.js */

.tnp-save-status {
  margin-left: 8px;
  color: var(--gray-600);
  font-size: 13px;
}
.tnp-save-status.tnp-status-error {
  color: var(--red-600, #b91c1c);
}

.tnp-deactivated-banner {
  background: var(--red-50, #fef2f2);
  border: 1px solid var(--red-200, #fecaca);
  color: var(--red-800, #991b1b);
  padding: 12px 16px;
  margin: 16px 24px;
  border-radius: 6px;
}

.tnp-header {
  padding: 24px;
  border-bottom: 1px solid var(--gray-200);
}

.tnp-dba-label {
  color: var(--gray-500);
  font-weight: 400;
}

.tnp-industry-line {
  color: var(--gray-600);
  margin-top: 4px;
}

.tnp-body {
  padding: 0 24px 24px;
  max-width: 960px;
}

.tnp-card {
  padding: 20px;
  margin-top: 16px;
}

.tnp-h3 {
  margin: 0 0 12px;
}

.tnp-h3-tight {
  margin: 0 0 4px;
}

.tnp-identity-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
}

.tnp-logo-area {
  width: 160px;
  height: 160px;
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--gray-50);
}

.tnp-logo-img {
  max-width: 100%;
  max-height: 100%;
}

.tnp-logo-placeholder {
  color: var(--gray-500);
  font-size: 13px;
  text-align: center;
}

.tnp-hidden-input {
  display: none;
}

.tnp-mt-8 {
  margin-top: 8px;
}

.tnp-mt-12 {
  margin-top: 12px;
}

.tnp-mt-16 {
  margin-top: 16px;
}

.tnp-identity-fields {
  display: grid;
  gap: 12px;
}

.tnp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tnp-grid-2-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.tnp-card-desc {
  color: var(--gray-600);
  font-size: 13px;
  margin: 0 0 12px;
}

/* Base padding is static; visibility toggled via JS with the is-hidden
   modifier (no global .is-hidden rule exists, so this is scoped here). */
.tnp-bond-fields {
  margin-top: 16px;
}
.tnp-bond-fields.is-hidden {
  display: none;
}

.tnp-help-text {
  color: var(--gray-600);
  font-size: 12px;
  margin: 4px 0 0;
}

.tnp-help-text-muted {
  color: var(--gray-500);
  font-size: 12px;
  margin: 4px 0 0;
}

.tnp-label-block {
  font-size: 13px;
  color: var(--gray-700);
  display: block;
  margin-bottom: 4px;
}

.tnp-grid-span-all {
  grid-column: 1 / -1;
}

.tnp-gravity-select-wrap {
  max-width: 420px;
}

.tnp-copy-all-row {
  margin: 0 0 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.tnp-same-row {
  margin-bottom: 8px;
}

.tnp-addr-card {
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.tnp-addr-card-title {
  margin: 0 0 8px;
  font-size: 14px;
}

/* No base style — purely a visibility-toggle hook (collapsed when the
   "Same as physical" checkbox is checked). */
.tnp-addr-body.is-hidden {
  display: none;
}

.tnp-addr-fields {
  display: grid;
  gap: 8px;
}

.tnp-addr-city-row {
  display: grid;
  grid-template-columns: 2fr 180px 120px;
  gap: 8px;
}

.tnp-addr-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tnp-pi-h4 {
  margin: 8px 0;
  font-size: 14px;
}

.tnp-pi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tnp-pi-h4-spaced {
  margin: 16px 0 8px;
  font-size: 14px;
}

/* spirit-calculators.js */

.spc-unit-toggle {
  display: inline-flex;
  gap: 2px;
}

/* .detail-view (detail-view.css, loaded after main.css) already sets
   max-width: var(--app-content-max) at (0,1,0) — a bare .spc-view class
   here would lose to that later-loaded rule for the max-width property,
   so this is compounded with .detail-view to win at (0,2,0). */
.detail-view.spc-view {
  max-width: 1200px;
  padding-bottom: 48px;
}

.spc-subtitle {
  margin-top: 6px;
  color: var(--wa-color-neutral-50);
  font-size: 14px;
}

.spc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* .detail-card (detail-view.css) does not set grid-column, so this is
   safe as a bare class. */
.spc-card-span-2 {
  grid-column: 1 / -1;
}

.spc-card-title {
  margin: 0 0 4px;
}

.spc-card-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--wa-color-neutral-50);
}

.spc-field-stack {
  display: grid;
  gap: 12px;
}

.spc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.spc-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spc-field-label {
  font-size: 13px;
  font-weight: 500;
}

.spc-field-label-block {
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.spc-section-label {
  font-size: 13px;
  font-weight: 600;
}

.spc-inline-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.spc-hint-text {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.spc-full-width {
  width: 100%;
}

/* Results panels start hidden; toggled via classList.remove('is-hidden')
   in JS rather than a direct .style.display write, per the is-hidden
   convention. */
.spc-results-panel {
  background: var(--wa-color-neutral-95, #f3f4f6);
  border-radius: 8px;
  padding: 12px 16px;
}

.spc-results-panel.is-hidden {
  display: none;
}

.spc-spirit-row {
  display: grid;
  grid-template-columns: 1fr 1fr 40px;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.spc-row-spacer {
  height: 36px;
}

.spc-btn-start {
  justify-self: start;
}

.spc-btn-remove {
  height: 36px;
  min-width: 36px;
  padding: 0;
}

.spc-target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--wa-color-neutral-80);
}

.spc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--wa-color-neutral-90);
}

.spc-result-divider {
  height: 4px;
}

.spc-result-label {
  color: var(--wa-color-neutral-40);
  font-size: 14px;
}

.spc-result-value {
  font-weight: 600;
  font-size: 16px;
}

.spc-result-value-strong {
  font-weight: 700;
  font-size: 18px;
  color: var(--wa-color-brand-40);
}

.spc-result-unit {
  font-weight: 400;
  font-size: 13px;
  color: var(--wa-color-neutral-50);
}

.spc-error-text {
  color: var(--wa-color-danger-40);
  font-size: 14px;
}

.spc-error-icon {
  margin-right: 6px;
}

/* Batch 31 */
/* mash-recipe-detail.js */

/* Header row: .detail-header (detail-view.css) sets display/align-items:
   center/justify-content already; this view needs align-items:flex-start
   plus padding, so a bare class can't win (later-loaded file, equal
   specificity) -- compound with the base class. */
.detail-header.mrd-header {
  align-items: flex-start;
  padding: 24px;
}

.mrd-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.mrd-actions-row {
  display: flex;
  gap: 8px;
}

.mrd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 24px 24px;
}

.mrd-card-wrap {
  padding: 0 24px 24px;
}

/* class="card" carries no other CSS rule in this codebase; bare class is
   safe here (no compound needed). */
.mrd-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 20px;
}

.mrd-card-title {
  margin-bottom: 12px;
}

.mrd-error-text {
  color: red;
}

/* Reused across three empty-state <p> tags and the corrective-action
   dosage <span> -- all four were byte-identical single-declaration
   inline styles. */
.mrd-muted-text {
  color: var(--wa-color-neutral-50);
}

.mrd-table-flush {
  margin: 0;
}

.mrd-table-flush-mb {
  margin: 0 0 16px 0;
}

/* .list-table th sets text-align:left at (0,1,1) -- compound required to
   win regardless of source order. */
.list-table th.mrd-col-right {
  text-align: right;
}

.mrd-col-narrow {
  width: 24px;
}

.mrd-cell-strong {
  font-weight: 500;
}

/* .list-table td does not set text-align, so a bare class is safe here. */
.mrd-cell-right {
  text-align: right;
}

/* .list-table td sets font-size/color at (0,1,1) -- compound required to
   override both. */
.list-table td.mrd-cell-muted {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.mrd-total-row {
  font-weight: 600;
  border-top: 2px solid var(--wa-color-neutral-70);
}

.mrd-subsection-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.mrd-water-row {
  margin-bottom: 12px;
}

/* Concurrent-step marker cell. The original built this per-row from a
   `borderColor` const and a `borderStyles` array, but the only branch
   that ever renders the cell is meta.position === 'first' (the rowspan
   covers 'mid'/'last' rows), and a step can never be both 'first' and
   'last' in the same group -- so the computed style was always this one
   fixed set of declarations. Also folds in the trailing `padding:8px 4px`
   which already overrode the earlier `padding-left:8px` in the original
   inline-style string (same-property last-write-wins), so that dead
   declaration is dropped here. */
.mrd-concurrent-cell {
  border-left: 3px solid var(--wa-color-brand-50);
  border-top: 3px solid var(--wa-color-brand-50);
  border-top-left-radius: 4px;
  vertical-align: middle;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-brand-40);
  letter-spacing: 0.5px;
  padding: 8px 4px;
  white-space: nowrap;
}

/* .list-table td sets padding/border-bottom at (0,1,1) -- compound
   required to override both (this cell uses border:none). */
.list-table td.mrd-corrective-cell {
  padding: 4px 8px 8px 40px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: none;
}

.mrd-corrective-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-warning-30, #a16207);
  margin-bottom: 4px;
}

.mrd-corrective-item {
  font-size: 12px;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid var(--wa-color-warning-80, #fde68a);
}

.mrd-then-label {
  margin-left: 8px;
}

.mrd-corrective-notes {
  color: var(--wa-color-neutral-50);
  font-size: 11px;
  margin-top: 2px;
}

.mrd-info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--wa-color-neutral-80);
}

.mrd-info-label {
  font-size: 13px;
  color: var(--wa-color-neutral-50);
}

/* vendor-payments-list.js */
.vpl-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.vpl-status-badge--draft {
  background: #f3f4f6;
  color: #6b7280;
}
.vpl-status-badge--approved {
  background: #dbeafe;
  color: #2563eb;
}
.vpl-status-badge--sent {
  background: #fef9c3;
  color: #a16207;
}
.vpl-status-badge--completed {
  background: #dcfce7;
  color: #16a34a;
}
.vpl-status-badge--voided {
  background: #fecaca;
  color: #dc2626;
}
.vpl-header-actions {
  display: flex;
  gap: 8px;
}
.vpl-toolbar {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
}
.vpl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.vpl-search-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.vpl-divider {
  border-left: 1px solid var(--gray-300);
  height: 24px;
  margin: 0 4px;
}
.vpl-empty-state {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}
/* .list-table th doesn't set cursor, so this bare class is safe. */
.vpl-th-sortable {
  cursor: pointer;
}
/* .list-table th sets text-align:left at (0,1,1) — bare class can't
   override it, so the compound form is required. */
.list-table th.vpl-col-right {
  text-align: right;
}
/* .list-table td already sets font-size:13px at (0,1,1); dropped where it
   was the only declaration. font-weight isn't set by the base rule, so a
   bare class is safe here and reused for the non-table bill-row label. */
.vpl-strong {
  font-weight: 500;
}
.vpl-cell-amount {
  font-weight: 600;
  text-align: right;
}
/* .list-table td already sets color:var(--gray-700) at (0,1,1) — a bare
   class can't override it, so the compound form is required. */
.list-table td.vpl-cell-muted {
  color: var(--gray-500);
}
.vpl-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vpl-dialog-overlay.is-hidden {
  display: none;
}
.vpl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 460px;
  max-width: 600px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
}
.vpl-dlg-title {
  margin-bottom: 16px;
}
.vpl-dlg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.vpl-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.vpl-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.vpl-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.vpl-dlg-field {
  margin-bottom: 12px;
}
.vpl-dlg-help {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
.vpl-dlg-field-last {
  margin-bottom: 16px;
}
.vpl-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.vpl-dlg-status--muted {
  color: var(--gray-500);
}
.vpl-dlg-status--error {
  color: red;
}
.vpl-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.vpl-mt-16 {
  margin-top: 16px;
}
.vpl-text-muted {
  color: var(--gray-400);
}
.vpl-select-hint {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.vpl-bill-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 12px;
}
.vpl-bill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  font-size: 13px;
}
.vpl-bill-info {
  flex: 1;
}
.vpl-bill-id {
  font-size: 11px;
  color: var(--gray-400);
}
.vpl-fw-600 {
  font-weight: 600;
}
.vpl-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.vpl-label-muted {
  font-size: 13px;
  color: var(--gray-500);
}
.vpl-total-amount {
  font-size: 18px;
  font-weight: 700;
}

/* product-spec-detail.js */

.psd-active-tag {
  vertical-align: middle;
  margin-left: 8px;
}

.psd-flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.psd-flex-header--mb16 {
  margin-bottom: 16px;
}

/* .detail-card h2 sets font-size/color/text-transform/margin-bottom/
   padding-bottom/border-bottom at (0,1,1) in detail-view.css (loaded after
   main.css). Compounded so the flush margin wins regardless of load order. */
.detail-card h2.psd-h2-flush {
  margin: 0;
}

.psd-grid-4col-gap16 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.psd-warning-callout {
  margin-bottom: 12px;
}

.psd-empty-text {
  color: var(--wa-color-neutral-50);
}

.psd-dialog-w520 {
  --width: 520px;
}

.psd-dialog-w560 {
  --width: 560px;
}

.psd-dialog-w620 {
  --width: 620px;
}

.psd-dialog-w760 {
  --width: 760px;
}

.psd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.psd-grid-2col-gap12 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.psd-grid-2col-gap16 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.psd-span2 {
  grid-column: span 2;
}

/* Shared .auth-error.is-hidden toggle rule already exists in main.css;
   this just restores the case-label error banner's own margin-top. */
.auth-error.psd-cl-error {
  margin-top: 10px;
}

.psd-variant-card {
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.psd-variant-card--inactive {
  opacity: 0.5;
}

.psd-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.psd-bottle-size-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--wa-color-brand-40);
}

.psd-btn-row {
  display: flex;
  gap: 4px;
}

.psd-grid-3col-gap12 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.psd-col-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-neutral-50);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.psd-fs13 {
  font-size: 13px;
}

.psd-empty-small {
  font-size: 13px;
  color: var(--wa-color-neutral-60);
}

.psd-cases-per-pallet {
  font-size: 13px;
  font-weight: 700;
  color: var(--wa-color-brand-40);
}

.psd-cola-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--wa-color-neutral-90);
  font-size: 13px;
}

.psd-label-muted {
  color: var(--wa-color-neutral-50);
}

.psd-barcode-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--wa-color-neutral-90);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.psd-barcode-label {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}

.psd-barcode-img {
  height: 42px;
  max-width: 180px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--wa-color-neutral-80);
}

.psd-group-label {
  padding: 4px 12px;
  color: var(--wa-color-neutral-50);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
}

.psd-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.psd-divider-mv16 {
  margin: 16px 0;
}

.psd-section-label {
  font-weight: 600;
  margin-bottom: 8px;
}

.psd-upload-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--wa-color-neutral-40);
}

.psd-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.psd-hidden-input {
  display: none;
}

.psd-upload-filename {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.psd-pkg-hint {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
  margin-bottom: 10px;
}

.psd-mt12 {
  margin-top: 12px;
}

.psd-pkg-row {
  padding: 10px;
  background: var(--wa-color-neutral-50);
  border-radius: 6px;
  margin-bottom: 8px;
}

/* WORK-1068: a component's quantity basis in the variant summary. */
.psd-pkg-qty {
  color: var(--wa-color-neutral-40);
}
.psd-pkg-row-grid {
  display: grid;
  grid-template-columns: 1fr 90px 120px 36px;
  gap: 8px;
  align-items: end;
}

.psd-relative {
  position: relative;
}

@media (max-width: 600px) {
  .psd-pkg-row-grid {
    grid-template-columns: 1fr 1fr 36px;
  }
  .psd-pkg-row-grid > .psd-relative {
    grid-column: 1 / -1;
  }
}
.psd-pkg-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wa-color-neutral-40);
  margin-bottom: 4px;
}

.psd-pkg-ac-input {
  width: 100%;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--wa-color-neutral-70);
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}

.psd-pkg-remove-btn {
  color: var(--wa-color-danger-40);
  height: 30px;
}

.psd-pkg-row-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.psd-pkg-link-status {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.psd-pkg-link-status--linked {
  color: var(--wa-color-success-40);
}

.psd-pkg-link-status--unlinked {
  color: var(--wa-color-warning-40);
}

.psd-dash {
  color: var(--wa-color-neutral-60);
}

.psd-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-neutral-50);
  text-transform: uppercase;
}

.psd-field-value {
  font-size: 14px;
}

/* onboarding-reconciliation.js */

.obr-hint-muted {
  color: var(--gray-400);
  font-size: 13px;
}

.obr-heading-tight {
  margin-bottom: 8px;
}

.obr-muted {
  color: var(--gray-400);
}

.obr-mt-10 {
  margin-top: 10px;
}

.obr-mt-12 {
  margin-top: 12px;
}

.obr-mt-16 {
  margin-top: 16px;
}

.obr-mt-20 {
  margin-top: 20px;
}

.obr-precondition {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 13px;
}

/* Generic 4px/8px table cell padding. Reused both inside a .list-table
   (recon table, provenance drawer's own bare table doesn't need the
   compound but sharing the class name is harmless) and inside the
   provenance drawer's plain (non-list-table) table. The compound form is
   required wherever a .list-table ancestor is present, since
   .list-table td already sets padding at (0,1,1). */
.obr-cell {
  padding: 4px 8px;
}
.list-table td.obr-cell {
  padding: 4px 8px;
}

.obr-cell-mono-r {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
}
.list-table td.obr-cell-mono-r {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
}

.obr-delta--nonzero {
  font-weight: 600;
}

/* .list-table td sets color:var(--gray-700) at (0,1,1); the compound
   form is needed to win the color override when this cell sits inside
   the recon table (which carries .list-table). */
.obr-delta--zero {
  color: var(--gray-400);
}
.list-table td.obr-delta--zero {
  color: var(--gray-400);
}

.obr-warn-banner {
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 6px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #a16207;
  font-size: 12px;
}

.obr-row-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Shared by the baseline/report-period line and the "approve before
   sign-off" go-live hint — byte-identical font-size:13px;color:gray-500. */
.obr-baseline-text {
  font-size: 13px;
  color: var(--gray-500);
}

/* .list-table th sets text-align/padding (among other things) at
   (0,1,1); the compound form wins that override inside a .list-table.
   The bare form covers the provenance drawer's own plain (non-list-table)
   table. */
.obr-th-l {
  text-align: left;
  padding: 4px 8px;
}
.list-table th.obr-th-l {
  text-align: left;
  padding: 4px 8px;
}
.obr-th-r {
  text-align: right;
  padding: 4px 8px;
}
.list-table th.obr-th-r {
  text-align: right;
  padding: 4px 8px;
}

.obr-loading-text {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 12px;
}

.obr-error-text-mt {
  color: var(--red-500);
  font-size: 13px;
  margin-top: 12px;
}

.obr-error-text {
  color: var(--red-500);
  font-size: 13px;
}

/* No-contributing-lots notice inside the provenance drawer — distinct
   from .obr-precondition (no color) and .obr-prov-panel (different
   padding, no font-size). */
.obr-notice-empty {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  font-size: 13px;
}

.obr-link {
  color: var(--primary-600);
  text-decoration: none;
}

.obr-cell-date {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--gray-500);
}

.obr-prov-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.obr-prov-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.obr-strong-13 {
  font-size: 13px;
}

.obr-plain-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.obr-latest-tag {
  font-size: 11px;
  color: var(--gray-400);
}

/* Records table (6px/8px padding) — always nested inside .list-table,
   so only the compound form is written. */
.list-table td.obr-cell6 {
  padding: 6px 8px;
}
.list-table td.obr-cell6-r {
  padding: 6px 8px;
  text-align: right;
}
.list-table td.obr-empty-cell {
  padding: 8px;
  color: var(--gray-400);
}
.list-table th.obr-th-l6 {
  text-align: left;
  padding: 6px 8px;
}
.list-table th.obr-th-r6 {
  text-align: right;
  padding: 6px 8px;
}

.obr-form-section {
  margin-top: 16px;
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
}

/* .card-radio-group (detail-view.css) sets display:flex;gap:12px at bare
   (0,1,0), loaded after main.css — a bare override class here would lose
   the specificity/order fight, so this must stay compound. display:flex
   is unchanged from the base rule and intentionally omitted. */
.card-radio-group.obr-radio-group {
  flex-direction: column;
  gap: 8px;
}

/* .card-radio (detail-view.css) sets padding:12px 16px (plus border/
   cursor/etc, all left alone) at bare (0,1,0) — same reasoning as above. */
.card-radio.obr-radio-card {
  padding: 10px 12px;
}

.obr-radio-title {
  font-weight: 500;
  font-size: 14px;
}

.obr-radio-blurb {
  font-size: 12px;
  color: var(--gray-500);
}

.obr-field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
}

.obr-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-family: inherit;
}

/* Shared by #res-error and #golive-error — byte-identical inline styles.
   No existing shared-class.is-hidden rule covers either (both are
   page-specific divs with no other classes), so this is scoped here per
   the is-hidden convention. */
.obr-error-msg {
  color: var(--red-500);
  font-size: 13px;
  margin-top: 8px;
}
.obr-error-msg.is-hidden {
  display: none;
}

.obr-golive-hint {
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
  font-size: 13px;
  color: var(--gray-400);
}

.obr-golive-section {
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
}

.obr-ack-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.obr-ack-checkbox {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary-600);
}

.obr-ack-text {
  font-size: 13px;
  color: var(--gray-600);
}

/* shipments-list.js */

.shl-icon-gap {
  margin-right: 4px;
}

.shl-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  align-items: end;
}

.shl-filter-label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 2px;
}

.shl-filter-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}

.shl-filter-input--wide {
  width: 160px;
}

.shl-card-spaced {
  margin-top: 16px;
}

.shl-empty-text {
  color: var(--gray-400);
}

/* .list-table td already sets font-size:13px at (class,element) specificity
   higher than a bare class (see the batch 12/14 .list-table th/td trap), so
   this needs a compound selector to win. */
.list-table td.shl-cell-small {
  font-size: 12px;
}

/* .list-table td does not set font-weight, so a bare class is safe. */
.shl-cell-strong {
  font-weight: 500;
}

/* Note: the row's own inline style="cursor:pointer" was dropped entirely
   (no class added) because .list-table tbody tr (list-view.css) already
   sets cursor:pointer at higher specificity — the inline style was
   redundant. */

.shl-dialog-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.shl-dialog-overlay.is-hidden {
  display: none;
}

.shl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 500px;
  max-width: 620px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
}

.shl-mb-16 {
  margin-bottom: 16px;
}

.shl-section-h4 {
  margin: 16px 0 8px;
  font-size: 14px;
  color: var(--gray-600);
}

.shl-field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.shl-field-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.shl-field-grid-addr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.shl-field-group {
  margin-bottom: 12px;
}

.shl-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.shl-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}

.shl-field-textarea {
  resize: vertical;
}

.shl-dlg-status {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.shl-dlg-status--error {
  color: red;
}

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

/* Status badge enum — base + per-status modifier, mirrors the
   status-badge convention used elsewhere in the program. */
.shl-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.shl-badge--draft {
  background: #f3f4f6;
  color: #6b7280;
}

.shl-badge--confirmed {
  background: #dbeafe;
  color: #2563eb;
}

.shl-badge--picking_packing {
  background: #fef3c7;
  color: #92400e;
}

.shl-badge--shipped {
  background: #d1fae5;
  color: #065f46;
}

.shl-badge--in_transit {
  background: #cffafe;
  color: #0e7490;
}

.shl-badge--delivered {
  background: #a7f3d0;
  color: #047857;
}

.shl-badge--returned {
  background: #fef3c7;
  color: #92400e;
}

.shl-badge--cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.shl-tracking-link {
  color: #2563eb;
  text-decoration: underline;
}

/* ttb-storage-report.js */

/* Error / warning banners (renderWarnings) */
.tsr-banner-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.tsr-banner-error-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #dc2626; font-weight: 600; }
.tsr-banner-warn { background: #fefce8; border: 1px solid #fde047; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.tsr-banner-warn-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #a16207; font-weight: 600; }
.tsr-icon-lg { font-size: 18px; }
.tsr-list-error { margin: 0; padding-left: 20px; color: #991b1b; }
.tsr-list-warn { margin: 0; padding-left: 20px; color: #854d0e; }
.tsr-code-muted { color: #9ca3af; font-size: 12px; }

/* .card has no base CSS rule anywhere in the stylesheet set, so this bare
   modifier class is safe with no compound needed. */
.tsr-card-mb { margin-bottom: 24px; }
.tsr-h3-mb { margin-bottom: 12px; }

/* Report header card (renderHeaderCard) */
.tsr-header-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 24px; font-size: 14px; }
.tsr-field-label { color: #6b7280; font-size: 12px; }

/* Transaction table cells (renderCell / renderRow) */
.tsr-num-cell { text-align: right; padding: 4px 8px; font-family: monospace; font-size: 13px; }
.tsr-num-cell-btn { text-align: right; padding: 0; font-family: monospace; font-size: 13px; }
.tsr-cell-button { all: unset; display: block; width: 100%; padding: 4px 8px; text-align: right; cursor: pointer; color: #0369a1; text-decoration: underline dotted; }

.tsr-row { border-bottom: 1px solid #f1f5f9; }
.tsr-row--total { background: #f0f9ff; font-weight: 700; }
.tsr-row--blank { color: #9ca3af; }
.tsr-cell-nowrap { white-space: nowrap; padding: 4px 8px; }

/* Transactions table shell (renderTransactions) */
.tsr-table-scroll { overflow-x: auto; }
.tsr-report-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1200px; }
.tsr-thead-row { background: #f1f5f9; border-bottom: 2px solid #e2e8f0; }
.tsr-th-left { text-align: left; padding: 6px 8px; white-space: nowrap; }
.tsr-th-right { text-align: right; padding: 6px 8px; white-space: nowrap; }

/* Drilldown source rows (renderSourceRow) */
.tsr-td-pad { padding: 6px 8px; }
.tsr-link-plain { color: #0369a1; text-decoration: none; }
.tsr-num-pad { text-align: right; padding: 6px 8px; font-family: monospace; }
.tsr-td-muted { padding: 6px 8px; color: #6b7280; font-size: 12px; }

/* Grouped sources list (renderSourcesList) */
.tsr-empty-note { color: #6b7280; font-style: italic; padding: 8px 0; }
.tsr-source-group { margin-bottom: 8px; }
.tsr-group-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; }
.tsr-group-key { font-weight: 600; }
.tsr-group-meta { color: #6b7280; font-size: 12px; white-space: nowrap; }
.tsr-group-subtotal { font-family: monospace; color: #111827; }
.tsr-source-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tsr-source-thead-row { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

/* Filter row + drawer chrome (main render) */
.tsr-filter-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tsr-field-label-block { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.tsr-select-month { width: 160px; }
.tsr-select-year { width: 120px; }
.tsr-drawer-size { --size: 42rem; }
.tsr-drawer-body-pad { padding: 0 4px; }
.tsr-muted { color: #6b7280; }
.tsr-drawer-summary { margin-bottom: 12px; font-size: 13px; color: #374151; }
.tsr-help-note { color: #6b7280; font-size: 12px; margin: 0 0 12px; }

/* Inline error boxes (drawer load error + report load error) */
.tsr-inline-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; color: #dc2626; }
.tsr-inline-error--sm { padding: 12px; }
.tsr-inline-error--lg { padding: 16px; }

/* fermentation-recipe-detail.js */

/* h3 section headings reuse the existing shared .u-mb-12 utility
   (main.css) — no new rule needed for those; not repeated here. */

.frd-recipe-id {
  font-family: monospace;
  font-size: 13px;
  color: var(--gray-500);
}

.frd-tag-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.frd-header-actions {
  display: flex;
  gap: 8px;
}

.frd-description {
  margin-top: 12px;
  color: var(--gray-600);
  font-size: 14px;
}

.frd-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.frd-inventory-link {
  color: #2563eb;
  text-decoration: none;
  font-family: monospace;
  font-size: 12px;
}

/* .card has no base CSS rule anywhere in the stylesheet set, so this
   bare margin-top modifier is safe without a compound selector. */
.frd-mt-24 {
  margin-top: 24px;
}

.frd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Event-history + SOP-steps tables both use .list-table. .list-table td
   already sets font-size:13px/color/padding/border-bottom at (0,1,1);
   font-weight is untouched by that rule, so a bare class is safe here. */
.frd-cell-strong {
  font-weight: 500;
}

/* Overrides .list-table td's font-size:13px (0,1,1) — needs a compound
   selector to win regardless of load order (list-view.css loads after
   main.css). */
.list-table td.frd-cell-truncate {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frd-error-text {
  color: red;
}

.frd-empty-text {
  color: var(--gray-400);
  font-size: 13px;
}

.frd-table-scroll {
  overflow-x: auto;
}

/* .list-table itself only sets width/border-collapse/table-layout, no
   margin — bare class is safe. */
.frd-table-flush {
  margin: 0;
}

/* Overrides .list-table th's text-align:left (0,1,1) — compound needed. */
.list-table th.frd-col-num {
  text-align: center;
  width: 40px;
}

.list-table th.frd-col-right {
  text-align: right;
}

/* td text-align is untouched by .list-table td's own rule, so bare
   classes are safe for these. */
.frd-cell-right {
  text-align: right;
}

.frd-cell-step-num {
  text-align: center;
  font-weight: 600;
}

.frd-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
}

/* Overrides .list-table td's padding (7px 10px) and border-bottom
   (0,1,1) — compound needed. */
.list-table td.frd-corrective-cell {
  padding: 4px 8px 8px 40px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: none;
}

.frd-corrective-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-warning-30, #a16207);
  margin-bottom: 4px;
}

.frd-corrective-item {
  font-size: 12px;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid var(--wa-color-warning-80, #fde68a);
}

.frd-then-label {
  margin-left: 8px;
}

.frd-dosage-note {
  color: var(--gray-500);
}

.frd-corrective-notes {
  color: var(--gray-500);
  font-size: 11px;
  margin-top: 2px;
}

/* CCP/QC row tint. .list-table tbody tr sets no background, so the bare
   rule is safe against the base rule; but .list-table tbody tr:hover
   (list-view.css, specificity 0,2,2) loads AFTER main.css, so an
   equal-specificity `.list-table tbody tr.frd-row--ccp` (also 0,2,2)
   would lose to :hover on mouseover and the tint would disappear —
   unlike the original inline style, which always won regardless of
   hover. Add explicit :hover pairs (0,3,2) to preserve that behavior. */
.list-table tbody tr.frd-row--ccp {
  background: #fef3c7;
}
.list-table tbody tr.frd-row--ccp:hover {
  background: #fef3c7;
}
.list-table tbody tr.frd-row--qc {
  background: #eff6ff;
}
.list-table tbody tr.frd-row--qc:hover {
  background: #eff6ff;
}

.frd-cell-additions {
  font-size: 12px;
}

.frd-ccp-label {
  color: #92400e;
  font-weight: 600;
}

.frd-qc-label {
  color: #1e40af;
  font-weight: 600;
}

.frd-temp-simple-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.frd-temp-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--wa-color-brand-30, #1d4ed8);
}

.frd-temp-tolerance {
  font-size: 14px;
  color: var(--gray-500);
}

.frd-temp-hint {
  color: var(--gray-500);
  font-size: 12px;
  margin-top: 6px;
}

.frd-stages-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.frd-stage-arrow {
  align-self: center;
  color: var(--gray-400);
  font-size: 18px;
}

.frd-stage-box {
  flex: 1;
  min-width: 140px;
  padding: 10px 12px;
  background: var(--wa-color-neutral-50, #f9fafb);
  border: 1px solid var(--wa-color-neutral-80, #e5e7eb);
  border-radius: 6px;
}

.frd-stage-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Distinct from .frd-temp-value: different font-size (18px vs 24px). */
.frd-stage-value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--wa-color-brand-30, #1d4ed8);
}

.frd-stage-tol {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 400;
}

.frd-stage-duration {
  margin-top: 2px;
  font-size: 12px;
  color: var(--gray-600);
}

/* infoRow() div is always a child of `.detail-grid` (never carries that
   class itself), so no compound override is needed here. */
.frd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.frd-info-label {
  font-size: 13px;
  color: var(--gray-500);
}

/* bank-account-detail.js */

.bad-not-connected {
  color: var(--gray-400);
}

/* Provider badge — small fixed enum (manual/csv/plaid/akoya/mx), unknown
   names fall back to the 'manual' modifier (matches prior JS fallback). */
.bad-provider-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.bad-provider-badge--manual {
  background: #f3f4f6;
  color: #6b7280;
}
.bad-provider-badge--csv {
  background: #e0f2fe;
  color: #0369a1;
}
.bad-provider-badge--plaid {
  background: #dcfce7;
  color: #16a34a;
}
.bad-provider-badge--akoya {
  background: #ede9fe;
  color: #7c3aed;
}
.bad-provider-badge--mx {
  background: #fef3c7;
  color: #d97706;
}

/* Positive/negative amount coloring. */
.bad-amount {
  font-family: monospace;
  font-weight: 600;
}
.bad-amount--pos {
  color: #16a34a;
}
.bad-amount--neg {
  color: #dc2626;
}

/* Bank-transaction status badge — fixed enum, unmapped statuses fall back
   to the 'excluded' modifier (matches prior JS fallback colors). */
.bad-txn-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.bad-txn-badge--unmatched {
  background: #fef9c3;
  color: #a16207;
}
.bad-txn-badge--matched {
  background: #dcfce7;
  color: #16a34a;
}
.bad-txn-badge--reconciled {
  background: #dbeafe;
  color: #2563eb;
}
.bad-txn-badge--excluded {
  background: #f3f4f6;
  color: #6b7280;
}

/* Bank-account status badge (active/inactive/closed), default fallback for
   any other status value. */
.bad-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
}
.bad-status-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.bad-status-badge--inactive {
  background: #fef9c3;
  color: #a16207;
}
.bad-status-badge--closed {
  background: #fecaca;
  color: #dc2626;
}
.bad-status-badge--default {
  background: #f3f4f6;
  color: #6b7280;
}

.bad-muted-13 {
  font-size: 13px;
  color: var(--gray-500);
}

.bad-muted-12 {
  font-size: 12px;
  color: var(--gray-500);
}

.bad-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

/* .card has no base CSS rule anywhere (confirmed via grep), so a bare
   class on a .card child h3 is safe. */
.bad-card-title {
  margin-bottom: 12px;
}

.bad-mono {
  font-family: monospace;
}

.bad-balance-block {
  text-align: center;
  padding: 16px 0;
}

.bad-balance-amount {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.bad-balance-block-bordered {
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid var(--gray-100);
}

.bad-balance-amount-sm {
  font-size: 20px;
  font-weight: 600;
}

.bad-balance-footer {
  border-top: 1px solid var(--gray-100);
  padding-top: 12px;
  margin-top: 8px;
}

.bad-metadata-value {
  font-family: monospace;
  font-size: 11px;
}

.bad-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* .btn-secondary sets color at (0,1,0) specificity, same as a bare
   modifier class — compound to guarantee the override wins regardless of
   source order in the assembled main.css (established convention, see
   existing .btn-secondary.szd-btn-deactivate / .szd-btn-reactivate). */
.btn-secondary.bad-btn-danger {
  color: #dc2626;
}
.btn-secondary.bad-btn-warning {
  color: #a16207;
}
.btn-secondary.bad-btn-success {
  color: #16a34a;
}

/* .card has no base CSS rule anywhere, so a bare margin-top class is
   safe here too. */
.bad-mt-24 {
  margin-top: 24px;
}

.bad-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bad-title-flush {
  margin: 0;
}

.bad-empty-state {
  color: var(--gray-400);
  text-align: center;
  padding: 16px;
}

/* .list-table th sets text-align:left at (0,1,1) specificity
   (list-view.css) — a bare class cannot win, so the th usage needs the
   compound form. .list-table td does not set text-align, so the bare
   class is safe there. */
.bad-text-right {
  text-align: right;
}
.list-table th.bad-text-right {
  text-align: right;
}

/* .list-table td sets font-size:13px at (0,1,1) specificity
   (list-view.css) — a bare class cannot win, so this must compound with
   .list-table td. */
.list-table td.bad-text-xs {
  font-size: 12px;
}

/* Modal overlay: JS toggles visibility via classList (.is-hidden), not
   .style.display. Default (shown) state is display:flex; is-hidden
   overrides to none. Markup starts with is-hidden applied. */
.bad-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
  display: flex;
}
.bad-dialog-overlay.is-hidden {
  display: none;
}

.bad-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 420px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.bad-error-text {
  color: red;
}

.bad-dialog-title {
  margin-bottom: 16px;
}

.bad-mb-12 {
  margin-bottom: 12px;
}

.bad-mb-16 {
  margin-bottom: 16px;
}

.bad-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.bad-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}

.bad-resize-v {
  resize: vertical;
}

.bad-balance-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

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

.bad-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* Batch 32 */
/* subscription-detail.js */
.sud-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.sud-badge--trial {
  background: #dbeafe;
  color: #1e40af;
}
.sud-badge--active {
  background: #dcfce7;
  color: #16a34a;
}
.sud-badge--past_due {
  background: #fef3c7;
  color: #92400e;
}
.sud-badge--cancelled {
  background: #f3f4f6;
  color: #6b7280;
}
.sud-badge--expired {
  background: #fecaca;
  color: #dc2626;
}
.sud-badge--default {
  background: #f3f4f6;
  color: #6b7280;
}
.sud-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.sud-info-label {
  color: var(--gray-500);
  font-size: 13px;
}
.sud-info-value {
  font-size: 13px;
  font-weight: 500;
}
.sud-back-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.sud-title {
  margin-top: 4px;
}
.sud-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
/* .card has no base CSS rule anywhere in the stylesheet set, so these bare
   modifier classes are safe to combine with class="card". */
.sud-card-heading {
  margin-bottom: 12px;
}
.sud-card-heading--danger {
  margin-bottom: 12px;
  color: #dc2626;
}
.sud-amount {
  font-weight: 700;
}
.sud-card--gap-bottom {
  margin-bottom: 24px;
}
.sud-card--gap-top {
  margin-top: 24px;
}
.sud-card--danger {
  margin-bottom: 24px;
  border-left: 3px solid #dc2626;
}
.sud-dunning-block {
  margin-bottom: 8px;
}
.sud-dunning-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}
.sud-dunning-label {
  color: var(--gray-500);
}
.sud-dunning-count {
  font-weight: 700;
  color: #dc2626;
}
.sud-progress-track {
  background: var(--gray-200);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
/* Width is per-instance continuous data (0-100%), so it stays a CSSOM
   write (progressFill.style.width = ...) — CSP-exempt since the element
   carries no initial style attribute in markup. */
.sud-progress-fill {
  background: #dc2626;
  height: 100%;
  border-radius: 4px;
}
.sud-dunning-failure {
  font-size: 12px;
  color: var(--gray-600);
}
.sud-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sud-events-scroll {
  max-height: 400px;
  overflow-y: auto;
}
.sud-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sud-dialog-overlay.is-hidden {
  display: none;
}
.sud-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* .list-table td sets font-size/color at (0,1,1); bare (0,1,0) classes
   cannot win, so these are compounded with the base selector. */
.list-table td.sud-event-type {
  font-weight: 500;
  font-size: 13px;
}
.list-table td.sud-event-time {
  font-size: 12px;
  color: var(--gray-500);
}
.list-table td.sud-event-details {
  font-size: 12px;
  color: var(--gray-600);
}
.list-table td.sud-no-events {
  color: var(--gray-400);
}
.sud-no-actions {
  font-size: 13px;
  color: var(--gray-400);
}
.sud-error-text {
  color: red;
}
.sud-dialog-heading {
  margin-bottom: 16px;
}
.sud-field-group {
  margin-bottom: 12px;
}
.sud-field-group--wide {
  margin-bottom: 16px;
}
.sud-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.sud-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.sud-dialog-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.sud-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.sud-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.sud-checkbox-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 4px;
  margin-left: 24px;
}
.sud-btn-danger {
  background: #dc2626;
  border-color: #dc2626;
}
/* addButton() text-color variants for the action-row Cancel/Reactivate
   buttons. .btn-secondary/.btn-primary both set color at bare (0,1,0),
   so these must compound with the base class to win. */
.btn-secondary.sud-action-btn--danger {
  color: #dc2626;
}
.btn-secondary.sud-action-btn--success {
  color: #16a34a;
}
.btn-primary.sud-action-btn--success {
  color: #16a34a;
}

/* compliance-states.js */

.cpls-error-text {
  color: red;
}

/* .detail-view sets padding:32px 24px at (0,1,0) in detail-view.css, which
   loads AFTER main.css — a bare class of equal specificity here would lose
   regardless of source order within main.css. Compound to win. */
.detail-view.cpls-page {
  padding: 24px;
}

.cpls-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

/* .card has no base CSS rule anywhere in the stylesheet set, so these bare
   classes on .card children are safe. */
.cpls-stat-card {
  text-align: center;
  background: var(--wa-color-neutral-50, #f9fafb);
  padding: 20px;
}

.cpls-stat-number {
  font-size: 28px;
  font-weight: 700;
}

.cpls-stat-number--green {
  color: #16a34a;
}

.cpls-stat-number--orange {
  color: #d97706;
}

.cpls-stat-number--blue {
  color: #2563eb;
}

.cpls-stat-label {
  font-size: 13px;
  color: var(--gray-500);
}

.cpls-filter-bar {
  margin-bottom: 16px;
  padding: 12px 16px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.cpls-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cpls-filter-count {
  font-size: 12px;
  color: var(--gray-400);
  margin-left: auto;
}

.cpls-table-card {
  overflow-x: auto;
}

/* .list-table th (list-view.css) already sets padding:8px 10px, font-size:11px,
   font-weight:600, color:var(--gray-500), border-bottom:1px solid var(--gray-200)
   at (0,1,1) specificity. font-weight/color match our inline values exactly and
   are dropped as redundant; padding/font-size/border-bottom differ and need the
   compound form to win regardless of file load order. text-align:left also
   matches the base rule's default, so the base .cpls-th needs no text-align —
   only the center/right modifiers need to override it. */
.list-table th.cpls-th {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 2px solid var(--gray-200);
}

.list-table th.cpls-th--center {
  text-align: center;
}

.list-table th.cpls-th--right {
  text-align: right;
}

/* .list-table td already sets padding:7px 10px at (0,1,1) — needs the compound
   form to override. It does not set font-weight or text-align, so those
   modifiers are safe as bare classes. */
.list-table td.cpls-td {
  padding: 10px 12px;
}

.cpls-td--bold {
  font-weight: 600;
}

.cpls-td--center {
  text-align: center;
}

.cpls-td--right {
  text-align: right;
}

/* Row-level border; .list-table tbody tr only sets cursor+transition, not
   border-bottom, so this is safe as a bare class alongside the existing
   .state-row selector used for click handling. cursor:pointer was dropped
   as redundant with .list-table tbody tr's own cursor:pointer. */
.cpls-state-row {
  border-bottom: 1px solid var(--gray-100);
}

/* Expanded-detail row's spanning cell: overrides .list-table td's padding
   and border-bottom (both differ from the base rule), so compound required. */
.list-table td.cpls-detail-td {
  padding: 0;
  border-bottom: 2px solid var(--gray-200);
}

.cpls-detail-panel {
  background: var(--wa-color-neutral-50, #f9fafb);
  padding: 16px 24px;
}

/* Empty-state cell: overrides .list-table td's padding and color (both
   differ), plus adds text-align (not set by the base rule) — compound. */
.list-table td.cpls-empty-td {
  padding: 24px;
  text-align: center;
  color: var(--gray-400);
}

.cpls-bool-icon {
  font-size: 16px;
  font-weight: 700;
}

.cpls-bool-icon--yes {
  color: #16a34a;
}

.cpls-bool-icon--no {
  color: #dc2626;
}

.cpls-detail-block {
  margin-bottom: 16px;
}

.cpls-detail-h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gray-700);
}

.cpls-detail-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4px 12px;
  font-size: 13px;
}

.cpls-detail-key {
  color: var(--gray-500);
}

.cpls-detail-value {
  font-size: 13px;
  color: var(--gray-600);
}

.cpls-notes-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--gray-600);
}

.cpls-no-detail {
  font-size: 13px;
  color: var(--gray-400);
}

/* subscriptions-list.js */

/* Status badge (small fixed enum -> base + modifier classes). */
.subl-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.subl-badge--trial { background: #dbeafe; color: #1e40af; }
.subl-badge--active { background: #dcfce7; color: #16a34a; }
.subl-badge--past_due { background: #fef3c7; color: #92400e; }
.subl-badge--cancelled { background: #f3f4f6; color: #6b7280; }
.subl-badge--expired { background: #fecaca; color: #dc2626; }
.subl-badge--default { background: #f3f4f6; color: #6b7280; }

/* Filter bar. `.card` has no base CSS rule anywhere in the stylesheet
   set, so this bare class is safe. */
.subl-filter-bar {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
}
.subl-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.subl-filter-input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
}
.subl-filter-divider {
  border-left: 1px solid var(--gray-300);
  height: 24px;
  margin: 0 4px;
}

.subl-empty {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}

/* Sortable table headers. `.list-table th` sets text-align:left at
   (0,1,1) specificity, so a bare modifier can't win there — the
   right/center aligned columns need a compound selector against
   .list-table th. Plain cursor-only columns don't touch a property
   .list-table th already sets, so a bare class is fine for those. */
.subl-th-sort { cursor: pointer; }
.list-table th.subl-th-right { cursor: pointer; text-align: right; }
.list-table th.subl-th-center { cursor: pointer; text-align: center; }

/* Row cursor was dropped entirely — `.list-table tbody tr` already sets
   cursor:pointer, so the inline style was fully redundant (no class
   needed, see convention #6). */

/* Table cells. `.list-table td` already sets font-size:13px, so that
   part of each inline style was redundant and dropped; only the truly
   new declarations became classes. Cells whose entire inline style was
   just `font-size:13px` needed no class at all. */
.subl-td-strong { font-weight: 500; }
.subl-td-amount { font-weight: 600; text-align: right; }
.subl-td-dunning { text-align: center; }
.subl-td-dunning--alert { color: #dc2626; font-weight: 700; }
.subl-td-dunning--normal { color: var(--gray-400); }

/* New-subscription dialog overlay/box. Starts hidden via `is-hidden` in
   markup; JS toggles the class instead of writing .style.display. */
.subl-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subl-dialog-overlay.is-hidden { display: none; }

.subl-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 460px;
  max-width: 560px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
}

/* Dialog form fields. */
.subl-dlg-title { margin-bottom: 16px; }
.subl-dlg-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.subl-dlg-field { margin-bottom: 12px; }
.subl-dlg-field-lg { margin-bottom: 16px; }
.subl-dlg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.subl-dlg-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.subl-dlg-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  resize: vertical;
}
.subl-dlg-status {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.subl-dlg-status--error { color: red; }
.subl-dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* landed-cost.js */

.ldc-intro-text {
  color: var(--gray-500);
  font-size: 13px;
  max-width: 780px;
}

.ldc-page-body {
  padding: 0 24px 24px;
  max-width: 1100px;
  display: grid;
  gap: 20px;
}

/* .card has no base CSS rule anywhere in the stylesheet set, so a bare
   class is safe here. */
.ldc-card-pad {
  padding: 20px;
}

.ldc-section-title {
  margin: 0 0 12px;
  font-size: 15px;
}

.ldc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ldc-mt-12 {
  margin-top: 12px;
}

.ldc-mt-10 {
  margin-top: 10px;
}

.ldc-hint-text {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
}

.ldc-mt-8 {
  margin-top: 8px;
}

.ldc-actions-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.ldc-status-line {
  margin-top: 12px;
  font-size: 13px;
  color: var(--gray-500);
  min-height: 18px;
}

.ldc-text-danger {
  color: var(--wa-color-danger-30);
}

.ldc-text-success {
  color: var(--wa-color-success-30);
}

.ldc-muted-block {
  font-size: 13px;
  color: var(--gray-500);
  padding: 8px 0;
}

.ldc-error-block {
  font-size: 13px;
  color: var(--wa-color-danger-30);
  padding: 8px 0;
}

.ldc-cost-empty {
  color: var(--gray-400);
}

.ldc-code-sm {
  font-size: 12px;
}

.ldc-selection-summary {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px;
}

/* .data-table has no base rule anywhere in the stylesheet set that touches
   text-align, so these are safe as bare utility classes. */
.ldc-text-right {
  text-align: right;
}

.ldc-text-left {
  text-align: left;
}

.ldc-text-warning {
  color: var(--wa-color-warning-30);
}

.ldc-override-input {
  max-width: 120px;
}

.ldc-callout-margin {
  margin: 12px 0;
}

.ldc-callout-mb {
  margin-bottom: 12px;
}

.ldc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.ldc-alloc-title {
  margin: 0;
  font-size: 15px;
}

.ldc-muted-xs {
  font-size: 12px;
  color: var(--gray-500);
}

.ldc-meta-line {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}

.ldc-total-value {
  font-size: 18px;
  font-weight: 600;
}
/* updateSum()'s balanced/unbalanced 2-value color enum. #lc-sum-value has
   no initial style attribute, but a fixed enum belongs in modifier classes
   per the program's convention rather than a per-call CSSOM color write. */
.ldc-sum-balanced {
  color: var(--wa-color-success-30);
}
.ldc-sum-unbalanced {
  color: var(--wa-color-danger-30);
}

/* .data-table has no base rule for width/font-size, so a bare class is safe
   even combined with .data-table on the same element. */
.ldc-table {
  width: 100%;
  font-size: 13px;
}

.ldc-tfoot-row {
  border-top: 2px solid var(--gray-300);
}

.ldc-finalize-row {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ldc-status-inline {
  font-size: 13px;
  color: var(--gray-500);
  margin-left: 8px;
}

/* payment-detail.js */

/* Status / method badges (small fixed enums) */
.pmtd-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.pmtd-badge--status-pending { background: #fef9c3; color: #a16207; }
.pmtd-badge--status-processing { background: #dbeafe; color: #2563eb; }
.pmtd-badge--status-completed { background: #dcfce7; color: #16a34a; }
.pmtd-badge--status-failed { background: #fecaca; color: #dc2626; }
.pmtd-badge--status-refunded { background: #e0e7ff; color: #3730a3; }
.pmtd-badge--status-cancelled { background: #f3f4f6; color: #6b7280; }

.pmtd-badge--method-credit_card { background: #dbeafe; color: #2563eb; }
.pmtd-badge--method-ach { background: #dcfce7; color: #16a34a; }
.pmtd-badge--method-wire { background: #e0e7ff; color: #3730a3; }
.pmtd-badge--method-check { background: #ffedd5; color: #c2410c; }
.pmtd-badge--method-cash { background: #f3f4f6; color: #6b7280; }
.pmtd-badge--method-other { background: #f3f4f6; color: #6b7280; }

/* Payment info rows */
.pmtd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.pmtd-info-label {
  color: var(--gray-500);
  font-size: 13px;
}
.pmtd-info-value {
  font-size: 13px;
  font-weight: 500;
}
.pmtd-amount-positive {
  color: #16a34a;
  font-weight: 700;
}
.pmtd-info-link {
  color: var(--primary);
  text-decoration: none;
}

/* Status timeline */
.pmtd-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 0;
}
.pmtd-timeline-item {
  display: flex;
  align-items: center;
}
.pmtd-timeline-item-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.pmtd-timeline-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pmtd-timeline-circle--error { background: #dc2626; }
.pmtd-timeline-circle--completed { background: #16a34a; }
.pmtd-timeline-circle--pending { background: #d1d5db; }
.pmtd-timeline-check {
  font-size: 14px;
  color: white;
}
.pmtd-timeline-number {
  font-size: 12px;
  color: #9ca3af;
}
.pmtd-timeline-label {
  font-size: 11px;
  margin-top: 4px;
}
.pmtd-timeline-label--completed { color: var(--gray-900); font-weight: 600; }
.pmtd-timeline-label--pending { color: var(--gray-400); font-weight: 400; }
.pmtd-timeline-connector {
  width: 48px;
  height: 2px;
  margin: 0 4px;
  margin-bottom: 18px;
}
.pmtd-timeline-connector--completed { background: #16a34a; }
.pmtd-timeline-connector--pending { background: #d1d5db; }

/* Header / layout */
.pmtd-back-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.pmtd-header-actions {
  display: flex;
  gap: 8px;
}
.pmtd-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.pmtd-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pmtd-refunds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pmtd-refund-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}
.pmtd-refund-progress-label {
  color: var(--gray-500);
}
.pmtd-refund-progress-pct {
  font-weight: 600;
}
.pmtd-refund-progress-track {
  background: var(--gray-200);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.pmtd-refund-progress-fill {
  background: #3730a3;
  height: 100%;
  border-radius: 4px;
  /* width is set dynamically in JS (payment-detail.js renderPaymentDetail) */
}
.pmtd-muted-text {
  font-size: 13px;
  color: var(--gray-400);
}
.pmtd-error-text {
  color: red;
}
.pmtd-events-scroll {
  max-height: 400px;
  overflow-y: auto;
}

/* Shared spacing utilities (single-property, reused across multiple sites
   in this file; .card has no base CSS rule anywhere in the stylesheet set,
   so bare margin utilities on .card elements are safe). */
.pmtd-mt-4 { margin-top: 4px; }
.pmtd-mt-16 { margin-top: 16px; }
.pmtd-mt-24 { margin-top: 24px; }
.pmtd-mb-8 { margin-bottom: 8px; }
.pmtd-mb-12 { margin-bottom: 12px; }
.pmtd-mb-16 { margin-bottom: 16px; }
.pmtd-mb-24 { margin-bottom: 24px; }
.pmtd-m-0 { margin: 0; }

/* Event history table cells. `.list-table td` (list-view.css) sets
   font-size:13px and color:var(--gray-700) at (0,1,1) specificity, so any
   override of font-size/color here must compound against it; the
   type-cell only overrides font-weight (not set by the base rule), so it
   stays a bare class. */
.pmtd-event-type-cell {
  font-weight: 500;
}
.list-table td.pmtd-event-ts-cell {
  font-size: 12px;
  color: var(--gray-500);
}
.list-table td.pmtd-event-details-cell {
  font-size: 12px;
  color: var(--gray-600);
}
.list-table td.pmtd-empty-cell {
  color: var(--gray-400);
}

/* Action button danger modifier. `.btn-secondary` sets color at (0,1,0)
   specificity, same as a bare modifier, so this must compound against it
   (same pattern as .btn-secondary.szd-btn-deactivate /
   .btn-secondary.bad-btn-danger elsewhere in main.css). */
.btn-secondary.pmtd-action-danger {
  color: #dc2626;
}

/* Refund dialog */
.pmtd-dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.pmtd-dialog-overlay.is-open {
  display: flex;
}
.pmtd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.pmtd-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.pmtd-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.pmtd-field-textarea {
  resize: vertical;
}
.pmtd-field-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
.pmtd-dlg-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.pmtd-dlg-status--error {
  color: red;
}
.pmtd-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pmtd-assert-dialog {
  --width: 520px;
}
.pmtd-assert-stack {
  gap: var(--wa-space-m);
}
.pmtd-assert-footer {
  justify-content: flex-end;
}

/* bottling-processes-list.js */

.bpsl-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bpsl-status-select {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}

/* .list-table th sets text-align:left at (class,element) specificity, so a
   bare class can't win — compound selector matches the .list-table th/td
   trap pattern used throughout this program. .list-table td does not set
   text-align, so the bare rule below is enough for <td> uses of the same
   class. */
.bpsl-col-right {
  text-align: right;
}
.list-table th.bpsl-col-right {
  text-align: right;
}

.list-table td.bpsl-code-cell {
  font-family: monospace;
  font-size: 12px;
}

.list-table td.bpsl-error-row {
  color: red;
}

.bpsl-create-dialog {
  --width: 640px;
}

.bpsl-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bpsl-gauge-indicator--ok {
  color: #065f46;
}
.bpsl-gauge-indicator--low {
  color: #b45309;
}

.bpsl-form-grid {
  display: grid;
  gap: 20px;
}

.bpsl-step-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 15px;
}

/* .card-radio-group (detail-view.css) sets display:flex;gap:12px at bare
   specificity; detail-view.css loads after main.css, so a bare class here
   would lose. Compound selector wins regardless of load order (same
   pattern as .card-radio-group.mrl-mode-picker-grid /
   .card-radio-group.frl-mode-picker-grid / .card-radio-group.obr-radio-group). */
.card-radio-group.bpsl-tank-cards {
  display: grid;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

/* Small fixed badge enum (tank ttb-account + gauge-freshness indicators). */
.bpsl-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}
.bpsl-badge--ok {
  background: #d1fae5;
  color: #065f46;
}
.bpsl-badge--warn {
  background: #fef3c7;
  color: #92400e;
}
.bpsl-badge--neutral {
  background: var(--wa-color-neutral-90, #f3f4f6);
  color: var(--gray-600);
}
.bpsl-badge--bad {
  background: #fee2e2;
  color: #991b1b;
}

.bpsl-tank-info {
  min-width: 0;
}
.bpsl-tank-name {
  font-weight: 600;
  font-size: 14px;
}
.bpsl-tank-meta {
  font-size: 12px;
  color: var(--gray-500);
}
.bpsl-tank-badges {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.bpsl-tank-gauge-age {
  font-size: 11px;
  color: var(--gray-400);
}

/* WORK-1083: the picker can show occupied tanks that cannot start a run.
   They explain themselves but are not selectable. */
.bpsl-tank-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tank-card--excluded {
  cursor: default;
  opacity: 0.85;
  border-style: dashed;
}
.bpsl-empty-note.is-hidden,
.bpsl-badge.is-hidden {
  display: none;
}
.bpsl-tank-reasons {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--gray-600);
}

.bpsl-empty-note {
  /* WA scales run dark→light: neutral-50 is mid-grey, so text on it was
     unreadable. Light surface, dark text. */
  color: var(--wa-color-neutral-30, #374151);
  font-size: 13px;
  padding: 12px;
  background: var(--wa-color-neutral-95, #f3f4f6);
  border-radius: 6px;
}
.bpsl-empty-hint {
  color: var(--gray-400);
  font-size: 13px;
}

/* classification-compat-info only ever shows one (error) message state, so
   the color/background/border modifier is baked into the markup as a
   static class alongside the base class; only is-hidden is toggled in JS. */
.bpsl-compat-info {
  margin-top: 6px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}
.bpsl-compat-info--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.bpsl-compat-info.is-hidden {
  display: none;
}

/* proof-tolerance-info has three states (neutral/ok/bad) toggled in JS. */
.bpsl-tolerance-info {
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
}
.bpsl-tolerance-info--neutral {
  background: var(--wa-color-neutral-90, #f3f4f6);
  color: var(--gray-700, #374151);
}
.bpsl-tolerance-info--ok {
  background: #d1fae5;
  color: #065f46;
}
.bpsl-tolerance-info--bad {
  background: #fee2e2;
  color: #991b1b;
}
.bpsl-tolerance-info.is-hidden {
  display: none;
}

.bpsl-step-section {
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 16px;
}

.bpsl-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bpsl-datetime-field {
  margin-top: 12px;
}

.bpsl-output-preview {
  margin-top: 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 12px;
}
.bpsl-output-preview.is-hidden {
  display: none;
}
.bpsl-output-preview-big {
  font-size: 18px;
  font-weight: 700;
  color: #0369a1;
}
.bpsl-output-preview-sub {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}
.bpsl-output-preview-plan {
  font-size: 12px;
  margin-top: 6px;
  color: var(--gray-700);
}
.bpsl-output-preview-plan--short {
  color: var(--wa-color-warning-30);
  font-weight: 600;
}

.bpsl-gauge-policy-panel {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--wa-color-neutral-80);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.bpsl-gauge-policy-text {
  color: var(--gray-700);
}
.bpsl-global-setting-note {
  color: var(--gray-400);
}

.bpsl-gauge-remediation {
  margin-top: 8px;
}
.bpsl-gauge-remediation.is-hidden {
  display: none;
}

.bpsl-link {
  color: #2563eb;
  text-decoration: underline;
}
.bpsl-muted-text {
  color: var(--gray-500);
}
.bpsl-alert-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 10px;
}
.bpsl-alert-title {
  color: #991b1b;
  font-weight: 600;
}
.bpsl-alert-links {
  margin-top: 4px;
}

/* Status badge — small fixed enum. */
.bpsl-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.bpsl-status-badge--planned {
  background: #f3f4f6;
  color: #374151;
}
.bpsl-status-badge--in_progress {
  background: #dbeafe;
  color: #1e40af;
}
.bpsl-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}
.bpsl-status-badge--cancelled {
  background: #fee2e2;
  color: #991b1b;
}
.bpsl-status-badge--reversed {
  background: #fce7f3;
  color: #9d174d;
}

/* tib-account-detail.js */

/* .detail-header (detail-view.css) already sets display:flex;
   align-items:center;justify-content:space-between;margin-bottom:24px —
   the new-form header only adds padding, which the base rule doesn't
   set, so a bare class is safe here (no compound needed). */
.tacd-header-pad { padding: 24px; }

/* The existing-account header overrides align-items (center -> flex-start),
   which IS set by .detail-header at (0,1,0) in detail-view.css — a bare
   class in this file can't win, so this must compound against the base
   class itself. */
.detail-header.tacd-header-existing { align-items: flex-start; padding: 24px; }

.tacd-new-body { padding: 0 24px 24px; max-width: 760px; }

/* .card has no base CSS rule anywhere in the stylesheet set, so these
   bare modifier classes are safe with no compound needed. */
.tacd-card-pad { padding: 20px; }
.tacd-card-span { grid-column: 1 / -1; }

.tacd-intro-text { color: var(--gray-500); margin: 0 0 16px; font-size: 13px; }

.tacd-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tacd-form-grid-2-mt { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.tacd-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 16px; }

.tacd-field-label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.tacd-required-mark { color: var(--red-500); }
.tacd-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--gray-500); }

.tacd-mt8 { margin-top: 8px; }
.tacd-mt12 { margin-top: 12px; }
.tacd-mt16 { margin-top: 16px; }

.tacd-spirit-label { display: block; font-weight: 600; margin-bottom: 8px; }
.tacd-spirit-hint { color: var(--gray-400); font-weight: 400; font-size: 13px; }
.tacd-pg-limit-error { color: var(--wa-color-danger-50); }
.tacd-spirit-card-title { font-weight: 500; font-size: 14px; }
.tacd-spirit-card-desc { font-size: 12px; color: var(--gray-500); }
.tacd-spirit-either-hint { margin: 8px 0 0; font-size: 12px; color: var(--gray-500); }

.tacd-actions-row { margin-top: 20px; display: flex; gap: 8px; }

.tacd-status-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tacd-dsp-mono { color: var(--gray-500); font-family: monospace; font-size: 13px; }
.tacd-actions-wrap { display: flex; gap: 8px; flex-wrap: wrap; }

.tacd-detail-grid { padding: 0 24px 24px; max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tacd-h3-tight { margin: 0 0 12px; }
.tacd-kv-grid { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; font-size: 14px; }
.tacd-kv-grid-200 { display: grid; grid-template-columns: 200px 1fr; row-gap: 8px; font-size: 14px; }
.tacd-label-muted { color: var(--gray-500); }
.tacd-mono { font-family: monospace; }
.tacd-pre-wrap { white-space: pre-wrap; }

.tacd-limit-note { margin: 8px 0 0; font-size: 12px; color: var(--gray-400); }
.tacd-h4-spirit { margin: 16px 0 8px; font-size: 13px; color: var(--gray-600); }
.tacd-spirit-box-note { color: var(--gray-400); font-weight: 400; }
.tacd-spirit-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tacd-either-permitted { color: var(--gray-400); margin: 0; font-size: 13px; }
.tacd-edit-summary { cursor: pointer; font-size: 13px; color: var(--gray-600); }

.tacd-notes-text { margin: 0; white-space: pre-wrap; }

.tacd-error-text { color: var(--wa-color-danger-40); }

/* journal-entry-detail.js */
.jed-error-text {
  color: red;
}
.jed-mt-16 {
  margin-top: 16px;
}
.jed-mt-24 {
  margin-top: 24px;
}
.jed-section-title {
  margin-bottom: 12px;
}
.jed-title-flush {
  margin: 0;
}
.jed-dialog-title {
  margin-bottom: 16px;
}
.jed-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.jed-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.jed-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.jed-field-group {
  margin-bottom: 16px;
}
.jed-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.jed-col-account {
  min-width: 200px;
}
.jed-col-120 {
  width: 120px;
}
.jed-col-narrow {
  width: 40px;
}
/* .list-table th sets text-align:left at (0,1,1) — a bare class can't
   win, so this compounds on th same as the batch 12 .list-table th trap. */
.list-table th.jed-th-right {
  text-align: right;
}
.jed-totals-row {
  font-weight: 600;
  border-top: 2px solid var(--gray-300);
}
.jed-text-right {
  text-align: right;
}
.jed-text-center {
  text-align: center;
}
.jed-text-strong {
  font-weight: 500;
}
.jed-actions-footer {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
/* Base status/badge shape, shared by the posted/draft/reversed/voided
   status pill, the balanced/off pill, and the source-type pill below —
   all three previously duplicated the same display/padding/radius/
   font declarations inline. */
.jed-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.jed-status-badge--draft {
  background: #f3f4f6;
  color: #6b7280;
}
.jed-status-badge--posted {
  background: #dcfce7;
  color: #16a34a;
}
.jed-status-badge--reversed {
  background: #dbeafe;
  color: #2563eb;
}
.jed-status-badge--voided {
  background: #fecaca;
  color: #dc2626;
}
.jed-balance-badge--balanced {
  background: #dcfce7;
  color: #16a34a;
}
.jed-balance-badge--off {
  background: #fecaca;
  color: #dc2626;
}
.jed-source-badge {
  background: #e0f2fe;
  color: #0369a1;
  margin-left: 8px;
}
.jed-status {
  font-size: 12px;
  color: var(--gray-500);
  padding: 8px 0;
}
/* .jed-status sets color at bare (0,1,0); compound to guarantee the
   error state wins regardless of declaration order. */
.jed-status.jed-error-text {
  color: red;
}
.jed-info-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.jed-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* .btn-secondary sets color at bare (0,1,0); compound to guarantee the
   void-button red wins (same pattern as .btn-secondary.szd-btn-deactivate). */
.btn-secondary.jed-void-btn {
  color: #dc2626;
}
.jed-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jed-dialog-overlay.is-hidden {
  display: none;
}
.jed-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.jed-dialog-status {
  font-size: 12px;
  margin-bottom: 8px;
}
.jed-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.jed-td-relative {
  position: relative;
}
.jed-line-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.jed-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #dc2626;
  font-size: 16px;
}
.jed-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* Batch 33 */
/* barrel-pricing-calculator.js */

/* .detail-view sets max-width:var(--app-content-max) and padding:32px 24px
   at (0,1,0) in detail-view.css, loaded after main.css. A bare class of
   equal specificity would lose on source order, so this compounds with
   .detail-view to win. */
.detail-view.bpc-page {
  max-width: min(1840px, 100%);
  padding-bottom: 48px;
}

/* .detail-header sets align-items:center at (0,1,0) in detail-view.css,
   loaded after main.css — needs the compound form to override. */
.detail-header.bpc-header {
  align-items: flex-start;
  gap: 16px;
}

.bpc-subtitle {
  margin-top: 6px;
  color: var(--gray-500);
  font-size: 14px;
  max-width: 900px;
}

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

/* Two-column layout sections (left input column, right results column). */
.bpc-column {
  display: grid;
  gap: 20px;
}

/* .form-row sets margin-bottom:16px at (0,1,0) in detail-view.css, loaded
   after main.css — needs the compound form to override. Reused across all
   four "last row in card" occurrences. */
.form-row.bpc-tight {
  margin-bottom: 0;
}

.bpc-basis-note {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--gray-50);
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.45;
}

.bpc-stage-list {
  display: grid;
  gap: 16px;
}

/* Zebra-striped stage cards. The original inline style computed background
   from `index % 2` — a two-value fixed enum, so it becomes a base class plus
   an alternating modifier rather than a per-item inline style. */
.bpc-stage-card {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  background: white;
}
.bpc-stage-card--alt {
  background: var(--gray-50);
}

.bpc-stage-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bpc-stage-name-col {
  flex: 1;
}

.bpc-stage-name-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.bpc-stage-summary-wrap {
  margin-top: 14px;
}

/* Byte-identical inline style reused on two different elements (stage-list
   help paragraph and numberField help text div). */
.bpc-hint-text {
  font-size: 12px;
  color: var(--gray-500);
}

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

.bpc-tax-display {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--gray-50);
  font-size: 13px;
  color: var(--gray-700);
}

.bpc-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--gray-700);
}

.bpc-checkbox-input {
  width: auto;
}

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

.bpc-warnings-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.bpc-warnings-title {
  font-size: 12px;
  font-weight: 700;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.bpc-warnings-list {
  padding-left: 18px;
  color: #9a3412;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.bpc-table-scroll {
  overflow: auto;
}

.bpc-flow-table {
  margin: 0;
  min-width: 760px;
}

/* .list-table th sets text-align:left at (0,1,1) in list-view.css — a bare
   class cannot win, so this compounds with .list-table th (same trap as
   the rest of this program's th-align overrides). */
.list-table th.bpc-th-right {
  text-align: right;
}

/* .list-table td does not set font-weight or text-align, so bare classes
   are safe for these. */
.bpc-td-strong {
  font-weight: 600;
}

.bpc-td-right {
  text-align: right;
}

.bpc-terminal-pools-wrap {
  margin-top: 16px;
}

.bpc-section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.bpc-terminal-pools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bpc-terminal-pool-chip {
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--gray-50);
  font-size: 12px;
  color: var(--gray-700);
}

.bpc-matrix-table {
  margin: 0;
  min-width: 940px;
}

.bpc-td-shelf-price {
  font-weight: 700;
  vertical-align: top;
}

/* Fixed 3-way enum (positive / negative / neutral) previously built as an
   inline style string by profitStyle(). Neutral needs no class — it
   matches .list-table td's own default color:var(--gray-700). .list-table
   td sets color at (0,1,1), so the non-neutral variants must compound. */
.list-table td.bpc-profit--positive {
  color: #166534;
  font-weight: 600;
}
.list-table td.bpc-profit--negative {
  color: #b91c1c;
  font-weight: 600;
}

/* .list-table td sets color:var(--gray-700) at (0,1,1) — overriding to the
   muted empty-state color needs the compound form. */
.list-table td.bpc-td-empty {
  color: var(--gray-500);
}

.bpc-matrix-footnote {
  margin-top: 12px;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.bpc-summary-metric {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 14px;
  background: var(--gray-50);
}

.bpc-summary-metric-label {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.bpc-summary-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
}

.bpc-mini-metric {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px;
  background: white;
}

.bpc-mini-metric-label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.bpc-mini-metric-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
}

/* barrels-list.js */

/* -- Top toolbar / header -- */
/* .list-header-actions (list-view.css) already sets display:flex;gap:8px —
   only align-items:center is new, so a bare additive class is safe. */
.brls-header-actions { align-items: center; }

.brls-mb-8 { margin-bottom: 8px; }
.brls-mb-12 { margin-bottom: 12px; }
.brls-mt-8 { margin-top: 8px; }
.brls-mb-16 { margin-bottom: 16px; }
.brls-relative { position: relative; }

.brls-toolbar { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.brls-search-wrap { display: flex; align-items: center; gap: 8px; }
.brls-search-input { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; width: 240px; }
.brls-owner-select { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }

/* Search result count — toggled via classList; visible state is display:inline. */
.brls-search-count { font-size: 13px; font-weight: 500; color: var(--gray-500); white-space: nowrap; display: inline; }
.brls-search-count.is-hidden { display: none; }

/* -- Summary drawer -- */
/* Toggle button — visible state is display:inline-flex. */
.brls-summary-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-600);
}
.brls-summary-toggle.is-hidden { display: none; }
.brls-summary-chevron { display: inline-block; transition: transform 0.2s; }
.brls-summary-chevron-gap { display: inline-block; transition: transform 0.2s; margin-right: 6px; }
.brls-summary-content { margin-top: 8px; }
.brls-summary-content.is-hidden { display: none; }

/* -- Filter badge / popover -- */
.brls-filter-badge {
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary, #2563eb);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.brls-filter-badge.is-hidden { display: none; }

.brls-filter-panel {
  display: block;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 16px;
  min-width: 380px;
  max-height: 70vh;
  overflow-y: auto;
}
.brls-filter-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.brls-filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
}
.brls-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brls-filter-label { display: block; font-size: 11px; font-weight: 500; color: var(--gray-600); margin-bottom: 3px; }
.brls-filter-input { width: 100%; padding: 5px 8px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
.brls-filter-full { grid-column: 1/-1; }

/* -- Columns popover -- */
.brls-columns-wrap { margin-left: auto; }
.brls-columns-panel {
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
}
.brls-columns-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--gray-500); padding: 4px 8px; margin-bottom: 4px; }
/* .columns-dropdown-item (list-view.css) already sets display:flex;
   align-items:center;cursor:pointer;font-size:13px — only gap/padding differ
   here, plus a new border-radius, so this compounds to win the tie-break. */
.columns-dropdown-item.brls-columns-item {
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
}
.brls-col-checkbox { width: 14px; height: 14px; accent-color: var(--primary-600); }

/* -- Section headings -- */
.brls-empty-section-header { margin: 24px 0 12px; }
.brls-subheading { margin: 0 0 8px; font-size: 15px; }

/* -- Filled / empty two-table column (WORK-849) --
   `.list-view` is a viewport-height flex column below the top bar, and this view is the only one
   that puts a SECOND table below the primary scroll wrapper. `#empty-section`
   used to be a plain block, so its automatic minimum size floored it at content
   height and it could not shrink; `.list-table-wrapper` is `flex:1 1 0%` with
   `overflow:auto`, so ITS automatic minimum resolves to 0 and it absorbed the
   entire overflow. Measured at 1280x720, seven empty barrels were enough to
   collapse the filled wrapper to 0px, clipping the Filled Barrels table and its
   header outright — the header kept a layout box, so it still looked clickable
   while nothing could hit it. Both tables now get a bounded, independently
   scrollable share of the column.
   `.is-hidden` needs its own scoped compound rule (there is no global one) and
   must outrank the `display:flex` above it. */
.list-table-wrapper.brls-filled-wrapper {
  min-height: 160px;
}
/* `flex: 0 1 auto` and not `1 1 0%`: this section sizes to its own content and
   never claims space it has nothing to put in — a tenant with no empty barrels
   keeps the whole column for filled ones. `min-height: 0` is what makes it
   shrinkable at all, so a long empty list scrolls inside itself instead of
   pushing the filled table's floor away. */
#empty-section {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
}
#empty-section.is-hidden {
  display: none;
}

/* -- Bulk action bar -- */
.brls-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--primary-50, #eff6ff);
  border: 1px solid var(--primary-200, #bfdbfe);
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brls-bulk-count { font-weight: 600; font-size: 13px; color: var(--primary-700, #1d4ed8); }
/* Visible state is display:inline-block. */
.brls-bulk-clear { margin-left: auto; display: inline-block; }
.brls-bulk-clear.is-hidden { display: none; }

/* -- Table cells / headers --
   .list-table th sets text-align:left at (0,1,1) (list-view.css) — a bare
   class can't win, so right-align needs the compound form.
   .list-table td does not set text-align or font-weight, so those are safe
   as bare classes; it DOES set font-size:13px and color:var(--gray-700), so
   overriding those needs the compound form too. */
.list-table th.brls-th-right { text-align: right; }
.list-table th.brls-actions-th { width: 60px; text-align: center; }
.list-table th.brls-actions-th-wide { width: 120px; text-align: center; }
.brls-col-right { text-align: right; }
.brls-cell-right { text-align: right; }
.brls-cell-strong { font-weight: 600; }
.brls-col-medium { font-weight: 500; }
.list-table td.brls-col-muted-sm { color: var(--gray-500); font-size: 12px; }
.list-table td.brls-col-sm { font-size: 12px; }
.list-table td.brls-error-cell { color: red; }
/* Reused for the "lot" hint span (count column) and the disposition grade
   note span — both are byte-identical color:gray-500;font-size:11px. */
.brls-note-sm { color: var(--gray-500); font-size: 11px; }
/* Reused for the two "(optional)" label spans (disposition/condition). */
.brls-optional-note { color: var(--gray-500); font-weight: 400; }

/* Sortable/draggable filled-table headers. `.list-table th[draggable="true"]`
   (list-view.css) sets cursor:grab at (0,2,0); the compound form is needed
   to win with cursor:pointer, matching the prior inline-style override. */
.list-table th[draggable="true"].brls-sortable-th { cursor: pointer; }
.brls-th-dragging { opacity: 0.5; }

/* barrel-actions-cell is an existing local marker class (used for
   e.target.closest() only, previously unstyled) — attaching the one
   property it always needed avoids a redundant new class. */
.barrel-actions-cell { text-align: center; }

/* -- Dialog shared primitives (Note / Move / Harvest / Transfer /
   Disposition / Condition) -- */
.brls-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.brls-input { width: 100%; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px; }
.brls-input--upper { text-transform: uppercase; }
.brls-input--resize { resize: vertical; }
.brls-hint { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; }
.brls-status { font-size: 12px; color: var(--gray-500); margin-bottom: 8px; }
.brls-status-tight { font-size: 12px; color: var(--gray-500); }
/* Fixed 2-state enum (error vs normal) toggled via classList.add/remove. */
.brls-status--error { color: red; }

.brls-tabs-row { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--gray-200); }
.brls-tab-btn { border: none; background: none; padding: 8px 16px; margin-bottom: -2px; cursor: pointer; }
.brls-tab-btn.brls-tab-btn--active { font-weight: 600; border-bottom: 2px solid var(--primary); color: var(--primary); }
.brls-tab-btn.brls-tab-btn--inactive { font-weight: 500; border-bottom: none; color: var(--gray-500); }
.brls-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.brls-list-panel.is-hidden { display: none; }
#dlg-harvest-split-code-row.is-hidden { display: none; }

.brls-context-box { background: var(--gray-50); border-radius: 6px; padding: 12px; margin-bottom: 16px; font-size: 13px; }
.brls-context-box--dark { color: var(--gray-700); }
.brls-context-note { margin-top: 6px; color: var(--gray-500); }

.brls-weight-row { display: flex; gap: 0; }
.brls-weight-input { flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px 0 0 6px; }
.brls-unit-select {
  width: 56px;
  flex-shrink: 0;
  padding: 8px 4px;
  border: 1px solid var(--gray-300);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: var(--gray-50);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.brls-preview-box { background: var(--gray-50); border-radius: 6px; padding: 12px; margin-bottom: 12px; font-size: 13px; }
.brls-preview-box.is-hidden { display: none; }
.brls-preview-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.brls-preview-row-tight { display: flex; justify-content: space-between; }
.brls-strong { font-weight: 600; }
/* Fixed 2-state enum (loss vs. gain on harvest) toggled via classList. */
.brls-value--warn { color: var(--warning-600, #d97706); }
.brls-value--good { color: var(--success-600, #059669); }

.brls-field-note { font-size: 11px; color: var(--gray-500); margin-top: 4px; }
.brls-classification-warning { margin-bottom: 12px; }
.brls-classification-warning.is-hidden { display: none; }

/* batch-distillation-detail.js */

/* .card has no base CSS rule anywhere in the stylesheet set, so bare
   margin-top classes on .card elements are safe (see main.css precedent). */
.bdd-card-mt { margin-top: 24px; }
.bdd-h3 { margin-bottom: 12px; }
.bdd-h4-section { margin: 16px 0 8px 0; font-size: 13px; color: var(--gray-600); }
.bdd-scroll-x { overflow-x: auto; }
.bdd-table-m0 { margin: 0; }
.bdd-table-m0-sm { margin: 0; font-size: 12px; }

.bdd-badges { margin-top: 8px; }
.bdd-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }

/* infoRow() div + label, also reused for the manually-built Profile row. */
.bdd-info-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.bdd-info-label { font-size: 13px; color: var(--gray-500); }
.bdd-profile-link { color: #1e40af; text-decoration: none; font-size: 13px; }

/* .list-table th sets text-align:left at (class,element) specificity, so a
   bare class can't win — compound with the base class (batch 12/14 trap). */
.list-table th.bdd-th-right { text-align: right; }
/* .list-table td doesn't set text-align, so this is safe bare. */
.bdd-td-right { text-align: right; }
.bdd-td-right-strong { text-align: right; font-weight: 500; }
/* .list-table td doesn't set font-weight, so this is safe bare. */
.bdd-td-strong { font-weight: 500; }
/* .list-table td sets font-size:13px/color at (class,element) specificity —
   compound needed to override font-size here. */
.list-table td.bdd-td-sm { font-size: 12px; }
.list-table td.bdd-td-source { font-size: 11px; color: var(--gray-500); }
.list-table td.bdd-td-truncate-300 { font-size: 12px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-table td.bdd-td-truncate-150 { font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bdd-type-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 600; background: #f3f4f6; color: #374151; }

.bdd-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bdd-lot-chip { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 11px; background: #dbeafe; color: #1e40af; text-decoration: none; cursor: pointer; }

/* Dialog widths — wa-dialog's --width custom property. */
.bdd-w-520 { --width: 520px; }
.bdd-w-440 { --width: 440px; }
/* WORK-743 — the reversal dialog carries an impact list and a receipt. */
.bdd-w-560 { --width: 560px; }
.bdd-w-400 { --width: 400px; }
.bdd-w-460 { --width: 460px; }
.bdd-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bdd-checkbox-label--spaced { margin-top: 8px; }
.bdd-checkbox-input { width: 16px; height: 16px; accent-color: var(--wa-color-brand-40); }
.bdd-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; }

.bdd-error-text { color: red; }

.bdd-start-warnings { margin-top: 12px; border: 1px solid #f59e0b; background: #fffbeb; border-radius: 8px; padding: 10px; font-size: 12px; color: #92400e; }
.bdd-warnings-list { display: grid; gap: 8px; margin-top: 8px; }

.bdd-link { color: #1e40af; text-decoration: none; }

.bdd-conflict-box { border: 1px solid #fbbf24; border-radius: 8px; background: #fff7ed; padding: 10px; }
.bdd-conflict-title { font-weight: 700; color: #7c2d12; }
.bdd-conflict-body { margin-top: 4px; color: #7c2d12; }
.bdd-conflict-footer { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bdd-conflict-note { color: #92400e; }
/* WORK-366 — conflict override/repair affordances. */
.bdd-hidden { display: none; }
.bdd-unreserved-banner { margin-bottom: 10px; }
.bdd-disabled-tooltip-target { display: inline-flex; }

.bdd-recipe-heading { margin: 16px 0 8px 0; font-size: 13px; color: #7c3aed; }
.bdd-recipe-card { border: 1px solid #e9d5ff; border-radius: 8px; padding: 12px; background: #faf5ff; }

.bdd-gns-button { border-color: #7c3aed; color: #7c3aed; }
.bdd-push-right { margin-left: auto; }
.bdd-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }

.bdd-empty-note { color: var(--gray-400); font-size: 13px; }
.bdd-tag-plain { text-decoration: none; }

/* cut-integrity: a voided cut row keeps its data-testid position but reads as
   struck-through; matches the exact inline style it replaces (applied to the
   <tr> itself, same as the old inline style — .list-table td's own explicit
   color rule is unaffected since this only targets the row element). */
.bdd-cut-row--voided { color: var(--gray-400); text-decoration: line-through; }

/* Cut-type badge — fixed small enum (HEADS/HEARTS/TAILS/FEINTS/LOW_WINES),
   default (unknown type) falls back to the neutral background/color below. */
.bdd-cut-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #f3f4f6; color: #374151; }
.bdd-cut-badge--heads { background: #fef3c7; color: #92400e; }
.bdd-cut-badge--hearts { background: #d1fae5; color: #065f46; }
.bdd-cut-badge--tails { background: #fee2e2; color: #991b1b; }
.bdd-cut-badge--feints { background: #e0e7ff; color: #3730a3; }
.bdd-cut-badge--low-wines { background: #fce7f3; color: #9d174d; }

.bdd-warn-card { margin-top: 24px; background: #fef3c7; border-color: #fcd34d; }
.bdd-warn-hint { margin: 0; font-size: 13px; color: #92400e; }
.bdd-warn-heading { margin: 0 0 6px 0; font-size: 13px; color: #92400e; }
.bdd-warn-list { margin: 0; padding-left: 18px; font-size: 13px; color: #92400e; }
.bdd-warn-hint-sm { margin: 6px 0 0 0; font-size: 12px; color: #92400e; }

.bdd-form-grid { display: grid; gap: 12px; }
.bdd-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Low-wines routing panel toggled between shown/hidden via classList; there
   is no global .is-hidden rule, so this stays scoped to the panel itself. */
.bdd-routing-panel { border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px; background: var(--gray-50); }
.bdd-routing-panel.is-hidden { display: none; }

.bdd-mt-10 { margin-top: 10px; }
.bdd-help-note { font-size: 11px; color: var(--gray-500); margin: 8px 0 0; }
.bdd-help-note-tight { font-size: 11px; color: var(--gray-400); margin: 0; }

.bdd-complete-cut-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.bdd-complete-cut-card.is-hidden { display: none; }
.bdd-complete-cut-icon { color: var(--wa-color-brand-50); font-size: 18px; }
.bdd-complete-cut-copy { display: grid; gap: 2px; min-width: 0; }
.bdd-complete-cut-title { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.bdd-complete-cut-description { font-size: 11px; color: var(--gray-500); }
.bdd-complete-cut-state { font-size: 10px; font-weight: 700; color: var(--gray-500); letter-spacing: .04em; text-transform: uppercase; }
.bdd-complete-cut-card.selected .bdd-complete-cut-state { color: var(--wa-color-brand-40); }
.bdd-complete-cut-details { display: grid; gap: 10px; margin-top: -4px; padding: 10px 0 0 14px; border-left: 3px solid var(--wa-color-brand-50); }
.bdd-complete-cut-details.is-hidden { display: none; }
.bdd-complete-cut-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12px; color: var(--gray-600); }
.bdd-complete-cut-timing strong { display: block; margin-top: 2px; color: var(--gray-800); }

.bdd-void-confirm-text { font-size: 14px; }
.bdd-void-warning { background: var(--wa-color-danger-50, #fdeeee); border: 1px solid var(--wa-color-danger-80, #f6cccc); border-radius: 8px; padding: 10px 14px; font-size: 13px; }

.bdd-start-note { font-size: 11px; color: var(--gray-400); margin: -8px 0 0 0; }
.bdd-dialog-note { font-size: 13px; color: var(--gray-600); margin: 0; }

.bdd-steps-list { display: flex; flex-direction: column; gap: 8px; }

/* Step card — fixed two-state enum (completed vs. pending). Base carries the
   pending/default look; the modifier overrides for the completed state. */
.bdd-step-card { border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px; background: var(--gray-50); display: flex; gap: 12px; align-items: flex-start; }
.bdd-step-card--done { border-color: #059669; background: #f0fdf4; }

.bdd-step-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gray-200); color: var(--gray-700); font-weight: 700; font-size: 14px; }
.bdd-step-num--done { background: #059669; color: white; }

.bdd-step-body { flex: 1; min-width: 0; }
.bdd-step-tags-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

/* Step-type badge — fixed enum of profile step types; default/unknown falls
   back to the neutral background/color below. */
.bdd-step-type-badge { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; background: #f3f4f6; color: #374151; }
.bdd-step-type-badge--charge { background: #e0e7ff; color: #3730a3; }
.bdd-step-type-badge--heat { background: #fee2e2; color: #991b1b; }
.bdd-step-type-badge--equilibrate { background: #fef3c7; color: #92400e; }
.bdd-step-type-badge--foreshots { background: #f3f4f6; color: #374151; }
.bdd-step-type-badge--collect-heads { background: #fef3c7; color: #92400e; }
.bdd-step-type-badge--collect-hearts { background: #d1fae5; color: #065f46; }
.bdd-step-type-badge--collect-tails { background: #fee2e2; color: #991b1b; }
.bdd-step-type-badge--collect-low-wines { background: #fce7f3; color: #9d174d; }
.bdd-step-type-badge--collect-feints { background: #e0e7ff; color: #3730a3; }
.bdd-step-type-badge--add-botanicals { background: #f3e8ff; color: #7c3aed; }
.bdd-step-type-badge--add-water { background: #dbeafe; color: #1e40af; }
.bdd-step-type-badge--cool-down { background: #dbeafe; color: #1e40af; }
.bdd-step-type-badge--clean { background: #f3f4f6; color: #6b7280; }
.bdd-step-type-badge--other { background: #f3f4f6; color: #374151; }

.bdd-ccp-badge { padding: 1px 5px; border-radius: 6px; font-size: 10px; font-weight: 600; background: #fee2e2; color: #991b1b; }
.bdd-qc-badge { padding: 1px 5px; border-radius: 6px; font-size: 10px; font-weight: 600; background: #dbeafe; color: #1e40af; }
.bdd-step-meta { font-size: 11px; color: var(--gray-400); }
.bdd-step-desc { margin: 0; font-size: 13px; color: var(--gray-700); }
.bdd-step-sub { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.bdd-step-sub-alt { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.bdd-step-action { flex-shrink: 0; }
.bdd-record-btn { font-size: 11px; white-space: nowrap; }
.bdd-step-done-label { font-size: 11px; color: #059669; font-weight: 600; }
.bdd-step-actual-summary { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: #d1fae5; font-size: 11px; color: #065f46; }

/* Run-type badge — fixed 2-value enum (SPIRIT/STRIPPING) + default. */
.bdd-runtype-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-left: 4px; background: #f3f4f6; color: #374151; }
.bdd-runtype-badge--spirit { background: #dbeafe; color: #1e40af; }
.bdd-runtype-badge--stripping { background: #fef3c7; color: #92400e; }

/* Status badge — fixed 5-value enum + default. */
.bdd-status-badge { display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; background: #f3f4f6; color: #374151; }
.bdd-status-badge--ready { background: #fef3c7; color: #92400e; }
.bdd-status-badge--distilling { background: #dbeafe; color: #1e40af; }
.bdd-status-badge--completed { background: #d1fae5; color: #065f46; }
.bdd-status-badge--failed { background: #fee2e2; color: #991b1b; }
.bdd-status-badge--reversed { background: #f3f4f6; color: #6b7280; }

/* blending-process-detail.js */

.blpd-id-mono {
  font-family: monospace;
  font-size: 13px;
  color: var(--gray-500);
}

.blpd-badges-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.blpd-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

/* .card has no base CSS rule anywhere in the stylesheet set, so bare
   classes on .card and its children (h3, etc.) are safe. */
.blpd-h3 {
  margin-bottom: 12px;
}

.blpd-h3-m0 {
  margin: 0;
}

.blpd-link {
  color: #2563eb;
}

.blpd-empty-note {
  color: var(--gray-400);
  font-size: 13px;
}

.blpd-result-box {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--wa-color-success-50, #f0fdf4);
  border-radius: 6px;
  border: 1px solid var(--wa-color-success-80, #bbf7d0);
}

.blpd-result-label {
  font-size: 13px;
}

.blpd-result-lot-link {
  color: #2563eb;
  text-decoration: none;
  font-family: monospace;
  font-size: 12px;
  margin-left: 4px;
}

.blpd-card-mt {
  margin-top: 24px;
}

.blpd-fw-400 {
  font-weight: 400;
}

.blpd-fw-500 {
  font-weight: 500;
}

.blpd-fw-600 {
  font-weight: 600;
}

.blpd-event-details-cell {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blpd-error-text {
  color: red;
}

.blpd-new-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.blpd-span-2 {
  grid-column: span 2;
}

.blpd-actions-end {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.blpd-recipe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.blpd-scale-badge {
  font-size: 13px;
  padding: 4px 12px;
  background: var(--wa-color-brand-95);
  border-radius: 6px;
  color: var(--wa-color-brand-30);
}

.blpd-table-scroll {
  overflow-x: auto;
}

/* .list-table sets width/border-collapse/table-layout only (list-view.css);
   it never sets margin, so a bare override is safe. */
.blpd-table-flush {
  margin: 0;
}

/* .list-table th sets text-align:left at (class,element) = (0,1,1)
   specificity (list-view.css), which a bare (0,1,0) class cannot beat
   regardless of source order. Compound to win. */
.list-table th.blpd-th-right {
  text-align: right;
}

/* .list-table th does not set width, so this bare class is safe. */
.blpd-th-narrow {
  width: 40px;
}

/* .list-table td does not set text-align (list-view.css only sets
   padding/border-bottom/font-size/color), so bare overrides are safe
   for both list-table and plain <td>/<th> elements below. */
.blpd-ta-right {
  text-align: right;
}

.blpd-ta-right-muted {
  text-align: right;
  color: var(--gray-400);
}

.blpd-steps-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blpd-readings-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blpd-step-card {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--wa-color-neutral-80);
  background: var(--wa-color-neutral-50);
}

.blpd-step-card.blpd-step-card--completed {
  border-color: var(--wa-color-success-70);
  background: var(--wa-color-success-50);
}

.blpd-step-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.blpd-step-number {
  font-weight: 600;
  font-size: 14px;
  margin-right: 8px;
}

.blpd-step-desc {
  margin: 6px 0 4px;
  font-size: 14px;
}

.blpd-step-ingredients {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.blpd-additions-box {
  margin-bottom: 4px;
  padding: 4px 8px;
  background: var(--wa-color-success-50, #f0fdf4);
  border-radius: 4px;
  font-size: 12px;
}

.blpd-addition-row {
  margin-top: 1px;
}

.blpd-targets-table {
  font-size: 12px;
  border-collapse: collapse;
  margin-top: 6px;
  width: 100%;
}

.blpd-targets-header-row {
  color: var(--gray-500);
}

.blpd-target-th-label {
  text-align: left;
  padding: 2px 8px 2px 0;
  font-weight: 500;
}

.blpd-target-th {
  text-align: right;
  padding: 2px 8px;
  font-weight: 500;
}

.blpd-target-td-label {
  padding: 2px 8px 2px 0;
  font-weight: 500;
}

.blpd-target-td {
  text-align: right;
  padding: 2px 8px;
}

/* Two-state enum (has an actual reading vs not) — modifier class per
   the fixed-enum convention rather than an inline computed color. */
.blpd-target-actual {
  text-align: right;
  padding: 2px 8px;
  font-weight: 600;
  color: var(--gray-300);
}

.blpd-target-actual.blpd-target-actual--filled {
  color: var(--wa-color-success-30);
}

.blpd-actual-notes {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}

.blpd-step-notes {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
}

.blpd-reading-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--wa-color-neutral-50);
  border-radius: 4px;
}

.blpd-reading-value {
  font-weight: 600;
}

.blpd-reading-time {
  font-size: 12px;
  color: var(--gray-500);
}

.blpd-reading-notes {
  font-size: 12px;
  color: var(--gray-500);
  padding-left: 8px;
  margin-bottom: 4px;
}

.blpd-mono-12 {
  font-family: monospace;
  font-size: 12px;
}

.blpd-remove-btn {
  height: 24px;
  min-width: 24px;
  padding: 0;
}

.blpd-remove-icon {
  font-size: 12px;
}

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

/* Dialog widths — wa-dialog's --width custom property, one utility per
   value shared across the file's several dialogs. */
.blpd-w-400 {
  --width: 400px;
}
.blpd-w-440 {
  --width: 440px;
}
.blpd-w-480 {
  --width: 480px;
}
.blpd-w-520 {
  --width: 520px;
}

.blpd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.blpd-dialog-grid {
  display: grid;
  gap: 12px;
}

.blpd-two-col-fields,
.blpd-partial-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.blpd-card-radio-title {
  font-size: 14px;
  font-weight: 500;
}

.blpd-card-radio-help {
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}

.blpd-customer-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.blpd-customer-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--wa-color-brand-40);
}

#comp-partial-fields.is-hidden,
#complete-tank-fields.is-hidden,
#complete-barrel-fields.is-hidden {
  display: none;
}

.blpd-water-calc-box {
  padding: 10px 12px;
  background: var(--wa-color-brand-95, #eff6ff);
  border-radius: 6px;
  border: 1px solid var(--wa-color-brand-80, #bfdbfe);
}
.blpd-water-error.is-hidden {
  display: none;
}

.blpd-water-calc-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.blpd-water-calc-text {
  font-size: 13px;
}

.blpd-water-calc-result {
  font-size: 16px;
  font-weight: 600;
  color: var(--wa-color-brand-30, #1d4ed8);
  margin-top: 4px;
}

.blpd-step-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.blpd-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.blpd-checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: var(--wa-color-brand-40);
}

.blpd-checkbox-text {
  font-size: 14px;
}

.blpd-hint-text {
  font-size: 13px;
  color: var(--gray-600);
}

.blpd-h3-additions {
  margin-top: 16px;
}

/* statusBadge() fixed 8-value status enum + unrecognized-status
   fallback ("default"), converted from an inline computed style
   string to base + modifier classes. */
.blpd-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.blpd-badge--created,
.blpd-badge--default {
  background: #f3f4f6;
  color: #374151;
}

.blpd-badge--blending {
  background: #dbeafe;
  color: #1e40af;
}

.blpd-badge--quality-review,
.blpd-badge--reversed {
  background: #fef3c7;
  color: #92400e;
}

.blpd-badge--approved {
  background: #d1fae5;
  color: #065f46;
}

.blpd-badge--completed {
  background: #a7f3d0;
  color: #047857;
}

.blpd-badge--rejected {
  background: #fee2e2;
  color: #991b1b;
}

.blpd-badge--cancelled {
  background: #f3f4f6;
  color: #6b7280;
}

.blpd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.blpd-info-label {
  font-size: 13px;
  color: var(--gray-500);
}

/* continuous-distillation-detail.js */

/* Generic spacing / layout utilities. .card, .list-table, h3, p, span, div
   here have no base rule anywhere in the stylesheet set for these
   properties, so bare classes are safe (verified via grep across
   main.css / list-view.css / detail-view.css / dialog.css / auth.css). */
.cdd-m0 { margin: 0; }
.cdd-mt-8 { margin-top: 8px; }
.cdd-mt-12 { margin-top: 12px; }
.cdd-mt-24 { margin-top: 24px; }
.cdd-mb-4 { margin-bottom: 4px; }
.cdd-mb-12 { margin-bottom: 12px; }
.cdd-fs-12 { font-size: 12px; }
.cdd-fw-500 { font-weight: 500; }
.cdd-fw-600 { font-weight: 600; }
.cdd-scroll-x { overflow-x: auto; }
.cdd-flex-between { display: flex; justify-content: space-between; align-items: center; }
.cdd-flex-wrap-gap8 { display: flex; flex-wrap: wrap; gap: 8px; }
.cdd-tabular-nums { font-variant-numeric: tabular-nums; }
.cdd-tabular-nums-gray { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.cdd-gray400-text { color: var(--gray-400); }
.cdd-accent-text { color: var(--primary-600, #155eef); }
.cdd-error-text { color: red; }

/* .list-table th sets text-align:left at (0,1,1) in list-view.css (loaded
   after main.css), so overriding to right needs a compound selector that
   matches specificity; .list-table td has no base text-align so the bare
   class is enough there, but included as a compound too for clarity. */
.list-table th.cdd-ta-right,
.list-table td.cdd-ta-right {
  text-align: right;
}

/* Detail header run id + status badge line. */
.cdd-run-id { font-family: monospace; font-size: 13px; color: var(--gray-500); }
/* WORK-429 — run-code header row + edit affordance. */
.cdd-run-code-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cdd-run-code { font-family: monospace; font-size: 15px; font-weight: 600; }
.cdd-form-stack { display: flex; flex-direction: column; gap: 12px; }

/* Small fixed enum: run status. Converted from the dynamic inline
   `${style}` built off a JS object keyed by status (idle/running/paused/
   ended/failed/reversed) per the fixed-enum convention. */
.cdd-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.cdd-status-badge--idle { background: #f3f4f6; color: #374151; }
.cdd-status-badge--running { background: #dbeafe; color: #1e40af; }
.cdd-status-badge--paused { background: #fef3c7; color: #92400e; }
.cdd-status-badge--ended { background: #d1fae5; color: #065f46; }
.cdd-status-badge--failed { background: #fee2e2; color: #991b1b; }
.cdd-status-badge--reversed { background: #f3f4f6; color: #374151; }

/* Details grid + card layout. */
.cdd-details-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }

/* Dialog --width custom-property assignments (one class per size used). */
.cdd-dialog-560 { --width: 560px; }
.cdd-dialog-500 { --width: 500px; }
.cdd-dialog-480 { --width: 480px; }
.cdd-dialog-420 { --width: 420px; }
.cdd-dialog-440 { --width: 440px; }
.cdd-dialog-400 { --width: 400px; }
.cdd-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* Event History card. */
.cdd-event-details-cell { font-size: 12px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* KPI header. */
.cdd-kpi-tile { background: var(--wa-color-neutral-95, #fff); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; }
.cdd-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.cdd-kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.cdd-kpi-unit { font-size: 11px; color: var(--gray-400); }
.cdd-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 20px; }

/* Action bar. */
.cdd-action-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Receiving Vessels card. */
.cdd-note-mb12 { font-size: 11px; color: var(--gray-400); margin: 0 0 12px; }
.cdd-receiver-list { display: flex; flex-direction: column; gap: 8px; }
.cdd-receiver-card { border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px 12px; }
.cdd-receiver-stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray-600); margin-top: 6px; }
.cdd-fs12-gray500 { font-size: 12px; color: var(--gray-500); }
.cdd-empty-note { color: var(--gray-400); font-size: 13px; }

/* TTB classification rollup card. */
.cdd-unanchored-badge { font-size: 10px; color: var(--wa-color-warning-40, #b77708); }

/* Created Spirit Lots card. */
.cdd-spirit-lot-link {
  padding: 4px 12px;
  background: var(--wa-color-success-50, #f0fdf4);
  border: 1px solid var(--wa-color-success-80, #bbf7d0);
  border-radius: 6px;
  font-family: monospace;
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}

/* Reporting Period card. */
.cdd-note-mt10 { font-size: 11px; color: var(--gray-400); margin: 10px 0 0; }

/* Feedstock Charged / Inputs / Outputs table cells. */
.cdd-kind-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: #f3f4f6; color: #374151; }
.cdd-mono-12 { font-family: monospace; font-size: 12px; }

/* Live Readings tiles + history table. */
.cdd-reading-tile { border: 1px solid var(--gray-200); border-radius: 8px; padding: 9px 11px; }
.cdd-reading-label { font-size: 11px; color: var(--gray-500); }
.cdd-reading-value { font-size: 17px; font-weight: 700; margin-top: 2px; }
.cdd-reading-unit { font-size: 11px; color: var(--gray-400); font-weight: 500; }
.cdd-readings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cdd-reading-tiles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cdd-history-label { margin-top: 16px; font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.cdd-history-scroll { overflow-x: auto; margin-top: 6px; }

/* Dialog shared bits. */
.cdd-form-grid { display: grid; gap: 12px; }
.cdd-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cdd-dialog-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cdd-dialog-row-label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.cdd-dialog-copy { font-size: 13px; color: var(--gray-600); }

/* Gauge Output dialog: Simple/Detailed segmented toggle. Small fixed
   2-value enum (active/inactive) — converted to modifier classes toggled
   via classList rather than left as a CSSOM write, even though the
   target elements' own markup carries the initial style attribute. */
.cdd-mode-toggle { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; width: max-content; font-size: 13px; font-weight: 600; }
.cdd-mode-btn { padding: 6px 14px; border: none; cursor: pointer; }
.cdd-mode-btn--active { background: var(--primary-600, #155eef); color: #fff; }
.cdd-mode-btn--inactive { background: #fff; color: var(--gray-600); }

.cdd-pg-readout { background: var(--wa-color-success-50, #e9f8f0); border: 1px solid var(--wa-color-success-80, #a7e3c6); border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.cdd-pg-readout-label { font-size: 12px; font-weight: 600; color: var(--wa-color-success-30, #0f8a56); }
.cdd-pg-readout-value { font-size: 20px; font-weight: 700; color: var(--wa-color-success-30, #0f8a56); }

/* Detailed-mode panel: was `style="display:none;..."` toggled via
   `.style.display` CSSOM write in JS — converted to the is-hidden
   classList-toggle convention since the element carries its own initial
   style attribute. */
.cdd-gauge-detail { border-top: 1px dashed var(--gray-200); padding-top: 12px; }
.cdd-gauge-detail.is-hidden,
#cd-create-error.is-hidden,
#unit-save-error.is-hidden,
#ss-create-error.is-hidden,
#purpose-error.is-hidden,
#out-weight-wrap.is-hidden,
#out-volume-wrap.is-hidden,
#out-error.is-hidden,
#cp-error.is-hidden,
#end-error.is-hidden,
#spirit-error.is-hidden { display: none; }

.cdd-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 10px; font-size: 13px; }
.cdd-checkbox-input { width: 16px; height: 16px; accent-color: var(--primary-600, #155eef); }

.pg-dialog-720 { --width: 720px; }
.cdd-note-mt8 { font-size: 11px; color: var(--gray-400); margin: 8px 0 0; }

/* Close Reporting Period dialog. */
.cdd-note-m0 { font-size: 11px; color: var(--gray-400); margin: 0; }
.cdd-period-ok-banner { background: var(--wa-color-success-50, #e9f8f0); border: 1px solid var(--wa-color-success-80, #a7e3c6); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.cdd-period-warn-banner { background: var(--wa-color-warning-50, #fffbeb); border: 1px solid var(--wa-color-warning-80, #fcd34d); border-radius: 8px; padding: 10px 12px; font-size: 13px; }

/* Record Readings dialog. */
.cdd-reading-section-label { font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.cdd-reading-section-label--spaced { margin-top: 4px; }

/* End Run dialog. */
.cdd-end-preview-box { border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px; background: var(--gray-50); }
.cdd-end-preview-title { font-size: 12px; color: var(--gray-700); }
.cdd-end-preview-list { display: grid; gap: 4px; margin-top: 6px; }
.cdd-end-preview-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 12px; align-items: center; }
.cdd-end-preview-empty { font-size: 12px; color: var(--gray-500); margin: 6px 0 0 0; }

/* renderNew() form. */
.cdd-new-form-grid { display: grid; gap: 16px; max-width: 520px; }

/* Helpers: infoRow(). */
.cdd-info-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.cdd-info-row-label { font-size: 13px; color: var(--gray-500); }

/* distillation-profile-detail.js */

/* ── Header / cards layout ─────────────────────────────────────────────── */
.dpd-id-mono {
  font-family: monospace;
  font-size: 13px;
  color: var(--gray-500);
}
.dpd-mt-8 {
  margin-top: 8px;
}
.dpd-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
/* .card has no base CSS rule anywhere in the stylesheet set, so a bare
   margin-top class on a .card element is safe (established pattern). */
.dpd-section-mt {
  margin-top: 24px;
}
.dpd-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dpd-h3-mb {
  margin-bottom: 12px;
}
.dpd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dpd-error-text {
  color: red;
}

/* ── Active/inactive status badge ──────────────────────────────────────── */
.dpd-active-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
}
.dpd-active-badge--active { background: #d1fae5; color: #065f46; }
.dpd-active-badge--inactive { background: #f3f4f6; color: #6b7280; }

/* ── Classification badge (fixed enum) ─────────────────────────────────── */
.dpd-class-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.dpd-class-badge--bourbon { background: #fef3c7; color: #92400e; }
.dpd-class-badge--gin { background: #f3e8ff; color: #7c3aed; }
.dpd-class-badge--vodka { background: #e0e7ff; color: #3730a3; }
.dpd-class-badge--rum { background: #fce7f3; color: #9d174d; }
.dpd-class-badge--brandy { background: #fef3c7; color: #78350f; }
.dpd-class-badge--aquavit { background: #d1fae5; color: #065f46; }
.dpd-class-badge--whiskey { background: #fef3c7; color: #92400e; }
.dpd-class-badge--default { background: #f3f4f6; color: #374151; }

/* ── Run type badge (fixed enum) ────────────────────────────────────────── */
.dpd-run-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dpd-run-badge--spirit { background: #dbeafe; color: #1e40af; }
.dpd-run-badge--stripping { background: #fef3c7; color: #92400e; }
.dpd-run-badge--default { background: #f3f4f6; color: #374151; }

/* ── Input type badge (fixed enum) ─────────────────────────────────────── */
.dpd-input-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dpd-input-badge--wash { background: #fef3c7; color: #92400e; }
.dpd-input-badge--low-wines { background: #fce7f3; color: #9d174d; }
.dpd-input-badge--heads { background: #fef3c7; color: #92400e; }
.dpd-input-badge--tails { background: #fee2e2; color: #991b1b; }
.dpd-input-badge--feints { background: #e0e7ff; color: #3730a3; }
.dpd-input-badge--gns { background: #d1fae5; color: #065f46; }
.dpd-input-badge--water { background: #dbeafe; color: #1e40af; }
.dpd-input-badge--botanical { background: #f3e8ff; color: #7c3aed; }
.dpd-input-badge--default { background: #f3f4f6; color: #374151; }

/* ── Cut-type badge (expected outputs table — always same fixed style,
   no branching on cut_type value) ─────────────────────────────────────── */
.dpd-cut-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #e5e7eb;
  color: #374151;
}

/* ── Table helpers ──────────────────────────────────────────────────────── */
.dpd-table-scroll {
  overflow-x: auto;
}
.dpd-table-flush {
  margin: 0;
}
.dpd-table-flush-sm {
  margin: 0;
  font-size: 13px;
}
.dpd-col-right {
  text-align: right;
}
/* .list-table th already sets text-align:left at (class, element)
   specificity, which beats a bare .dpd-col-right class on the same <th> —
   this compound override wins without touching the shared list-table
   rule (see list-view.css / established .so-col-right pattern). */
.list-table th.dpd-col-right {
  text-align: right;
}
.dpd-cell-strong {
  font-weight: 500;
}
.dpd-empty-text {
  color: var(--gray-400);
  font-size: 13px;
}
/* .list-table td sets font-size at (class,element) specificity, which
   beats a bare class — compound selector needed to win (see the
   .list-table th/td trap noted throughout main.css). */
.list-table td.dpd-cell-truncate {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Read-only steps list ──────────────────────────────────────────────── */
.dpd-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dpd-step-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px;
  background: var(--gray-50);
}
.dpd-step-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dpd-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-200);
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-700);
}
/* Step-type badge (fixed enum keyed by STEP_TYPE_BADGE_CLASS) */
.dpd-step-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.dpd-step-badge--charge { background: #e0e7ff; color: #3730a3; }
.dpd-step-badge--heat { background: #fee2e2; color: #991b1b; }
.dpd-step-badge--equilibrate { background: #fef3c7; color: #92400e; }
.dpd-step-badge--foreshots { background: #f3f4f6; color: #374151; }
.dpd-step-badge--collect-heads { background: #fef3c7; color: #92400e; }
.dpd-step-badge--collect-hearts { background: #d1fae5; color: #065f46; }
.dpd-step-badge--collect-tails { background: #fee2e2; color: #991b1b; }
.dpd-step-badge--collect-low-wines { background: #fce7f3; color: #9d174d; }
.dpd-step-badge--collect-feints { background: #e0e7ff; color: #3730a3; }
.dpd-step-badge--add-botanicals { background: #f3e8ff; color: #7c3aed; }
.dpd-step-badge--add-water { background: #dbeafe; color: #1e40af; }
.dpd-step-badge--cool-down { background: #dbeafe; color: #1e40af; }
.dpd-step-badge--clean { background: #f3f4f6; color: #6b7280; }
.dpd-step-badge--other { background: #f3f4f6; color: #374151; }
.dpd-step-badge--default { background: #f3f4f6; color: #374151; }
.dpd-ccp-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: #fee2e2;
  color: #991b1b;
}
.dpd-qc-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: #dbeafe;
  color: #1e40af;
}
.dpd-step-duration {
  font-size: 12px;
  color: var(--gray-500);
  margin-left: auto;
}
.dpd-muted-12 {
  font-size: 12px;
  color: var(--gray-500);
}
.dpd-step-desc {
  margin: 0 0 8px 36px;
  font-size: 13px;
  color: var(--gray-700);
}
.dpd-step-yield {
  margin-left: 36px;
  font-size: 12px;
  color: var(--gray-500);
}
.dpd-indent-mt8 {
  margin: 8px 0 0 36px;
}
.dpd-additions-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
}
.dpd-addition-badge {
  display: inline-block;
  margin: 2px 4px;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  background: #f3e8ff;
  color: #7c3aed;
}
.dpd-ca-label {
  font-size: 11px;
  font-weight: 600;
  color: #991b1b;
}
.dpd-ca-summary-list {
  margin: 4px 0 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--gray-600);
}
.dpd-data-points {
  margin: 4px 0 0 36px;
  font-size: 11px;
  color: var(--gray-400);
}
.dpd-step-notes {
  margin: 4px 0 0 36px;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}
.dpd-decision-summary {
  margin: 4px 0 0 36px;
  font-size: 12px;
  color: var(--gray-600);
}

/* ── Edit Info dialog ───────────────────────────────────────────────────── */
.dpd-info-grid {
  display: grid;
  gap: 14px;
}
.dpd-info-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.dpd-hint-text {
  font-size: 13px;
  color: var(--gray-500);
}
.dpd-runtime-row {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--gray-600);
}
.dpd-pooled-caption {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--gray-500);
}
.dpd-dash-muted {
  color: var(--gray-400);
}
/* Conditional show/hide fields (runs-to-pool / time-basis / output-basis
   selects) — toggled via classList in JS, not .style.display. There is no
   global .is-hidden rule, so this is scoped to the toggle-field class. */
.dpd-toggle-field.is-hidden {
  display: none;
}

/* ── Edit Inputs dialog ─────────────────────────────────────────────────── */
.dpd-inputs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.dpd-btn-group {
  display: flex;
  gap: 6px;
}

/* ── Edit Steps dialog ──────────────────────────────────────────────────── */
.dpd-steps-dialog-content {
  max-height: 70vh;
  overflow-y: auto;
}
.dpd-step-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.dpd-step-number-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-300);
  font-weight: 700;
  font-size: 13px;
}
.dpd-step-type-select {
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.dpd-step-controls {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}
.dpd-move-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
}
.dpd-remove-step-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
}
.dpd-mb-10 {
  margin-bottom: 10px;
}
.dpd-description-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
}
.dpd-fields-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.dpd-field-label-sm {
  font-size: 11px;
  color: var(--gray-500);
}
.dpd-field-input {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.dpd-checkbox-row {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}
.dpd-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
}
.dpd-criteria-details {
  margin-bottom: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px 12px;
  background: white;
}
.dpd-criteria-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
}
.dpd-criteria-grid-3-mt8 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.dpd-criteria-grid-3-mt6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.dpd-criteria-grid-2-mt6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.dpd-mt-6 {
  margin-top: 6px;
}
.dpd-criteria-label {
  font-size: 10px;
  color: var(--gray-400);
}
.dpd-criteria-input {
  width: 100%;
  padding: 4px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 12px;
}
.dpd-ca-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}
.dpd-ca-input {
  padding: 4px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 12px;
}
.dpd-ca-remove-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 14px;
}
.dpd-add-ca-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}

.dpd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Dialog width variables ─────────────────────────────────────────────── */
.dpd-dialog-w600 { --width: 600px; }
.dpd-dialog-w700 { --width: 700px; }
.dpd-dialog-w900 { --width: 900px; }

/* import-wizard.js */

/* Shell / panel width helpers */
.detail-view.imw-wizard-shell { max-width: 1000px; }
.detail-header h1.imw-wizard-title { font-size: 20px; font-weight: 700; }

.imw-panel--md { max-width: 700px; margin: 0 auto; }
.imw-panel--lg { max-width: 800px; margin: 0 auto; }
.imw-panel--xl { max-width: 900px; margin: 0 auto; }
.imw-panel--sm { max-width: 600px; margin: 0 auto; text-align: center; }

/* Generic spacing utilities (small recurring single-declaration blocks) */
.imw-mb-8 { margin-bottom: 8px; }
.imw-mb-16 { margin-bottom: 16px; }
.imw-mb-24 { margin-bottom: 24px; }
.imw-mt-8 { margin-top: 8px; }
.imw-mt-24 { margin-top: 24px; }

/* Step indicator */
.imw-step-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 32px; }
.imw-step-item { display: flex; align-items: center; gap: 8px; }
.imw-step-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.imw-step-circle--current { background: var(--wa-color-brand-40); color: white; }
.imw-step-circle--done { background: var(--wa-color-success-90); color: var(--wa-color-success-30); }
.imw-step-circle--pending { background: var(--wa-color-neutral-90); color: var(--wa-color-neutral-60); }
.imw-step-label { font-size: 13px; font-weight: 500; color: var(--wa-color-neutral-50); }
.imw-step-label--current { color: var(--wa-color-brand-20); }
.imw-step-connector { width: 40px; height: 2px; background: var(--wa-color-neutral-80); }

/* Shared layout primitives */
.imw-section-heading { margin-bottom: 12px; font-size: 14px; color: var(--wa-color-neutral-40); }
.imw-subheading { font-size: 13px; margin-bottom: 8px; }
.imw-hint-text { font-size: 12px; color: var(--wa-color-neutral-50); }
.imw-footnote { font-size: 11px; color: var(--wa-color-neutral-60); margin-top: 6px; }
.imw-required-mark { color: var(--wa-color-danger-40); }
.imw-two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.imw-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }

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

.imw-btn-primary { padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: #2563eb; color: #fff; }
.imw-btn-primary.is-disabled { background: #e5e7eb; color: #9ca3af; }
.imw-btn-outline { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; font-size: 14px; }
.imw-btn-outline-sm { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 12px; }

.imw-table { width: 100%; border-collapse: collapse; }
.imw-table--13 { font-size: 13px; }
.imw-table--12 { font-size: 12px; }
.imw-thead-row--sticky { background: var(--wa-color-neutral-50); position: sticky; top: 0; }
.imw-thead-row--plain { background: var(--wa-color-neutral-50); }
.imw-th-sm { padding: 4px 8px; text-align: left; font-size: 11px; }
.imw-th-left { padding: 6px 12px; text-align: left; }

/* Step 1: type selection */
.imw-type-card { padding: 16px; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; background: white; transition: border-color 0.15s, background 0.15s; }
.imw-type-card--selected { border-color: #2563eb; background: #dbeafe; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.imw-type-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.imw-type-card-title--selected { color: #1d4ed8; }
.imw-type-card-meta { font-size: 12px; color: #6b7280; }

/* Run history (step 1 footer) */
.imw-run-history { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--wa-color-neutral-80); }
.imw-muted-text { font-size: 13px; color: var(--wa-color-neutral-50); }
.imw-thead-row--history { text-align: left; color: var(--wa-color-neutral-40); border-bottom: 1px solid var(--wa-color-neutral-80); }
.imw-th { padding: 6px 8px; font-weight: 500; }
.imw-th--right { text-align: right; }
.imw-dash-muted { color: var(--wa-color-neutral-60); }
.imw-history-row { border-bottom: 1px solid var(--wa-color-neutral-90); }
.imw-td { padding: 6px 8px; color: var(--wa-color-neutral-30); }
.imw-td--right { text-align: right; }
.imw-td-compact { padding: 6px 8px; }

/* Step 2: upload */
.imw-upload-intro { margin-bottom: 16px; }
.imw-upload-intro-title { font-weight: 600; margin-bottom: 4px; }
.imw-drop-zone { border: 2px dashed var(--wa-color-neutral-70); border-radius: 8px; padding: 32px; text-align: center; cursor: pointer; margin-bottom: 12px; transition: border-color 0.2s, background 0.2s; }
.imw-drop-zone--dragover { border-color: var(--wa-color-brand-50); background: var(--wa-color-brand-95); }
.imw-drop-zone-icon { font-size: 24px; color: var(--wa-color-neutral-60); margin-bottom: 8px; }
.imw-drop-zone-text { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.imw-file-input { display: none; }
.imw-paste-label { margin-bottom: 8px; font-size: 13px; color: var(--wa-color-neutral-50); }
.imw-csv-textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; border: 1px solid var(--wa-color-neutral-70); border-radius: 6px; padding: 8px; resize: vertical; }
.imw-mode-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.imw-columns-panel { max-height: 360px; overflow-y: auto; border: 1px solid var(--wa-color-neutral-80); border-radius: 6px; }
.imw-format-label { padding: 4px 8px; font-size: 12px; font-weight: 400; }
.imw-format-label--required { font-weight: 600; }
.imw-format-field { padding: 4px 8px; font-size: 11px; font-family: monospace; color: var(--wa-color-neutral-50); }
.imw-format-note { padding: 4px 8px; font-size: 11px; color: var(--wa-color-neutral-40); }

/* Step 3: map & preview */
.imw-bg-danger-50 { background: var(--wa-color-danger-50); }
.imw-bg-warning-50 { background: var(--wa-color-warning-50); }
.imw-mapping-label-cell { padding: 6px 12px; font-size: 13px; }
.imw-mapping-select-cell { padding: 6px 12px; }
.imw-mapping-select { width: 100%; padding: 4px 8px; border: 1px solid var(--wa-color-neutral-70); border-radius: 4px; font-size: 13px; }
.imw-stat-cards { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.imw-stat-card { padding: 8px 16px; border-radius: 6px; background: var(--wa-color-neutral-50); }
.imw-stat-card--success { background: var(--wa-color-success-50); }
.imw-stat-card--danger { background: var(--wa-color-danger-50); }
.imw-stat-card--warning { background: var(--wa-color-warning-50); }
.imw-stat-value { font-size: 20px; font-weight: 700; }
.imw-stat-value--success { color: var(--wa-color-success-30); }
.imw-stat-value--danger { color: var(--wa-color-danger-30); }
.imw-stat-value--warning { color: var(--wa-color-warning-30); }
.imw-stat-label { font-size: 12px; color: var(--wa-color-neutral-50); }
.imw-stat-label--success { color: var(--wa-color-success-40); }
.imw-stat-label--danger { color: var(--wa-color-danger-40); }
.imw-stat-label--warning { color: var(--wa-color-warning-40); }
.imw-issues-panel { margin-bottom: 16px; max-height: 200px; overflow-y: auto; border: 1px solid var(--wa-color-neutral-80); border-radius: 6px; padding: 8px; }
.imw-issue-error { color: var(--wa-color-danger-40); font-size: 12px; }
.imw-issue-warning { color: var(--wa-color-warning-40); font-size: 12px; }
.imw-alert-banner { border-radius: 6px; padding: 12px; margin-bottom: 16px; }
.imw-alert-banner--danger { background: var(--wa-color-danger-50); border: 1px solid var(--wa-color-danger-80); }
.imw-alert-banner--warning { background: var(--wa-color-warning-50); border: 1px solid var(--wa-color-warning-80); }
.imw-alert-strong--danger { color: var(--wa-color-danger-30); }
.imw-field-chip { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 4px; background: var(--wa-color-danger-90); color: var(--wa-color-danger-30); font-size: 12px; }
.imw-alert-note--danger { font-size: 12px; color: var(--wa-color-danger-40); margin-top: 4px; }
.imw-commingle-label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--wa-color-warning-10); cursor: pointer; }
.imw-commingle-checkbox { margin-top: 2px; flex: 0 0 auto; }
.imw-preview-scroll { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.imw-th-num { padding: 4px 8px; text-align: center; width: 24px; }
.imw-th-nowrap { padding: 4px 8px; text-align: left; white-space: nowrap; }
.imw-th-action { padding: 4px 8px; text-align: left; }
.imw-th-status { padding: 4px 8px; }
.imw-td-rownum { padding: 4px 8px; text-align: center; color: var(--wa-color-neutral-60); font-size: 11px; }
.imw-td-clip { padding: 4px 8px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.imw-td-nowrap { padding: 4px 8px; white-space: nowrap; }
.imw-td-clip-wide { padding: 4px 8px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.imw-td-center { padding: 4px 8px; text-align: center; }

/* Step 4: results */
.imw-result-icon { font-size: 48px; margin-bottom: 16px; }
.imw-result-subtitle { color: var(--wa-color-neutral-50); margin-bottom: 24px; }
.imw-stat-row { display: flex; justify-content: center; gap: 24px; margin-bottom: 24px; }
.imw-result-card { padding: 16px 24px; border-radius: 8px; }
.imw-result-card--success { background: var(--wa-color-success-50); }
.imw-result-card--neutral { background: var(--wa-color-neutral-50); }
.imw-result-value { font-size: 28px; font-weight: 700; }
.imw-result-value--success { color: var(--wa-color-success-30); }
.imw-result-value--neutral { color: var(--wa-color-neutral-40); }
.imw-result-label { font-size: 13px; }
.imw-result-label--success { color: var(--wa-color-success-40); }
.imw-result-label--neutral { color: var(--wa-color-neutral-50); }
.imw-error-panel { text-align: left; background: var(--wa-color-danger-50); border: 1px solid var(--wa-color-danger-80); border-radius: 6px; padding: 12px; margin-bottom: 24px; max-height: 200px; overflow-y: auto; }
.imw-error-panel-title { font-weight: 600; color: var(--wa-color-danger-30); margin-bottom: 8px; }
.imw-error-line { font-size: 12px; color: var(--wa-color-danger-40); margin-bottom: 4px; }

/* mashing-detail.js */

.mshd-batch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.mshd-batch-code {
  font-family: monospace;
  font-size: 15px;
  font-weight: 600;
}
.mshd-process-id {
  font-family: monospace;
  font-size: 11px;
  color: var(--gray-500);
}
.mshd-badges-row {
  margin-top: 8px;
}
.mshd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.mshd-h3 {
  margin-bottom: 12px;
}
.mshd-h3-tight {
  margin-bottom: 8px;
}
/* class="card" carries no base CSS rule anywhere in the stylesheet set
   (verified via grep), so bare margin-top/border/background classes on
   a .card element are safe -- no compound needed. */
.mshd-card {
  margin-top: 24px;
}
.mshd-card--next-step {
  border: 2px solid var(--wa-color-brand-80, #93c5fd);
  background: var(--wa-color-brand-95, #eff6ff);
}
.mshd-card--reversed {
  border: 1px solid #fecaca;
  background: #fef2f2;
}
.mshd-reversed-title {
  margin-bottom: 4px;
  color: #991b1b;
}
.mshd-reversed-text {
  font-size: 13px;
  color: #991b1b;
  margin: 0;
}
.mshd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* .btn-secondary sets color at (0,1,0) specificity, same as a bare
   modifier class -- compound to guarantee the override wins regardless
   of source order in the assembled main.css (established convention,
   see .btn-secondary.bad-btn-danger etc. elsewhere in this file). */
.btn-secondary.mshd-danger-btn {
  color: #dc2626;
  border-color: #dc2626;
}
.mshd-note {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 12px;
}
.mshd-note-sm {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px;
}

/* Modal overlay + inner box for the mash-dialog-overlay flow. Many JS
   sites toggle overlay.style.display between 'flex' and 'none' -- all
   converted to classList toggles against this is-hidden compound since
   the overlay carries its own initial style attribute in this file's
   markup. Default state in the markup is hidden. */
.mshd-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mshd-dialog-overlay.is-hidden {
  display: none;
}
.mshd-dialog-box {
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Dialog widths -- wa-dialog's --width custom property. */
.mshd-w-560 {
  --width: 560px;
}
.mshd-w-420 {
  --width: 420px;
}

.mshd-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mshd-form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mshd-cell-strong {
  font-weight: 500;
}
/* .list-table td sets font-size/color at (0,1,1) specificity, which
   beats a bare class -- compound needed to override font-size here. */
.list-table td.mshd-cell-truncate {
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mshd-error-text {
  color: red;
}

.mshd-table-mt12 {
  margin: 12px 0 0 0;
}
.mshd-table-flush {
  margin: 0;
}
/* .list-table th sets text-align:left at (0,1,1) -- compound required
   to win regardless of source order. */
.list-table th.mshd-col-right {
  text-align: right;
}
/* .list-table td does not set text-align, so a bare class is safe. */
.mshd-cell-right {
  text-align: right;
}
.list-table th.mshd-col-center {
  text-align: center;
}
.mshd-cell-center {
  text-align: center;
}
.mshd-col-w40 {
  width: 40px;
}
.mshd-col-w50 {
  width: 50px;
}
.mshd-col-w80 {
  width: 80px;
}

.mshd-subsection-title {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--gray-500);
}

/* Corrective-actions callout row shared by the SOP-steps and
   step-tracking tables. .list-table td sets padding/border-bottom at
   (0,1,1) -- compound required to override both. */
.list-table td.mshd-corrective-cell {
  padding: 4px 8px 8px 40px;
  background: var(--wa-color-warning-50, #fffbeb);
  border: none;
}
.mshd-corrective-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-color-warning-30, #a16207);
  margin-bottom: 4px;
}
.mshd-corrective-item {
  font-size: 12px;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid var(--wa-color-warning-80, #fde68a);
}

/* CCP/QC row tint (small fixed enum, was a conditional inline
   style="background:..." on the <tr>). .list-table tbody tr sets no
   background itself, but .list-table tbody tr:hover (list-view.css,
   loaded after main.css, specificity 0,2,2) would otherwise win on
   hover against an equal-specificity bare/compound class -- add
   explicit :hover pairs to preserve the original inline style's
   always-wins behavior (same pattern as .frd-row--ccp/qc elsewhere in
   this file). */
.list-table tbody tr.mshd-row--ccp {
  background: #fef3c7;
}
.list-table tbody tr.mshd-row--ccp:hover {
  background: #fef3c7;
}
.list-table tbody tr.mshd-row--qc {
  background: #eff6ff;
}
.list-table tbody tr.mshd-row--qc:hover {
  background: #eff6ff;
}
.list-table tbody tr.mshd-row--deviation {
  background: var(--wa-color-warning-50);
}
.list-table tbody tr.mshd-row--deviation:hover {
  background: var(--wa-color-warning-50);
}

.mshd-step-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
}
.mshd-ccp-label {
  color: #92400e;
  font-weight: 600;
}
.mshd-qc-label {
  color: #1e40af;
  font-weight: 600;
}
.mshd-deviation-icon {
  color: var(--wa-color-warning-40);
  font-size: 14px;
}
.mshd-completed-icon {
  color: var(--wa-color-success-40);
  font-size: 16px;
}
.mshd-muted-dash {
  color: var(--wa-color-neutral-70);
}
.mshd-notes-snippet {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
  margin-top: 2px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mshd-step-num-cell {
  text-align: center;
  font-weight: 600;
}
.mshd-record-btn {
  height: 28px;
  font-size: 12px;
}
.mshd-title-icon {
  margin-right: 6px;
}
.mshd-table-scroll {
  overflow-x: auto;
}

.mshd-additions-section {
  margin-top: 16px;
  border-top: 1px solid var(--wa-color-neutral-80);
  padding-top: 12px;
}
.mshd-section-label {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}
.mshd-addition-row {
  padding: 8px;
  margin-bottom: 8px;
  background: var(--wa-color-neutral-50);
  border-radius: 6px;
  border: 1px solid var(--wa-color-neutral-80);
}
.mshd-addition-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.mshd-addition-name {
  font-weight: 500;
  font-size: 13px;
}
.mshd-addition-planned {
  font-size: 11px;
  color: var(--wa-color-neutral-50);
}
.mshd-addition-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 8px;
}

.mshd-step-summary {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--wa-color-neutral-50);
  border-radius: 8px;
}
.mshd-step-summary-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.mshd-step-summary-desc {
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}
.mshd-step-summary-planned {
  margin-top: 8px;
  font-size: 12px;
  color: var(--wa-color-neutral-50);
}
.mshd-form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mshd-checkbox-wrap {
  display: flex;
  align-items: end;
  padding-bottom: 4px;
}
.mshd-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}
.mshd-checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: var(--wa-color-brand-40);
}
.mshd-corrective-ref-box {
  margin-top: 12px;
  padding: 8px;
  background: var(--wa-color-warning-50, #fffbeb);
  border-radius: 6px;
  border: 1px solid var(--wa-color-warning-80, #fde68a);
}
.mshd-corrective-ref-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--wa-color-warning-30, #a16207);
  margin-bottom: 4px;
}
.mshd-corrective-ref-item {
  font-size: 12px;
  margin-bottom: 4px;
}
.mshd-corrective-ref-notes {
  color: var(--wa-color-neutral-50);
  font-size: 11px;
}
.mshd-mt12 {
  margin-top: 12px;
}

.mshd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.mshd-info-label {
  font-size: 13px;
  color: var(--gray-500);
}
.mshd-equipment-link {
  color: #2563eb;
  text-decoration: none;
  font-family: monospace;
  font-size: 12px;
}
/* .list-table td sets font-size at (0,1,1) -- compound required to
   override it here. */
.list-table td.mshd-cell-mono {
  font-family: monospace;
  font-size: 12px;
}

.mshd-dialog-title {
  margin-bottom: 16px;
}
.mshd-field-row {
  margin-bottom: 12px;
}
.mshd-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.mshd-field-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}
.mshd-footer-end {
  display: flex;
  justify-content: flex-end;
}
.mshd-inline-error {
  color: #dc2626;
}
.mshd-note-plain {
  font-size: 13px;
}

/* Fixed 2-state error box (warning by default, danger for hard-block
   errors) -- was a .style.color/.background/.borderColor CSSOM write
   on an element with its own initial style attribute. Compound with
   the base class so the modifier wins regardless of source order. */
.mshd-charge-error {
  font-size: 13px;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 12px;
}
.mshd-charge-error.is-hidden {
  display: none;
}
.mshd-charge-error.mshd-charge-error--warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.mshd-charge-error.mshd-charge-error--danger {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* Status/type pill badges (small fixed enums) -- were template-built
   inline style="..." strings keyed off status/type. */
.mshd-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.mshd-status-badge--pending {
  background: #fef3c7;
  color: #92400e;
}
.mshd-status-badge--mash_in {
  background: #dbeafe;
  color: #1e40af;
}
.mshd-status-badge--conversion {
  background: #e0e7ff;
  color: #3730a3;
}
.mshd-status-badge--mash_out {
  background: #d1fae5;
  color: #065f46;
}
.mshd-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}
.mshd-status-badge--failed {
  background: #fee2e2;
  color: #991b1b;
}
.mshd-status-badge--default {
  background: #f3f4f6;
  color: #374151;
}
.mshd-type-badge--wort {
  background: #fce7f3;
  color: #9d174d;
}
.mshd-type-badge--mash {
  background: #fef3c7;
  color: #92400e;
}

/* onboarding-project-detail.js */

/* class="card" carries no other CSS rule in this codebase (confirmed via
   grep); bare class is safe here (no compound needed). Used on every
   top-level card wrapper in this view. */
.obpd-card {
  margin-bottom: 20px;
}

.obpd-start-card {
  border-left: 4px solid var(--primary-500);
  background: linear-gradient(135deg, var(--gray-50), white 70%);
}

.obpd-start-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.obpd-start-kicker {
  margin: 0 0 4px;
  color: var(--primary-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obpd-start-title {
  margin: 0;
  font-size: 20px;
}

.obpd-start-summary {
  margin: 10px 0 14px;
  color: var(--gray-600);
}

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

.obpd-start-step {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: white;
}

.obpd-start-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--primary-600);
  color: white;
  font-size: 12px;
  font-weight: 700;
}

.obpd-start-step p {
  margin: 3px 0 0;
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.4;
}

.obpd-start-note {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .obpd-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .obpd-start-header {
    flex-direction: column;
  }

  .obpd-start-grid {
    grid-template-columns: 1fr;
  }
}

.obpd-text-red {
  color: var(--red-500);
}

.obpd-text-muted {
  color: var(--gray-500);
}

.obpd-text-muted-lt {
  color: var(--gray-400);
}

.obpd-warn-line {
  color: #a16207;
  margin-top: 2px;
}

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

/* .detail-header (detail-view.css, loaded after this file) already sets
   display:flex;align-items:center;justify-content:space-between at
   (0,1,0) with the same values the old inline style duplicated — only
   gap is new, so a bare class covers it without a compound. */
.obpd-header-gap {
  gap: 16px;
}

.obpd-back-link {
  font-size: 13px;
  color: var(--gray-500);
  text-decoration: none;
}

.obpd-m-4-0 {
  margin: 4px 0;
}

.obpd-subtext {
  font-size: 13px;
  color: var(--gray-500);
}

.obpd-mono {
  font-family: monospace;
}

.obpd-mb-4 {
  margin-bottom: 4px;
}

.obpd-mb-8 {
  margin-bottom: 8px;
}

.obpd-mt-auto {
  margin-top: auto;
}

.obpd-mt-10 {
  margin-top: 10px;
}

.obpd-mt-12 {
  margin-top: 12px;
}

.obpd-mt-14 {
  margin-top: 14px;
}

.obpd-m-0 {
  margin: 0;
}

.obpd-fs-12 {
  font-size: 12px;
}

.obpd-fs-13 {
  font-size: 13px;
}

.obpd-fs12-muted {
  font-size: 12px;
  color: var(--gray-400);
}

.obpd-fs13-500 {
  font-size: 13px;
  font-weight: 500;
}

.obpd-muted-12 {
  font-size: 12px;
  color: var(--gray-500);
}

.obpd-text-cap {
  text-transform: capitalize;
}

/* ---------- conversion setup card ---------- */

.obpd-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.obpd-setup-item {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obpd-setup-item-title {
  font-weight: 600;
  font-size: 14px;
}

.obpd-setup-item-blurb {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 3px;
}

.obpd-setup-link {
  display: inline-block;
  font-size: 13px;
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 600;
}

.obpd-locked-text {
  font-size: 13px;
  color: var(--gray-400);
}

/* ---------- financial opening balances card ---------- */

.obpd-fo-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.obpd-fo-note {
  color: var(--gray-400);
  font-size: 13px;
  margin: 0;
}

.obpd-fo-intro {
  color: var(--gray-500);
  font-size: 13px;
  margin: 0 0 12px;
}

.obpd-fo-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.obpd-textarea-mono {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-family: monospace;
  font-size: 12px;
}

.obpd-fo-actions-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.obpd-error-text {
  color: var(--red-500);
  font-size: 13px;
}

.obpd-row-error {
  background: #fef2f2;
}

/* .list-table td sets padding/color/font-size/border-bottom at (0,1,1);
   the compound form is needed to win inside a .list-table (the fo-preview,
   imports, and baseline-recorded tables all carry that class). */
.obpd-cell-mono {
  padding: 4px 8px;
  font-family: monospace;
}
.list-table td.obpd-cell-mono {
  padding: 4px 8px;
  font-family: monospace;
}

.obpd-cell {
  padding: 4px 8px;
}
.list-table td.obpd-cell {
  padding: 4px 8px;
}

.obpd-cell-muted {
  padding: 4px 8px;
  color: var(--gray-500);
}
.list-table td.obpd-cell-muted {
  padding: 4px 8px;
  color: var(--gray-500);
}

.obpd-cell-mono-r {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
}
.list-table td.obpd-cell-mono-r {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
}

.obpd-cell-error {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--red-500);
}
.list-table td.obpd-cell-error {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--red-500);
}

.obpd-cell-r {
  padding: 4px 8px;
  text-align: right;
}
.list-table td.obpd-cell-r {
  padding: 4px 8px;
  text-align: right;
}

.obpd-cell-cap {
  padding: 4px 8px;
  text-transform: capitalize;
}
.list-table td.obpd-cell-cap {
  padding: 4px 8px;
  text-transform: capitalize;
}

.obpd-cell-mono-r-muted {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
  color: var(--gray-500);
}
.list-table td.obpd-cell-mono-r-muted {
  padding: 4px 8px;
  text-align: right;
  font-family: monospace;
  color: var(--gray-500);
}

/* .list-table th sets padding/text-align (among other things) at
   (0,1,1); the compound form wins that override inside a .list-table. */
.obpd-th-l {
  text-align: left;
  padding: 4px 8px;
}
.list-table th.obpd-th-l {
  text-align: left;
  padding: 4px 8px;
}

.obpd-th-r {
  text-align: right;
  padding: 4px 8px;
}
.list-table th.obpd-th-r {
  text-align: right;
  padding: 4px 8px;
}

.obpd-th-r-muted {
  text-align: right;
  padding: 4px 8px;
  color: var(--gray-500);
}
.list-table th.obpd-th-r-muted {
  text-align: right;
  padding: 4px 8px;
  color: var(--gray-500);
}

.obpd-preview-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.obpd-tfoot-row {
  border-top: 2px solid var(--gray-300);
  font-weight: 600;
}

.obpd-success-box {
  padding: 12px;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  border-radius: 8px;
}

.obpd-fo-imported-note {
  font-size: 13px;
  color: var(--gray-600);
  margin: 8px 0 0;
}

.obpd-review-link {
  color: var(--primary-600);
  font-weight: 600;
}

.obpd-fo-link-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 6px 0 0;
}

/* ---------- import sequence card ---------- */

.obpd-seq-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.obpd-seq-intro {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
}

.obpd-import-wizard-link {
  font-size: 13px;
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.obpd-seq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

/* Step card: fixed two-state enum (done vs pending), same treatment as
   the step-tracker mark below — modifier classes, not a CSSOM write. */
.obpd-seq-step {
  border-radius: 8px;
  padding: 12px;
}
.obpd-seq-step--pending {
  border: 1px solid var(--gray-200);
  background: #fff;
}
.obpd-seq-step--done {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
}

.obpd-seq-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.obpd-seq-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.obpd-seq-badge--done {
  background: #16a34a;
  color: #fff;
}
.obpd-seq-badge--pending {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* ---------- checklist card ---------- */

.obpd-step-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* Step marker: fixed four-state enum (abandoned/done/current/pending).
   abandoned and pending share the same gray-300 color today but are kept
   as separate modifiers since they are distinct lifecycle states. */
.obpd-step-mark {
  font-weight: 700;
  width: 18px;
  text-align: center;
}
.obpd-step-mark--abandoned {
  color: var(--gray-300);
}
.obpd-step-mark--done {
  color: var(--green-500);
}
.obpd-step-mark--current {
  color: var(--primary-600);
}
.obpd-step-mark--pending {
  color: var(--gray-300);
}

.obpd-step-label {
  font-size: 14px;
}
.obpd-step-label--active {
  font-weight: 600;
}
.obpd-step-label--inactive {
  font-weight: 500;
}

.obpd-checklist-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* Checklist banner: fixed two-state enum (abandoned vs gone-live). */
.obpd-banner {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size: 13px;
}
.obpd-banner--neutral {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}
.obpd-banner--success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

/* ---------- linked import runs card ---------- */

.obpd-header-row-mb8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.obpd-cell6 {
  padding: 6px 8px;
}
.list-table td.obpd-cell6 {
  padding: 6px 8px;
}

.obpd-cell6-mono-r {
  padding: 6px 8px;
  text-align: right;
  font-family: monospace;
}
.list-table td.obpd-cell6-mono-r {
  padding: 6px 8px;
  text-align: right;
  font-family: monospace;
}

.obpd-cell6-run {
  padding: 6px 8px;
  font-family: monospace;
  font-size: 12px;
  color: var(--gray-500);
}
.list-table td.obpd-cell6-run {
  padding: 6px 8px;
  font-family: monospace;
  font-size: 12px;
  color: var(--gray-500);
}

.obpd-empty-cell {
  padding: 8px;
  color: var(--gray-400);
}
.list-table td.obpd-empty-cell {
  padding: 8px;
  color: var(--gray-400);
}

.obpd-th6-l {
  text-align: left;
  padding: 6px 8px;
}
.list-table th.obpd-th6-l {
  text-align: left;
  padding: 6px 8px;
}

.obpd-th6-r {
  text-align: right;
  padding: 6px 8px;
}
.list-table th.obpd-th6-r {
  text-align: right;
  padding: 6px 8px;
}

.obpd-loading-text {
  color: var(--gray-400);
  font-size: 13px;
  margin-top: 12px;
}

.obpd-import-retention-note {
  margin-top: 12px;
}

.obpd-link-form-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}

.obpd-flex-2 {
  flex: 2;
  min-width: 220px;
}

.obpd-flex-1 {
  flex: 1;
  min-width: 160px;
}

.obpd-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.obpd-label-tight {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
}

.obpd-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}

.obpd-input-mono {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-family: monospace;
}

/* Inline error text following the `is-hidden` toggle convention — there is
   no global `.is-hidden` rule, so each consumer needs its own scoped
   compound. Two variants exist because the original inline styles differed
   in margin-top (6px vs 8px) depending on which error box it was. */
.obpd-inline-error-6 {
  color: var(--red-500);
  font-size: 13px;
  margin-top: 6px;
}
.obpd-inline-error-6.is-hidden {
  display: none;
}

.obpd-inline-error-8 {
  color: var(--red-500);
  font-size: 13px;
  margin-top: 8px;
}
.obpd-inline-error-8.is-hidden {
  display: none;
}

/* ---------- filing baseline card ---------- */

.obpd-baseline-intro {
  color: var(--gray-500);
  font-size: 13px;
  margin-bottom: 12px;
}

.obpd-extract-panel {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  background: var(--gray-50);
}

.obpd-extract-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.obpd-extract-hint {
  font-size: 11px;
  color: var(--gray-500);
  margin: 6px 0 0;
}

.obpd-extract-status {
  font-size: 12px;
  margin-top: 6px;
}

.obpd-baseline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Assisted-extraction confidence badge on the `.baseline-col` inputs
   (which carry their own initial style-turned-class `.obpd-input-mono`).
   Fixed three-state enum (high/blank/low) — converted from a CSSOM
   `.style.borderColor =` write to modifier classes toggled via
   classList, per the small-fixed-enum convention. */
.obpd-confidence--high {
  border-color: var(--green-500);
}
.obpd-confidence--blank {
  border-color: var(--gray-300);
}
.obpd-confidence--low {
  border-color: var(--red-500);
}

.obpd-row-changed {
  background: #fffbeb;
}

.obpd-period-mono {
  font-size: 13px;
  color: var(--gray-500);
  font-family: monospace;
}

.obpd-amendment-note {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.obpd-amend-form {
  margin-top: 14px;
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
}

.obpd-amend-intro {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.obpd-amend-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* ---------- source-document provenance ---------- */

.obpd-source-doc-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.obpd-download-link {
  font-size: 13px;
  color: var(--primary-600);
}

.obpd-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* quickbooks-settings.js */

.qbs-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.qbs-section {
  margin-bottom: 1.25rem;
}

.qbs-card {
  border: 1px solid var(--wa-color-surface-border, #ddd);
  border-radius: 8px;
  padding: 1.25rem;
  max-width: 48rem;
}

.qbs-card--wide {
  max-width: 64rem;
}

.qbs-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}

.qbs-row-tight {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.qbs-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.qbs-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem 1rem;
  margin: 0 0 1.25rem;
}

.qbs-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.qbs-toggle-label--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.qbs-toggle-status {
  font-size: 12px;
}

.qbs-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--wa-color-brand-40);
}

.qbs-hint {
  font-size: 12px;
  color: #666;
}

.qbs-hint-block {
  color: #666;
  margin-top: .5rem;
}

.qbs-grid-row {
  display: grid;
  gap: .6rem;
  align-items: center;
  padding: .4rem 0;
  border-top: 1px solid var(--wa-color-surface-border, #eee);
}

.qbs-grid-row--split {
  grid-template-columns: 1fr 2fr;
}

.qbs-grid-row--auto {
  grid-template-columns: 1fr auto;
}

.qbs-label-strong {
  font-weight: 500;
}

.qbs-label-sub {
  font-size: 12px;
  color: #888;
}

.qbs-flow-reason {
  font-size: 12px;
  color: #c33;
  margin-left: 6px;
}

.qbs-empty-row {
  padding: 1rem;
  color: #888;
  text-align: center;
}

.qbs-sync-error {
  font-size: 11px;
  color: #c33;
  margin-top: 2px;
}

.qbs-td {
  padding: .4rem;
  border-top: 1px solid var(--wa-color-surface-border, #eee);
}

.qbs-td--mono {
  font-family: monospace;
  font-size: 11px;
}

.qbs-td--right {
  text-align: right;
}

.qbs-td--mono-muted {
  font-family: monospace;
  font-size: 11px;
  color: #666;
}

.qbs-table-scroll {
  overflow-x: auto;
}

.qbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.qbs-thead-row {
  text-align: left;
}

.qbs-th {
  padding: .4rem;
}

.qbs-th--right {
  text-align: right;
}

.qbs-pager {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: .6rem;
}

.qbs-bridge-table wa-select {
  min-width: 13rem;
}

.qbs-bridge-table small {
  display: block;
  margin-top: .25rem;
  color: var(--wa-color-neutral-60);
}

.qbs-classifications {
  border-top: 1px solid var(--wa-color-surface-border, #eee);
  margin-top: 1rem;
  padding-top: 1rem;
}

.qbs-classifications ul {
  display: grid;
  gap: .35rem;
  list-style: none;
  margin: .75rem 0;
  padding: 0;
}

.qbs-classifications li,
.qbs-classification-add {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.qbs-classifications li span:first-child {
  min-width: 15rem;
}

.qbs-classification-add wa-select {
  min-width: 20rem;
}

/* ttb-processing-report.js */
.ttpr-banner-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.ttpr-banner-error-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #dc2626; font-weight: 600; }
.ttpr-banner-warn { background: #fefce8; border: 1px solid #fde047; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.ttpr-banner-warn-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #a16207; font-weight: 600; }
.ttpr-icon-lg { font-size: 18px; }
.ttpr-list-error { margin: 0; padding-left: 20px; color: #991b1b; }
.ttpr-list-warn { margin: 0; padding-left: 20px; color: #854d0e; }
.ttpr-code-muted { color: #9ca3af; font-size: 12px; }

.ttpr-card-mb { margin-bottom: 24px; }
.ttpr-h3-mb { margin-bottom: 12px; }

.ttpr-header-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 24px; font-size: 14px; }
.ttpr-field-label { color: #6b7280; font-size: 12px; }

.ttpr-num-cell { text-align: right; padding: 4px 8px; font-family: monospace; font-size: 13px; }
.ttpr-num-cell-btn { text-align: right; padding: 0; font-family: monospace; font-size: 13px; }
.ttpr-cell-button { all: unset; display: block; width: 100%; padding: 4px 8px; text-align: right; cursor: pointer; color: #0369a1; text-decoration: underline dotted; }

.ttpr-row { border-bottom: 1px solid #f1f5f9; }
.ttpr-row--total { background: #f0f9ff; font-weight: 700; }
.ttpr-cell-nowrap { white-space: nowrap; padding: 4px 8px; }
.ttpr-td-pad { padding: 4px 8px; }

.ttpr-table-scroll { overflow-x: auto; }
.ttpr-report-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.ttpr-thead-row { background: #f1f5f9; border-bottom: 2px solid #e2e8f0; }
.ttpr-th-left { text-align: left; padding: 6px 8px; white-space: nowrap; }
.ttpr-th-right { text-align: right; padding: 6px 8px; white-space: nowrap; }

.ttpr-empty-note { color: #6b7280; font-style: italic; padding: 8px 0; }
.ttpr-source-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ttpr-src-td-mono { padding: 6px 8px; font-family: monospace; font-size: 12px; color: #6b7280; }
.ttpr-src-td-pad { padding: 6px 8px; }
.ttpr-link-plain { color: #0369a1; text-decoration: none; }
.ttpr-src-num-pad { text-align: right; padding: 6px 8px; font-family: monospace; }
.ttpr-src-td-muted { padding: 6px 8px; color: #6b7280; font-size: 12px; }

.ttpr-filter-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ttpr-field-label-block { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.ttpr-select-month { width: 160px; }
.ttpr-select-year { width: 120px; }
.ttpr-drawer-size { --size: 42rem; }
.ttpr-drawer-body-pad { padding: 0 4px; }
.ttpr-muted { color: #6b7280; }
.ttpr-drawer-summary { margin-bottom: 12px; font-size: 13px; color: #374151; }

.ttpr-inline-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; color: #dc2626; }
.ttpr-inline-error--sm { padding: 12px; }
.ttpr-inline-error--lg { padding: 16px; }

/* ttb-production-report.js */

/* --- valCell() drilldown cell (td + button) --- */
.ttprd-val-td {
  text-align: right;
  font-family: monospace;
  font-size: 13px;
}
.ttprd-val-td--btn {
  padding: 0;
}
.ttprd-val-btn {
  all: unset;
  display: block;
  width: 100%;
  text-align: right;
  cursor: pointer;
  color: #0369a1;
  text-decoration: underline dotted;
}
/* WORK-486 P2 — structurally-zero cell: clickable but de-emphasized, so it
   reads as "always zero for this report", not a live reconciled figure. */
.ttprd-val-btn--na {
  color: #9ca3af;
  font-style: italic;
  text-decoration: none;
}
/* Fixed 3-value padding enum shared by valCell() call sites across Parts I/II-V/VI. */
.ttprd-pad-normal { padding: 6px 12px; }
.ttprd-pad-tight { padding: 4px 8px; }
.ttprd-pad-medium { padding: 4px 12px; }

/* --- Layout / utility --- */
.ttprd-scroll-x { overflow-x: auto; }
.ttprd-mb-24 { margin-bottom: 24px; }
.ttprd-mb-12 { margin-bottom: 12px; }
.ttprd-muted { color: #6b7280; }
.ttprd-field-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.ttprd-field-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.ttprd-select-month { width: 160px; }
.ttprd-select-year { width: 120px; }
.ttprd-drawer { --size: 42rem; }
.ttprd-drawer-body { padding: 0 4px; }
.ttprd-tab-panel { padding: 16px 0; }

/* --- Header card --- */
.ttprd-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 24px;
  font-size: 14px;
}
.ttprd-label-sm {
  color: #6b7280;
  font-size: 12px;
}

/* --- Drilldown drawer meta --- */
.ttprd-drilldown-meta {
  margin-bottom: 12px;
  font-size: 13px;
  color: #374151;
}
.ttprd-drilldown-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px;
  color: #dc2626;
}
.ttprd-report-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 16px;
  color: #dc2626;
}

/* --- Warnings / errors banner (renderWarnings) --- */
.ttprd-alert-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ttprd-alert-warning {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ttprd-alert-title-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #dc2626;
  font-weight: 600;
}
.ttprd-alert-title-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #a16207;
  font-weight: 600;
}
.ttprd-alert-icon { font-size: 18px; }
.ttprd-alert-list-error {
  margin: 0;
  padding-left: 20px;
  color: #991b1b;
}
.ttprd-alert-list-warning {
  margin: 0;
  padding-left: 20px;
  color: #854d0e;
}
.ttprd-code-note {
  color: #9ca3af;
  font-size: 12px;
}

/* --- Empty-state text --- */
.ttprd-empty-italic {
  color: #6b7280;
  font-style: italic;
}
.ttprd-empty-note {
  color: #6b7280;
  font-style: italic;
  padding: 8px 0;
}
/* WORK-486 P2 — "not applicable / always zero" drawer note (calm, neutral;
   distinct from the red error box and the italic period-empty note). */
.ttprd-na-note {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  color: #4b5563;
  line-height: 1.5;
}

/* --- Report tables (shared across sources drawer + Parts I-VI) --- */
.ttprd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ttprd-table--wide { min-width: 1100px; }
.ttprd-table-sm {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
  font-size: 14px;
}
.ttprd-table-sm--wide { max-width: 700px; }

.ttprd-thead-row {
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
}

/* th variants: "-th" = 13px tables (sources, Part I) with white-space:nowrap;
   "-th-sm" = 14px tables (Parts II-V) and Part VI's materials table header. */
.ttprd-th {
  text-align: left;
  padding: 6px 8px;
  white-space: nowrap;
}
.ttprd-th--right { text-align: right; }
.ttprd-th-sm {
  text-align: left;
  padding: 6px 12px;
}
.ttprd-th-sm--right { text-align: right; }

/* Plain row separator, reused across the sources table + Parts II/IV/V/VI. */
.ttprd-row { border-bottom: 1px solid #f1f5f9; }
/* Bold/highlighted total row, layered on top of .ttprd-row (or standalone
   in Part I's renderTxRow, which has no border-bottom of its own). */
.ttprd-total-row {
  font-weight: 700;
  background: #f0f9ff;
}

.ttprd-td { padding: 6px 8px; }
.ttprd-td-source {
  padding: 6px 8px;
  font-family: monospace;
  font-size: 12px;
  color: #6b7280;
}
.ttprd-td-amount {
  text-align: right;
  padding: 6px 8px;
  font-family: monospace;
}
.ttprd-td-when {
  padding: 6px 8px;
  color: #6b7280;
  font-size: 12px;
}
.ttprd-link {
  color: #0369a1;
  text-decoration: none;
}

/* Part I number/label cells */
.ttprd-td-num {
  white-space: nowrap;
  padding: 4px 8px;
}
/* Parts II/III/IV/V label cells (14px tables) */
.ttprd-td-sm { padding: 6px 12px; }
/* Part VI material-row label cells */
.ttprd-td-md { padding: 4px 12px; }
/* Part VI section header (Grain/Fruit/Other) */
.ttprd-section-td {
  padding: 8px 12px 4px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #6b7280;
  border-top: 2px solid #e2e8f0;
}

/* user-detail.js */

.usrd-no-perm { padding: 24px; color: var(--gray-500); }

/* .detail-header (detail-view.css, loaded after main.css) already sets
   display:flex; align-items:center; justify-content:space-between at bare
   (0,1,0) specificity. This markup uses the same values, so only the new
   padding needs adding — a bare class is safe (no override, no cascade
   conflict). */
.usrd-header-pad { padding: 24px; }

.usrd-form-body { padding: 0 24px 24px; max-width: 720px; }
.usrd-form-body-lg { padding: 0 24px 24px; max-width: 1040px; }

/* .card has no base CSS rule anywhere in the stylesheet set, so bare
   classes on .card are safe. */
.usrd-card-pad { padding: 20px; }
.usrd-card-pad-mt { padding: 20px; margin-top: 16px; }

.usrd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.usrd-section-mt { margin-top: 20px; }
.usrd-field-label { display: block; font-size: 13px; color: var(--gray-600); margin-bottom: 6px; }
.usrd-checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.usrd-checkbox-row { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.usrd-mono { font-family: monospace; }
.usrd-mono-medium { font-family: monospace; font-weight: 500; }
.usrd-perm-count { color: var(--gray-400); font-size: 12px; }
.usrd-help-text { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.usrd-actions-row { margin-top: 20px; display: flex; gap: 8px; }
.usrd-loading { padding: 24px; }
.usrd-error { padding: 24px; color: red; }

/* This header uses align-items:flex-start, overriding .detail-header's
   base align-items:center (detail-view.css, loaded after main.css) — must
   compound to win. */
.detail-header.usrd-header-existing { align-items: flex-start; padding: 24px; }

.usrd-status-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.usrd-muted-13 { color: var(--gray-500); font-size: 13px; }
.usrd-btn-group { display: flex; gap: 8px; }
.usrd-card-title { margin-top: 0; }
.usrd-card-title-flush { margin: 0; }
.usrd-profile-grid { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.usrd-role-rows { display: flex; flex-direction: column; gap: 8px; }
.usrd-empty-text { color: var(--gray-400); }
.usrd-role-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
.usrd-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.usrd-section-header h3 { margin: 0; }
.usrd-assignment-summary { margin: 8px 0 14px; color: var(--gray-500); font-size: 12px; }
.usrd-assignment-summary strong { color: var(--gray-700); }
.usrd-assignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usrd-assignment-option { min-width: 0; }
.usrd-assignment-card { position: relative; min-height: 118px; --spacing: 14px; transition: box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease; }
.usrd-assignment-card.is-editable { cursor: pointer; }
.usrd-assignment-card.is-editable:hover { box-shadow: 0 0 0 1px var(--primary-400), var(--shadow); transform: translateY(-1px); }
.usrd-assignment-card.is-editable:focus-visible { outline: 3px solid var(--primary-300); outline-offset: 3px; }
.usrd-assignment-card.is-selected { box-shadow: 0 0 0 2px var(--primary-600); }
.usrd-assignment-card.is-disabled { cursor: not-allowed; opacity: .55; transform: none; }
.usrd-assignment-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--gray-300); border-radius: 50%; color: transparent; background: white; }
.usrd-assignment-card.is-selected .usrd-assignment-check { border-color: var(--primary-600); color: white; background: var(--primary-600); }
.usrd-assignment-name, .usrd-assignment-description, .usrd-assignment-meta { display: block; padding-right: 30px; }
.usrd-assignment-name { color: var(--gray-900); font-size: 14px; }
.usrd-assignment-description { margin-top: 6px; color: var(--gray-500); font-size: 12px; line-height: 1.4; }
.usrd-assignment-meta { margin-top: 10px; color: var(--gray-600); font-size: 11px; font-weight: 600; }
.usrd-assignment-link { display: inline-block; margin: 8px 4px 0; color: var(--primary-700); font-size: 11px; font-weight: 600; text-decoration: none; }
.usrd-role-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.usrd-inline-error { margin: 12px 0 0; color: var(--red-600); font-size: 12px; }
.usrd-labor-header-row { display: flex; justify-content: space-between; align-items: center; }
.usrd-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.usrd-empty-note { font-size: 13px; color: var(--gray-400); }
.usrd-chip-item { display: inline-flex; align-items: center; gap: 4px; }
.usrd-medium { font-weight: 500; }

.usrd-dialog-480 { --width: 480px; }
.usrd-dialog-grid { display: grid; gap: 12px; }
.usrd-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; }
.usrd-dialog-intro { font-size: 13px; color: var(--gray-500); margin: 0; }

/* Show/hide pair for the hourly-vs-salaried compensation mode toggle
   (small fixed binary enum), converted from `.style.display` writes in
   wireUserRateDialog(). #urd-hourly-block had no initial inline style
   attribute, but the enum-conversion rule applies regardless: this is a
   fixed two-state toggle, not a continuous/computed value. There is no
   global .is-hidden rule anywhere, so this is scoped to the block. */
.usrd-hourly-block.is-hidden { display: none; }

/* #urd-salary-block DID have an initial style="display:none;..." attribute
   — not CSP-exempt, must convert. Default (hidden) state matches the
   original markup; the visible (salaried) state is a modifier class. */
.usrd-salary-block { grid-template-columns: 1fr 110px; gap: 8px; display: none; }
.usrd-salary-block.usrd-mode-visible { display: grid; }

.usrd-salary-note { grid-column: span 2; font-size: 12px; color: var(--gray-500); }
.usrd-computed-value { font-weight: 600; }
.usrd-history-block { margin-top: 8px; }
.usrd-history-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.usrd-history-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.usrd-history-row { border-top: 1px solid var(--gray-100); }
.usrd-history-cell { padding: 4px 0; }
.usrd-history-cell-right { padding: 4px 0; text-align: right; }

@media (max-width: 720px) {
  .usrd-form-grid,
  .usrd-assignment-grid { grid-template-columns: 1fr; }
  .usrd-section-header { align-items: stretch; flex-direction: column; }
  .usrd-btn-group { flex-wrap: wrap; }
}

/* schedule-todo.js */
.sched-due-filter { min-width: 150px; }
.sched-depth-indicator {
  color: var(--wa-color-neutral-50);
}
.sched-depth-1 { margin-left: 18px; }
.sched-depth-2 { margin-left: 36px; }
.sched-depth-3 { margin-left: 54px; }
.sched-depth-4 { margin-left: 72px; }
.sched-depth-5 { margin-left: 90px; }
.sched-source-label { color: var(--wa-color-neutral-50); }
.sched-decline-reason { color: var(--wa-color-danger-40); }
.sched-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.sched-tree-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sched-entry-dialog { --width: 560px; }
.sched-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sched-due-wrap,
.sched-slot-wrap {
  display: none;
}
.sched-due-wrap.is-visible {
  display: block;
}
.sched-slot-wrap.is-visible {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sched-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* recurring-billing.js */
.rb-shell {
  display: grid;
  gap: 16px;
}
.rb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.rb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.rb-actions-mt { margin-top: 12px; }
.rb-actions-mt-sm { margin-top: 10px; }
.rb-grid {
  display: grid;
  grid-template-columns: minmax(460px, 1.2fr) minmax(360px, .8fr);
  gap: 16px;
  align-items: start;
}
.rb-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}
.rb-card {
  background: var(--wa-color-surface-default, white);
  border: 1px solid var(--wa-color-neutral-80, var(--gray-200));
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow-sm, none);
}
.rb-card h2,
.rb-card h3 {
  margin: 0;
}
.rb-muted { color: var(--wa-color-neutral-50, var(--gray-500)); }
.rb-small { font-size: 12px; }
.rb-strong { font-weight: 600; }
.rb-metric .value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}
.rb-table {
  width: 100%;
  border-collapse: collapse;
}
.rb-table th,
.rb-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--wa-color-neutral-90, var(--gray-100));
  text-align: left;
  vertical-align: top;
}
.rb-table th {
  font-size: 12px;
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-weight: 600;
}
.rb-table tr[data-id] { cursor: pointer; }
.rb-table tr.selected { background: var(--wa-color-brand-fill-quiet, #eef5ff); }
.rb-right { text-align: right !important; }
.rb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rb-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rb-native-field label,
.rb-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--wa-color-neutral-30, var(--gray-700));
}
.rb-native-field input,
.rb-native-field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--wa-color-neutral-70, var(--gray-300));
  border-radius: 6px;
  padding: 7px 9px;
  background: white;
}
.rb-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.rb-stack {
  display: grid;
  gap: 12px;
}
.rb-stack-mt { margin-top: 12px; }
.rb-warning {
  border: 1px solid var(--wa-color-warning-border, #e5c25f);
  background: var(--wa-color-warning-fill-quiet, #fff7db);
  padding: 10px;
  border-radius: 8px;
}
.rb-message {
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}
.rb-message.success {
  border: 1px solid var(--wa-color-success-border, #5fb878);
  background: var(--wa-color-success-fill-quiet, #eefaf1);
  color: var(--wa-color-success-on-quiet, #165c2c);
}
.rb-message.error {
  border: 1px solid var(--wa-color-danger-border, #df7b7b);
  background: var(--wa-color-danger-fill-quiet, #fff0f0);
  color: var(--wa-color-danger-on-quiet, #861b1b);
}
.rb-help {
  margin-top: 4px;
  color: var(--wa-color-neutral-50, var(--gray-500));
  font-size: 12px;
}
.rb-search-input { width: 260px; }
.rb-status-filter { width: 160px; }
.rb-empty-cell {
  text-align: center !important;
  padding: 24px !important;
}
.rb-detail-note { margin: 8px 0 0; }
.rb-service-title { margin-top: 16px; }
.rb-run-note { margin-top: -4px; }
.rb-run-output { margin-top: 12px; }
.rb-capacity-fields.is-hidden,
.rb-manual-field.is-hidden,
.rb-policy-field.is-hidden {
  display: none;
}

@media (max-width: 1100px) {
  .rb-grid,
  .rb-metrics {
    grid-template-columns: 1fr;
  }
}

/* cost-allocation-queue.js */
.allocq-header {
  align-items: flex-start;
}
.allocq-subtitle {
  margin: 6px 0 0;
  color: var(--gray-500);
  font-size: 13px;
}
.allocq-card {
  margin-bottom: 16px;
}
.allocq-saved-row {
  max-width: 320px;
  margin-bottom: 14px;
}
.allocq-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}
.allocq-process-context {
  align-self: stretch;
}
.allocq-context-chip {
  min-height: 40px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 5px 6px 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--gray-50);
}
.allocq-context-chip > span {
  display: grid;
  gap: 2px;
}
.allocq-field {
  display: grid;
  gap: 6px;
}
.allocq-field span {
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
}
.allocq-field input {
  min-height: 40px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--gray-900);
  background: white;
}
.allocq-filter-actions {
  display: flex;
  gap: 8px;
}
.allocq-summary {
  margin-bottom: 16px;
}
.allocq-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
}
.allocq-summary-box {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  padding: 12px;
}
.allocq-summary-box strong {
  display: block;
  color: var(--gray-900);
  font-size: 20px;
}
.allocq-summary-box span {
  display: block;
  color: var(--gray-500);
  font-size: 12px;
  margin-top: 4px;
}
.allocq-status {
  min-height: 20px;
  color: var(--gray-500);
  font-size: 13px;
  margin-bottom: 12px;
}
.allocq-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.allocq-bulk span {
  min-width: 78px;
  color: var(--gray-600);
  font-size: 13px;
}
.allocq-batch-result {
  margin-bottom: 12px;
}
.allocq-batch-result ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.allocq-error {
  color: var(--wa-color-danger-30);
}
.allocq-table {
  margin: 0;
}
.allocq-table-wrap {
  overflow-x: auto;
}
.allocq-num {
  text-align: right;
}
.allocq-process {
  display: grid;
  gap: 3px;
}
.allocq-process span {
  color: var(--gray-500);
  font-size: 12px;
}
.allocq-blocked-reason {
  color: var(--wa-color-danger-30);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 6px;
  max-width: 300px;
}
.allocq-blocker-remedy {
  color: var(--primary-700);
  display: block;
  margin-top: 3px;
}
a.allocq-blocker-remedy:hover {
  color: var(--primary-800);
  text-decoration: underline;
}
.allocq-policy {
  font-weight: 600;
  font-size: 13px;
}
.allocq-muted {
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.35;
}
.allocq-danger-label {
  color: var(--wa-color-danger-30);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.allocq-link-stack {
  display: grid;
  gap: 8px;
  min-width: 180px;
}
.allocq-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.allocq-chip-link {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--primary-700);
  background: var(--gray-50);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 6px;
  text-decoration: none;
}
.allocq-chip-link:hover {
  border-color: var(--primary-500);
  color: var(--primary-800);
}
.allocq-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.allocq-action-link {
  color: var(--primary-700);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.allocq-action-link:hover {
  color: var(--primary-800);
  text-decoration: underline;
}
.allocq-plan-dialog {
  --width: min(760px, calc(100vw - 32px));
}
.allocq-plan-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.allocq-plan-loading,
.allocq-plan-intro p {
  color: var(--gray-600);
}
.allocq-plan-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.allocq-plan-intro p {
  margin: 0;
  max-width: 560px;
}
.allocq-plan-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.allocq-plan-step {
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--primary-400);
  border-radius: var(--radius);
  padding: 14px;
}
.allocq-plan-step[data-plan-state="blocked"] {
  border-left-color: var(--wa-color-danger-50);
}
.allocq-plan-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.allocq-plan-step-head > div {
  display: grid;
  gap: 3px;
}
.allocq-plan-step-head span,
.allocq-plan-dependency {
  color: var(--gray-500);
  font-size: 12px;
}
.allocq-plan-dependency {
  margin-top: 8px;
}
.allocq-plan-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.allocq-plan-components > div {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 8px;
}
.allocq-plan-components dt {
  color: var(--gray-500);
  font-size: 11px;
}
.allocq-plan-components dd {
  margin: 3px 0 0;
  font-weight: 600;
}
.allocq-plan-blockers,
.allocq-plan-error {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

@media (max-width: 1100px) {
  .allocq-filters {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 720px) {
  .allocq-filters,
  .allocq-summary-grid {
    grid-template-columns: 1fr;
  }
  .allocq-filter-actions,
  .allocq-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .allocq-plan-intro,
  .allocq-plan-step-head {
    flex-direction: column;
  }
}

/* cost-summary-panel.js */
.cost-summary-card {
  margin-top: 24px;
  min-width: 0;
  overflow: hidden;
}
.cost-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.cost-summary-header > * {
  min-width: 0;
}
.cost-summary-header h2 {
  margin: 0;
}
.cost-summary-header p {
  margin: 6px 0 0;
  color: var(--gray-500);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.cost-summary-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.cost-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-700);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cost-summary-action:hover {
  color: var(--primary-800);
  text-decoration: underline;
}
.cost-summary-loading {
  color: var(--gray-500);
  font-size: 13px;
  margin-top: 14px;
}
.cost-summary-callout {
  margin-top: 14px;
}
.cost-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.cost-summary-metric {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  padding: 12px;
  min-height: 72px;
}
.cost-summary-metric strong {
  display: block;
  color: var(--gray-900);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cost-summary-metric span {
  display: block;
  color: var(--gray-500);
  font-size: 12px;
  margin-top: 5px;
}
.cost-summary-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
}
.cost-summary-table {
  margin: 0;
  font-size: 13px;
}
.cost-summary-num {
  text-align: right;
}
.cost-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  color: var(--gray-600);
  font-size: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.cost-summary-meta span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.cost-summary-meta strong {
  color: var(--gray-800);
  margin-right: 4px;
}
.cost-list-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cost-coverage-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
}

@media (max-width: 720px) {
  .cost-summary-header {
    flex-direction: column;
  }
  .cost-summary-header-actions {
    justify-content: flex-start;
  }
  .cost-summary-metrics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .cost-summary-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tenant-facing activity history */
.ah-page { max-width: 1320px; margin: 0 auto; padding-bottom: 32px; }
.ah-heading, .ah-toolbar, .ah-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ah-heading h1 { margin-bottom: 4px; }
.ah-heading p { margin: 0; color: var(--gray-600); }
.ah-filters { margin: 20px 0 14px; padding: 18px; display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)); gap: 14px; align-items: end; }
.ah-filter-actions { display: flex; gap: 8px; }
.ah-date-row { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.ah-date-row > span { font-weight: 600; margin-right: 4px; }
.ah-date-row label { color: var(--gray-600); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.ah-date-row input { border: 1px solid var(--gray-300); border-radius: 6px; padding: 7px 9px; background: var(--gray-0); color: inherit; }
.ah-toolbar { min-height: 40px; color: var(--gray-600); }
.ah-table-wrap { overflow-x: auto; margin-top: 8px; padding: 0; }
.ah-table { width: 100%; border-collapse: collapse; }
.ah-table th { text-align: left; color: var(--gray-600); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); }
.ah-table td { padding: 14px; vertical-align: top; border-bottom: 1px solid var(--gray-200); }
.ah-row { cursor: pointer; }
.ah-row:hover { background: var(--gray-50); }
.ah-row small { display: block; color: var(--gray-600); margin-top: 4px; max-width: 560px; }
.ah-row time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ah-category { margin-left: 8px; color: var(--gray-600); font-size: 13px; }
.ah-detail td { background: var(--gray-50); padding: 18px 24px 22px; }
.ah-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ah-sections h3 { font-size: 14px; margin: 0 0 10px; }
.ah-sections dl { margin: 0; }
.ah-sections dl div { display: grid; grid-template-columns: minmax(120px, .8fr) 1.2fr; gap: 12px; padding: 6px 0; }
.ah-sections dt { color: var(--gray-600); }
.ah-sections dd { margin: 0; font-weight: 600; }
.ah-restricted { display: flex; gap: 12px; align-items: flex-start; color: var(--gray-700); }
.ah-restricted p, .ah-no-detail { margin: 4px 0 0; color: var(--gray-600); }
.ah-user-group { margin-top: 20px; }
.ah-user-group h2 { font-size: 16px; margin: 0 0 8px; }
.ah-user-group h2 span { color: var(--gray-500); font-weight: 400; }
.ah-pagination { justify-content: center; margin-top: 18px; }
.ah-loading, .ah-empty, .ah-error { padding: 32px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 900px) { .ah-filters { grid-template-columns: 1fr 1fr; } .ah-date-row { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ah-heading { align-items: flex-start; flex-direction: column; } .ah-filters { grid-template-columns: 1fr; } .ah-date-row { grid-column: 1; } .ah-table th:nth-child(2), .ah-table td:nth-child(2) { display: none; } }

/* WORK-495 — data export settings view. */
.dx-view { max-width: 900px; margin: 0 auto; padding: 24px; }
.dx-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.dx-title { margin: 0 0 4px; }
.dx-lead { margin: 0; color: var(--wa-color-neutral-50); font-size: 14px; max-width: 60ch; }
.dx-jobs { margin-top: 16px; }
.dx-empty { color: var(--wa-color-neutral-50); font-size: 14px; }
.dx-table { width: 100%; border-collapse: collapse; }
.dx-table thead tr { text-align: left; border-bottom: 1px solid var(--wa-color-surface-border, #ddd); font-size: 12px; color: var(--wa-color-neutral-50); }
.dx-table th { padding: 6px 8px; font-weight: 500; }
.dx-table td { padding: 6px 8px; font-size: 13px; }
.dx-actions { text-align: right; }
.dx-fail { color: var(--wa-color-danger-30); font-size: 12px; }
.dx-muted { color: var(--wa-color-neutral-40); font-size: 12px; }
.optional-cost-review {
  margin-block: 1rem;
}

.optional-cost-review a {
  margin-inline-start: 0.35rem;
  font-weight: 600;
}

/* Cost reconciliation */
.cr-page { display: grid; gap: 16px; min-width: 0; }
.cr-header, .cr-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cr-header h1, .cr-section h2, .cr-proof-grid h3 { margin: 0; }
.cr-header p, .cr-section-head p { margin: 4px 0 0; color: var(--wa-color-neutral-40); }
.cr-period { display: grid; grid-template-columns: repeat(3, minmax(160px, 220px)); gap: 12px; align-items: end; }
.cr-status:empty { display: none; }
.cr-approval-dialog { --width: min(760px, 94vw); }
.cr-gate { padding: 18px; border: 1px solid var(--wa-color-neutral-80); border-top: 4px solid var(--wa-color-brand-50); background: linear-gradient(135deg, var(--wa-color-neutral-05), var(--wa-color-neutral-10)); display: grid; gap: 16px; }
.cr-eyebrow { margin: 0 0 4px !important; color: var(--wa-color-brand-40) !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.cr-gate-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--wa-color-neutral-80); background: var(--wa-color-surface-default); }
.cr-gate-summary > div { display: grid; gap: 5px; min-width: 0; padding: 14px; border-right: 1px solid var(--wa-color-neutral-80); }
.cr-gate-summary > div:last-child { border-right: 0; }
.cr-gate-summary span, .cr-gate-summary small { color: var(--wa-color-neutral-40); }
.cr-gate-summary span { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cr-gate-summary strong, .cr-gate-summary small, .cr-gate-summary code { overflow-wrap: anywhere; }
.cr-gate-evidence { padding: 14px; border-left: 3px solid var(--wa-color-brand-60); background: var(--wa-color-surface-default); }
.cr-gate-evidence dl, .cr-policy-selection dl { display: grid; grid-template-columns: minmax(150px, 0.4fr) 1fr; gap: 7px 14px; margin: 0; }
.cr-gate-evidence dt, .cr-policy-selection dt { color: var(--wa-color-neutral-40); }
.cr-gate-evidence dd, .cr-policy-selection dd { margin: 0; overflow-wrap: anywhere; }
.cr-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.cr-gate-actions wa-input { min-width: 260px; }
.cr-gate-checks { display: grid; gap: 8px; }
.cr-gate-check-group { border-top: 1px solid var(--wa-color-neutral-80); padding-top: 10px; }
.cr-gate-check-group summary, .cr-gate-history > summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; }
.cr-gate-check-group summary span { color: var(--wa-color-neutral-40); }
.cr-gate-history { border-top: 1px solid var(--wa-color-neutral-80); padding-top: 12px; }
.cr-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.cr-history-grid h3 { margin: 0 0 8px; }
.cr-history-grid article { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--wa-color-neutral-80); }
.cr-history-grid article small, .cr-history-grid article code { grid-column: 1 / -1; overflow-wrap: anywhere; }
.cr-gate-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cr-gate-form .cr-textarea-label, .cr-gate-form textarea, .cr-gate-form wa-checkbox, .cr-gate-form .cr-policy-selection { grid-column: 1 / -1; }
.cr-gate-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--wa-color-neutral-70); border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-default); color: inherit; font: inherit; }
.cr-textarea-label { font-size: var(--wa-form-control-label-font-size); font-weight: var(--wa-form-control-label-font-weight); }
.cr-policy-selection { padding: 12px; border: 1px solid var(--wa-color-neutral-80); }
.cr-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--wa-color-neutral-80); background: var(--wa-color-neutral-05); }
.cr-summary > div { padding: 14px 16px; border-right: 1px solid var(--wa-color-neutral-80); display: grid; gap: 4px; }
.cr-summary > div:last-child { border-right: 0; }
.cr-summary span { color: var(--wa-color-neutral-40); font-size: 0.82rem; }
.cr-summary strong { font-size: 1.3rem; }
.cr-section { padding: 16px 0; border-bottom: 1px solid var(--wa-color-neutral-80); }
.cr-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 14px; }
.cr-proof-grid > div { border-left: 3px solid var(--wa-color-neutral-70); padding-left: 14px; }
.cr-proof-grid p { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0; }
.cr-proof-grid small { grid-column: 1 / -1; color: var(--wa-color-neutral-40); }
.cr-table-wrap { overflow-x: auto; border: 1px solid var(--wa-color-neutral-80); }
.cr-table { min-width: 1080px; margin: 0; }
.cr-table tbody tr { cursor: pointer; }
.cr-table tbody tr:hover { background: var(--wa-color-neutral-50); }
.cr-table code, .cr-drawer-content code { display: block; font-size: 0.74rem; overflow-wrap: anywhere; }
.cr-money { text-align: right; white-space: nowrap; }
.cr-danger { color: var(--wa-color-danger-30); font-weight: 700; }
.cr-empty { text-align: center; color: var(--wa-color-neutral-40); padding: 24px; }
.cr-muted { color: var(--wa-color-neutral-40); }
.cr-checks, .cr-blockers, .cr-drawer-content ul { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.cr-checks li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.cr-checks p { margin: 2px 0 0; color: var(--wa-color-neutral-40); }
.cr-blockers li { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--wa-color-neutral-90); padding-bottom: 8px; }
/* wa-drawer sizes through --size; it exposes no `panel` part. */
.cr-drawer { --size: min(520px, 92vw); }
.cr-drawer-content { display: grid; gap: 14px; }
.cr-drawer-content dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 9px 14px; margin: 0; }
.cr-drawer-content dt { color: var(--wa-color-neutral-40); }
.cr-drawer-content dd { margin: 0; overflow-wrap: anywhere; }
.cr-drawer-content li { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) {
  .cr-header, .cr-section-head { align-items: stretch; flex-direction: column; }
  .cr-period, .cr-summary, .cr-proof-grid, .cr-gate-summary, .cr-history-grid, .cr-gate-form { grid-template-columns: 1fr; }
  .cr-gate-summary > div { border-right: 0; border-bottom: 1px solid var(--wa-color-neutral-80); }
  .cr-gate-form > * { grid-column: 1; }
  .cr-summary > div { border-right: 0; border-bottom: 1px solid var(--wa-color-neutral-80); }
  .cr-drawer-content dl { grid-template-columns: 1fr; gap: 3px; }
}
.cam-page { max-width: 1180px; margin: 0 auto; padding: 1.25rem; }
.cam-header, .cam-section-head, .cam-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cam-header { margin-bottom: 1rem; }
.cam-header h1, .cam-section h2 { margin: 0; }
.cam-status { min-height: 1.5rem; }
.cam-section { border-top: 1px solid var(--wa-color-neutral-border-normal); padding: 1rem 0 1.25rem; }
.cam-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: .75rem 0; }
.cam-meta dt { color: var(--wa-color-text-quiet); }
.cam-meta dd { margin: 0; }
.cam-account-list { max-height: 18rem; overflow: auto; border: 1px solid var(--wa-color-neutral-border-normal); }
.cam-account-list > div, .cam-overrides > div { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, auto) auto; align-items: center; gap: .75rem; padding: .6rem .75rem; border-bottom: 1px solid var(--wa-color-neutral-border-quiet); }
.cam-account-list > div:last-child, .cam-overrides > div:last-child { border-bottom: 0; }
.cam-account-list span, .cam-account-list small, .cam-overrides strong, .cam-overrides small { display: block; min-width: 0; overflow-wrap: anywhere; }
.cam-mapping-grid { display: grid; gap: .5rem; margin-top: .75rem; }
.cam-mapping-row { display: grid; grid-template-columns: minmax(11rem, .8fr) minmax(15rem, 1.5fr) minmax(10rem, 1fr) auto auto; gap: .65rem; align-items: end; }
.cam-mapping-row strong, .cam-mapping-row small { display: block; }
.cam-mapping-row small, .cam-muted { color: var(--wa-color-text-quiet); }
.cam-overrides { margin-top: .75rem; border: 1px solid var(--wa-color-neutral-border-normal); }
#cam-manual-fields { display: grid; gap: .75rem; margin-top: .75rem; }
#cam-csv-fields { margin-top: .75rem; }
@media (max-width: 800px) {
  .cam-header, .cam-section-head { align-items: flex-start; flex-direction: column; }
  .cam-mapping-row { grid-template-columns: 1fr; padding: .75rem 0; border-bottom: 1px solid var(--wa-color-neutral-border-quiet); }
  .cam-account-list > div, .cam-overrides > div { grid-template-columns: 1fr auto; }
}
.finance-inbox {
  display: grid;
  gap: 1rem;
}

.finance-inbox .detail-header p,
.finance-inbox__section-header p {
  color: var(--wa-color-text-quiet);
  margin: 0.25rem 0 0;
}

.finance-inbox__filters,
.finance-inbox__actions,
.finance-inbox__section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.finance-inbox__section-header {
  justify-content: space-between;
}

.finance-inbox__section-header h2 {
  font-size: 1rem;
  margin: 0;
}

.finance-inbox__rows {
  display: grid;
  margin-top: 0.75rem;
}

.finance-inbox__row {
  align-items: center;
  border-top: 1px solid var(--wa-color-surface-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.finance-inbox__row:first-child {
  border-top: 0;
}

.finance-inbox__row small {
  color: var(--wa-color-text-quiet);
  display: block;
  margin-top: 0.2rem;
}

.finance-inbox__empty {
  color: var(--wa-color-text-quiet);
  margin: 0.75rem 0 0;
}

.fnr-proof {
  margin-bottom: 1rem;
}

.fnr-report-content tr[data-account-id],
.fnr-report-content tr[data-journal-id],
.acd-ledger-scroll tr[data-journal-id] {
  cursor: pointer;
}

.fnr-report-content tr[data-account-id]:hover,
.fnr-report-content tr[data-journal-id]:hover,
.acd-ledger-scroll tr[data-journal-id]:hover {
  background: var(--wa-color-surface-hover);
}
/* WORK-523 — role-aware operational dashboard. */
.dashboard-view {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px);
}
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wa-space-l);
  margin-bottom: var(--wa-space-xl);
}
.dashboard-header h1 {
  margin: 2px 0 5px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.03em;
}
.dashboard-header p { margin: 0; color: var(--wa-color-neutral-50); }
.dashboard-eyebrow {
  color: var(--wa-color-brand-40) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.dashboard-customize-actions,
.dashboard-widget-controls,
.dash-widget-toolbar,
.dash-cash-pressure,
.dash-summary-line {
  display: flex;
  align-items: center;
}
.dashboard-customize-actions { gap: var(--wa-space-xs); flex-wrap: wrap; justify-content: flex-end; }
#dashboard-notice { margin-bottom: var(--wa-space-m); }
#dashboard-notice:empty { display: none; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wa-space-l);
  align-items: start;
}
.dashboard-widget {
  min-width: 0;
  border: 1px solid var(--wa-color-neutral-90);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-raised, white);
  box-shadow: var(--wa-shadow-s);
  overflow: hidden;
}
.dashboard-widget-wide,
.dashboard-widget-full { grid-column: 1 / -1; }
.dashboard-grid.is-customizing .dashboard-widget {
  border-style: dashed;
  border-color: var(--wa-color-brand-60);
}
.dashboard-grid.is-customizing .dashboard-widget[draggable="true"] { cursor: grab; }
.dashboard-grid.is-customizing .dashboard-widget[draggable="true"]:active { cursor: grabbing; }
.dashboard-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--wa-color-neutral-90);
}
.dashboard-widget-header > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dashboard-widget-header h2 { margin: 0; font-size: 17px; }
.dashboard-widget-header > a { color: var(--wa-color-neutral-50); }
.dashboard-drag-handle { display: none; color: var(--wa-color-neutral-50); }
.is-customizing .dashboard-drag-handle { display: inline-flex; }
.dashboard-widget-controls { gap: 2px; }
.dashboard-widget-body { padding: 14px 18px 18px; min-height: 104px; }
.dashboard-widget-loading { display: grid; gap: 10px; }
.dashboard-widget-loading wa-skeleton { height: 30px; }
.dashboard-widget-error,
.dash-widget-empty,
.dashboard-empty-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  color: var(--wa-color-neutral-50);
  min-height: 92px;
}
.dash-widget-empty wa-icon,
.dashboard-empty-layout > wa-icon { color: var(--wa-color-success-50); font-size: 25px; }
.dash-widget-empty strong { color: var(--wa-color-neutral-20); }
.dash-widget-empty span { font-size: 12px; max-width: 360px; }
.dashboard-empty-layout { grid-column: 1 / -1; min-height: 260px; border: 1px dashed var(--wa-color-neutral-80); border-radius: var(--wa-border-radius-l); }
.dashboard-empty-layout h2,
.dashboard-empty-layout p { margin: 0; }
.dash-attention-list { display: grid; }
.dash-attention-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--wa-color-neutral-90);
  color: inherit;
  text-decoration: none;
}
.dash-attention-row:last-child { border-bottom: 0; }
.dash-attention-row:hover .dash-attention-copy strong { color: var(--wa-color-brand-40); }
.dash-attention-marker { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--wa-color-neutral-70); }
.dash-attention-marker.is-danger { background: var(--wa-color-danger-50); }
.dash-attention-marker.is-warning { background: var(--wa-color-warning-50); }
.dash-attention-marker.is-brand { background: var(--wa-color-brand-50); }
.dash-attention-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dash-attention-copy strong,
.dash-attention-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-attention-copy strong { font-size: 14px; }
.dash-attention-copy span { color: var(--wa-color-neutral-50); font-size: 12px; }
.dash-widget-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  color: var(--wa-color-brand-40);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.dash-widget-toolbar { justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--wa-color-neutral-50); font-size: 12px; }
.dash-production-grid { display: grid; gap: 10px; }
.dash-production-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-production-grid.is-visual { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-production-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--wa-color-neutral-90);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default, white);
  color: inherit;
  text-decoration: none;
}
.dash-production-card:hover { border-color: var(--wa-color-brand-60); }
.dash-production-card > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dash-production-card strong,
.dash-production-card span,
.dash-production-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-production-card span,
.dash-production-card small { color: var(--wa-color-neutral-50); }
.dash-production-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--wa-color-brand-40); background: var(--wa-color-brand-95); }
.dash-production-card.is-visual { display: block; padding: 0; overflow: hidden; }
.dash-production-card.is-visual > div:last-child { padding: 10px 12px 12px; }
.dash-production-art { height: 124px; display: flex; align-items: center; justify-content: center; background: var(--wa-color-neutral-95); overflow: hidden; }
/* max-* against the flex container's definite height; width/height:100% would be
   resolved against a content-sized track and overflow to the image's natural aspect. */
.dash-production-art img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.dash-production-art wa-icon { font-size: 36px; color: var(--wa-color-neutral-60); }
.dash-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dash-metric { position: relative; display: grid; gap: 2px; padding: 12px; border-radius: var(--wa-border-radius-m); background: var(--wa-color-neutral-95); }
.dash-metric > span,
.dash-metric small { color: var(--wa-color-neutral-50); font-size: 11px; }
.dash-metric > strong { font-size: 21px; }
.dash-metric wa-tag { position: absolute; top: 10px; right: 10px; }
.dash-cash-pressure { justify-content: space-between; margin: 12px 0 2px; padding: 9px 11px; border-radius: var(--wa-border-radius-s); background: var(--wa-color-success-95); }
.dash-cash-pressure.is-negative { background: var(--wa-color-warning-95); }
.dash-cash-pressure span { font-size: 12px; color: var(--wa-color-neutral-40); }
.dash-summary-line { gap: 5px; margin-bottom: 5px; color: var(--wa-color-neutral-50); font-size: 12px; }
.dashboard-catalog-list { display: grid; gap: 10px; }
.dashboard-widget-dialog { --width: 620px; }
.dashboard-catalog-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--wa-color-neutral-90); border-radius: var(--wa-border-radius-m); }
.dashboard-catalog-list article > div { display: grid; gap: 3px; }
.dashboard-catalog-list article span { color: var(--wa-color-neutral-50); font-size: 12px; }
@media (max-width: 920px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-widget { grid-column: 1; }
  .dash-production-grid.is-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .dashboard-view { padding: 16px; }
  .dashboard-header { flex-direction: column; }
  .dashboard-customize-actions { justify-content: flex-start; }
  .dashboard-customize-actions wa-button { flex: 1 1 auto; }
  .dash-production-grid.is-compact,
  .dash-production-grid.is-visual,
  .dash-metric-grid { grid-template-columns: 1fr; }
  .dash-widget-toolbar { align-items: flex-start; flex-direction: column; }
}
.por-overage-card {
  border-color: var(--wa-color-warning-border);
}

.por-overage-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) minmax(12rem, 1.4fr) minmax(9rem, 1fr) minmax(12rem, 1.5fr) auto;
  gap: var(--wa-space-m);
  align-items: end;
  padding: var(--wa-space-m) 0;
  border-top: 1px solid var(--wa-color-surface-border);
}

.por-overage-error {
  grid-column: 1 / -1;
}

.por-overage-history-row {
  padding: var(--wa-space-s) 0;
  border-top: 1px solid var(--wa-color-surface-border);
}

@media (max-width: 900px) {
  .por-overage-row {
    grid-template-columns: 1fr;
  }
}

.phone-health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* WORK-544 — Money Move composer and authoritative translation evidence. */
.jel-create-actions,
.mm-section-header,
.mm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
}
.money-move { max-width: 1320px; margin-inline: auto; }
.mm-eyebrow { margin: 0 0 4px; color: var(--wa-color-brand-40); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mm-lede { max-width: 760px; color: var(--wa-color-neutral-40); }
.mm-card { margin-top: var(--wa-space-l); }
.mm-card h2,
.mm-card h3,
.mm-stored-evidence h4 { margin-top: 0; }
.mm-entry-grid { display: grid; grid-template-columns: minmax(10rem, .7fr) 1fr 2fr; gap: var(--wa-space-m); }
.mm-entry-grid label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.mm-entry-grid input { min-height: 38px; border: 1px solid var(--wa-color-neutral-80); border-radius: var(--wa-border-radius-s); padding: 0 10px; color: inherit; background: var(--wa-color-surface-default); }
.mm-section-header p,
.mm-muted { color: var(--wa-color-neutral-50); }
.mm-section-header p { margin: 4px 0 0; }
.mm-rows { display: grid; gap: var(--wa-space-s); margin: var(--wa-space-m) 0; }
.mm-row { display: grid; grid-template-columns: minmax(15rem, 2fr) minmax(8rem, .8fr) minmax(10rem, 1fr) minmax(13rem, 1.5fr) auto; gap: var(--wa-space-s); align-items: end; }
.mm-remove-row { margin-bottom: 2px; }
.mm-preview-grid { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(24rem, 1.5fr); gap: var(--wa-space-xl); margin-top: var(--wa-space-m); }
.mm-intent-line { display: flex; justify-content: space-between; gap: var(--wa-space-s); padding: 9px 0; border-top: 1px solid var(--wa-color-neutral-90); }
.mm-intent-line span { color: var(--wa-color-neutral-40); text-transform: capitalize; }
.mm-balanced { color: var(--wa-color-success-40); font-weight: 650; }
.mm-explanations { margin-top: var(--wa-space-l); }
.mm-explanations p { margin: 8px 0; }
.mm-warnings { display: grid; gap: var(--wa-space-s); margin-bottom: var(--wa-space-m); }
.mm-footer { margin-top: var(--wa-space-l); }
.mm-footer .jed-status { flex: 1; }
.jed-muted { color: var(--wa-color-neutral-50); }
@media (max-width: 900px) {
  .mm-entry-grid,
  .mm-row,
  .mm-preview-grid { grid-template-columns: 1fr; }
  .mm-remove-row { justify-self: end; }
}
/* WORK-816 grouped-harvest allocation preview. Keep the dialog bounded
   without an inline style attribute, which CSP forbids. */
.fraction-mix-allocation-scroller {
  max-height: 240px;
}
/* WORK-926 progressive onboarding workspace */
.onboarding-section-grid,
.onboarding-intake-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.onboarding-section-card { border:1px solid var(--wa-color-neutral-border-quiet); border-radius:var(--wa-border-radius-l); padding:1rem; background:var(--wa-color-surface-raised); }
.onboarding-section-card .opl-section-heading,
.onboarding-workspace .opl-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.onboarding-import-steps { display:grid; gap:.65rem; padding-left:1.5rem; }
.onboarding-import-steps li { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.onboarding-import-steps small { display:block; color:var(--wa-color-text-quiet); margin-top:.2rem; }
/* WORK-359 §3.7 — guided onboarding import screen */
.obi-layout { display:grid; grid-template-columns:minmax(220px, 280px) 1fr; gap:1rem; align-items:start; }
@media (max-width: 900px) { .obi-layout { grid-template-columns:1fr; } }
.obi-stepper { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.obi-step { width:100%; display:grid; grid-template-columns:2rem 1fr; grid-template-rows:auto auto; column-gap:.6rem; text-align:left; padding:.6rem .7rem; border:1px solid var(--wa-color-surface-border); border-radius:var(--wa-border-radius-m, 8px); background:var(--wa-color-surface-default); color:inherit; cursor:pointer; font:inherit; }
.obi-step[aria-current="step"] { border-color:var(--wa-color-brand-border-loud); box-shadow:inset 3px 0 0 var(--wa-color-brand-fill-loud); }
.obi-step-n { grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--wa-color-neutral-fill-quiet); font-weight:600; font-size:.85rem; }
.obi-step--done .obi-step-n, .obi-step--zero_confirmed .obi-step-n { background:var(--wa-color-success-fill-quiet); color:var(--wa-color-success-on-quiet); }
.obi-step--needs_attention .obi-step-n { background:var(--wa-color-warning-fill-quiet); color:var(--wa-color-warning-on-quiet); }
.obi-step--zero_contradicted .obi-step-n { background:var(--wa-color-danger-fill-quiet); color:var(--wa-color-danger-on-quiet); }
.obi-step-t { font-weight:600; }
.obi-step-s { font-size:.8rem; color:var(--wa-color-text-quiet); }
.obi-panel { display:grid; gap:1rem; min-width:0; }
.obi-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.obi-panel h2 { margin:.15rem 0 0; }
.obi-creates { margin:0; color:var(--wa-color-text-quiet); }
.obi-prereqs { margin:.35rem 0 0; padding-left:1.1rem; }
.obi-prereq-missing a { margin-left:.4rem; }
.obi-rows-head { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:baseline; }
.obi-actions { white-space:nowrap; text-align:right; }
.obi-panel .data-table { width:100%; display:block; overflow-x:auto; }
.csvf { display:grid; gap:.75rem; }
.csvf-row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; }
.csvf-field { display:grid; gap:.25rem; font-size:.85rem; font-weight:600; }
.csvf-kind { font-weight:600; align-self:center; }
.csvf-preview { display:grid; gap:.6rem; }
.csvf-tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.opl-button-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.opl-kicker { font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--wa-color-text-quiet); margin:0; }
.onboarding-readiness-list > div,.opl-history-row { display:flex; align-items:center; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--wa-color-neutral-border-quiet); }
.onboarding-intake-card::part(button) { height:100%; justify-content:flex-start; text-align:left; padding:1rem; }
.onboarding-intake-card span { display:block; white-space:normal; color:var(--wa-color-text-quiet); margin-top:.35rem; }
.onboarding-intake-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:1rem; margin:1rem 0; }
.onboarding-intake-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.75rem; }
.onboarding-form-guide { border-left:3px solid var(--wa-color-brand-border-normal); padding-left:1rem; }
.onboarding-form-guide [data-guide-key] { padding:.5rem; border-radius:var(--wa-border-radius-m); }
.onboarding-form-guide [data-guide-key].is-active { background:var(--wa-color-brand-fill-quiet); }
@media (max-width:760px) { .onboarding-intake-layout { grid-template-columns:1fr; } }
/* WORK-555 bank-feed operator surface. */
.bank-feed-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(28rem, 2fr);
  gap: var(--wa-space-l);
  align-items: start;
}

.bank-feed-connection-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: inherit;
  padding: var(--wa-space-m);
  margin-block-end: var(--wa-space-s);
  text-align: start;
  cursor: pointer;
}

.bank-feed-connection-row span:first-child {
  display: grid;
  gap: var(--wa-space-2xs);
}

.bank-feed-connection-row.selected {
  border-color: var(--wa-color-brand-border-normal);
  background: var(--wa-color-brand-fill-quiet);
}

@media (max-width: 900px) {
  .bank-feed-layout { grid-template-columns: 1fr; }
}

/* WORK-1054 — packaging actually used, on the bottling completion form. */
.pka-panel {
  display: grid;
  gap: 10px;
}
.pka-intro {
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}
.pka-component {
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
}
.pka-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 13px;
}
.pka-sources {
  display: grid;
  gap: 6px;
}
.pka-source {
  display: grid;
  grid-template-columns: 1fr 100px 40px auto;
  gap: 6px;
  align-items: center;
}
.pka-source-label,
.pka-unit {
  font-size: 12px;
  color: var(--wa-color-neutral-40);
}
.pka-waste {
  display: grid;
  grid-template-columns: 110px 170px 1fr;
  gap: 6px;
}
.pka-total {
  font-size: 13px;
}
.pka-delta {
  color: var(--wa-color-warning-40);
}
@media (max-width: 600px) {
  .pka-source {
    grid-template-columns: 1fr 80px auto;
  }
  .pka-source-label,
  .pka-unit {
    grid-column: 1 / -1;
  }
  .pka-waste {
    grid-template-columns: 1fr 1fr;
  }
}

/* analytics-dashboard.js + distributor-reports.js — Sales Analytics (WORK-455).
   Your sales are always the brand blue; distributor-reported figures are
   always teal, so the source reads from colour alone. */
.sa-page {
  --sa-rec: var(--primary-600);
  --sa-dist: #0d8577;
  --sa-dist-soft: #e2f4f1;
}
.sa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
}
.sa-filters--muted {
  opacity: 0.55;
}
.sa-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sa-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.sa-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
}
.sa-seg-btn {
  border: 0;
  border-right: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-700);
  padding: 6px 11px;
  font: inherit;
  cursor: pointer;
}
.sa-seg-btn:last-child {
  border-right: 0;
}
.sa-seg-btn[aria-pressed="true"] {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}
.sa-seg-btn:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}
.sa-seg-btn:focus-visible,
.sa-tab:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: -2px;
}
.sa-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sa-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}
.sa-swatch--rec { background: var(--sa-rec); }
.sa-swatch--dist { background: var(--sa-dist); }
.sa-tabs {
  display: flex;
  gap: 2px;
  margin: 16px 0;
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
}
.sa-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 9px 14px;
  font: inherit;
  font-weight: 500;
  color: var(--gray-500);
  white-space: nowrap;
  cursor: pointer;
}
.sa-tab[aria-selected="true"] {
  color: var(--primary-700);
  border-bottom-color: var(--primary-600);
}
.sa-tile-note {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}
.sa-tile-note--warn {
  color: #9a5b00;
}
.sa-grid-main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 860px) {
  .sa-grid-main {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sa-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.sa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--gray-700);
}
.sa-hint {
  font-size: 12.5px;
  color: var(--gray-500);
}
.sa-note {
  font-size: 12.5px;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--primary-50);
  color: var(--primary-700);
}
.sa-note--warn {
  background: #fdf1d8;
  color: #9a5b00;
}
.sa-num {
  font-variant-numeric: tabular-nums;
}
.sa-raw {
  font-family: var(--sazi-font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
}
.sa-trend-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}
.sa-grid-line {
  stroke: var(--gray-200);
  stroke-width: 1;
}
.sa-axis {
  font-size: 11px;
  fill: var(--gray-500);
}
.sa-bar {
  cursor: pointer;
}
.sa-bar--rec { fill: var(--sa-rec); }
.sa-bar--dist { fill: var(--sa-dist); }
.sa-bar:hover,
.sa-bar--selected {
  opacity: 0.75;
}
.sa-bar:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 1px;
}
.sa-mix {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 10px;
}
.sa-mix-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 13px;
}
.sa-mix-track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 4px;
  background: var(--gray-100);
  overflow: hidden;
}
.sa-mix-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--sa-rec);
}
.sa-attn-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--gray-200);
}
.sa-attn-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.sa-attn-text {
  flex: 1;
  min-width: 0;
}
.sa-table-wrap {
  overflow-x: auto;
}
.sa-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.sa-step {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-500);
  padding: 6px 12px;
  font: inherit;
}
.sa-step[aria-current="step"] {
  border-color: var(--primary-600);
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}
.sa-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.sa-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.sa-count {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
}
.sa-count strong {
  display: block;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.sa-row-actions,
.sa-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sa-footer-actions {
  justify-content: flex-end;
  margin-top: 12px;
}
.sa-match {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}
.sa-textarea {
  width: 100%;
  min-height: 120px;
  font-family: var(--sazi-font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
}
/* WORK-443: correction errors are hidden until the server or validation reports one. */
.document-number-error.is-hidden { display: none; }

/* WORK-1114 — invoice Document fields card (invoice-document-card.js). */
.inv-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inv-doc-sub { font-size: 12px; color: var(--wa-color-neutral-50); text-align: right; margin: 2px 0 6px; }
.inv-doc-problem { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--wa-color-warning-40, #c98a00); background: var(--wa-color-warning-95, #fff8e6); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.inv-doc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--wa-color-neutral-80, #e5e7eb); }
.inv-doc-row-label { font-size: 12px; color: var(--wa-color-neutral-50); }
.inv-doc-row-value { font-weight: 600; overflow-wrap: anywhere; }
.inv-doc-row-why { grid-column: 1 / -1; font-size: 12px; color: var(--wa-color-neutral-40); }
.inv-doc-note { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--wa-color-neutral-40); margin-top: 8px; }
.inv-doc-ack { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 8px; cursor: pointer; }
.inv-doc-list { margin: 6px 0 10px 18px; }
.inv-doc-template-row { align-items: center; }

/* WORK-1114 — Settings → Invoice templates (invoice-templates-settings.js). */
.its-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.its-intro, .its-muted { color: var(--wa-color-neutral-50); }
.its-small { font-size: 12px; margin-top: 8px; }
.its-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.its-end { justify-content: flex-end; margin-top: 16px; }
.its-table { width: 100%; border-collapse: collapse; }
.its-table th, .its-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--wa-color-neutral-90); }
.its-row { cursor: pointer; }
.its-row:hover td, .its-selected td { background: var(--wa-color-brand-95); }
.its-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .its-grid { grid-template-columns: 1fr; } }
.its-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 640px) { .its-form { grid-template-columns: 1fr; } }
.its-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 12px; }
.its-sources label, .its-inline { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.its-hint { flex-basis: 100%; font-size: 12px; color: var(--wa-color-neutral-50); }
.its-note { border-left: 3px solid var(--wa-color-brand-60); background: var(--wa-color-brand-95); padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.its-field { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 10px; align-items: end; padding: 12px 40px 12px 12px; margin-bottom: 8px; border: 1px solid var(--wa-color-neutral-90); border-radius: 8px; }
.its-field .its-remove { position: absolute; top: 6px; right: 4px; }
.its-broken { grid-column: 1 / -1; color: var(--wa-color-danger-40); font-size: 12px; }
.its-seller { display: flex; gap: 8px; align-items: end; margin-bottom: 6px; }
.its-seller wa-input { flex: 1; }
.its-paper { background: #fff; color: #1b1f27; border: 1px solid var(--wa-color-neutral-90); border-radius: 6px; padding: 18px; margin-top: 12px; font-size: 12px; overflow-wrap: anywhere; }
.its-paper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.its-empty { color: var(--wa-color-neutral-50); margin: 0; }
.inv-doc-refresh-row { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-doc-review { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.inv-doc-review th { text-align: left; font-weight: 600; padding: 4px 8px 4px 0; vertical-align: top; }
.inv-doc-review td { padding: 4px 8px 4px 0; overflow-wrap: anywhere; }
/* WORK-984 — batch-distillation observation corrections. */
.bdo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bdo-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.bdo-note-cell {
  max-width: 260px;
}
.bdo-note {
  overflow-wrap: anywhere;
}
.bdo-dialog-stack {
  display: grid;
  gap: 12px;
}
.bdo-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.bdo-h4 {
  margin: 0 0 4px;
  font-size: 13px;
}
.bdo-muted {
  font-size: 13px;
  color: var(--gray-500);
}

/* Exact physical package membership in the barrel split dialog. */
.barrel-split-package-identifiers { max-height: 12rem; overflow: auto; }