/* AuditTabs — values verbatim from AuditBoard.tsx lines 52-80 (AuditTab styled). */
.audit-tabs {
  display: flex; align-items: center;
  gap: 32px;
  height: 40px;
}
.audit-tab {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0;
  cursor: pointer;
  font-family: 'Open Sans';
  font-size: 12px; font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fx-primary-100);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
}
.audit-tab:hover { color: var(--fx-primary-500); }
.audit-tab.active {
  color: var(--fx-primary-500);
  border-color: var(--fx-primary-500);
}

/* ─── Audit list-page header search + filter chips ─── */
.audit-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 280px;
}
.audit-search-wrap .icon {
  position: absolute;
  left: 12px;
  font-family: 'Material Icons Outlined' !important;
  font-size: 18px !important;
  color: #8B9092;
  pointer-events: none;
}
.audit-search-input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid #E0E5EB;
  border-radius: 999px;
  background: #ffffff;
  font: 400 13px/18px "Open Sans";
  color: #172326;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.audit-search-input::placeholder { color: #8B9092; }
.audit-search-input:focus {
  border-color: #568793;
  box-shadow: 0 0 0 3px rgba(86, 135, 147, 0.15);
}

.filters-bar {
  justify-content: space-between;
}
.audit-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.audit-chip-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.audit-chip-select {
  height: 32px;
  padding: 0 28px 0 12px;
  border: 1px solid #D6DCE0;
  border-radius: 999px;
  background: #ffffff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%238B9092' d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 10px center;
  background-size: 12px;
  font: 500 12px/16px "Open Sans";
  color: #4F6063;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.audit-chip-select:hover {
  border-color: #87ACB6;
  color: #2F4F57;
}
.audit-chip-select:focus { border-color: #568793; }
.audit-chip-select.chip-active {
  background-color: rgba(86, 135, 147, 0.1);
  border-color: #568793;
  color: #2F4F57;
  font-weight: 600;
}
.audit-clear-filters {
  background: transparent;
  border: 0;
  padding: 0 10px;
  height: 32px;
  cursor: pointer;
  font: 600 11px/14px "Open Sans";
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #568793;
  border-radius: 6px;
  transition: background-color .15s ease;
}
.audit-clear-filters:hover { background: rgba(86, 135, 147, 0.08); }

/* Make the auditflow page a vertical flex column so .audit-board can take the rest
   of the viewport height and keep its horizontal scrollbar on screen. */
.auditflow-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Single scroll container so the KPI strip and the kanban columns scroll together
   horizontally AND vertically. Both children are the same total width (3960px).
   Vertical scrolling inside this container keeps the agg-strip stuck via
   position: sticky; top: 0. Horizontal scrollbar lives at the bottom of this
   container — which is the bottom of the viewport, not the bottom of the cards. */
/* AuditBoard wrapper from app/modules/AuditFlow/AuditBoard.tsx line 547:
   sx={{ padding: '0 17px', overflowX: 'auto' }}. */
.audit-board {
  flex: 1;
  min-height: 0;
  padding: 0 17px;
  overflow-x: scroll;       /* always show the bar, not just on hover */
  overflow-y: auto;
  padding-bottom: 0;
  scrollbar-color: var(--fx-primary-500) transparent;
  scrollbar-width: thin;
}
.audit-board::-webkit-scrollbar { height: 12px; }
.audit-board::-webkit-scrollbar-track {
  background: transparent;
  border-top: 1px solid var(--fx-divider);
}
.audit-board::-webkit-scrollbar-thumb {
  background: var(--fx-primary-500);
  border-radius: 6px;
  border: 3px solid var(--fx-page-bg);
}
.audit-board::-webkit-scrollbar-thumb:hover { background: var(--fx-primary-main); }

/* agg-strip: production sets height 78 + mt:3 (24px) on the outer Box.
   Source: AuditAggregationsBar.tsx lines 140-148. */
.agg-strip {
  display: flex;
  gap: var(--fx-column-gap);
  margin-top: 24px;
  margin-bottom: 16px;
  min-height: 78px;
  overflow-x: visible;
  width: max-content;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--fx-page-bg);
}
.agg-group { flex-shrink: 0; }
.agg-group-title {
  font-size: 11px; color: var(--fx-body); line-height: 2;
}
.agg-group-cells { display: flex; height: 60px; }
.agg-cell {
  padding: 8px 16px; color: white;
}
.agg-cell:first-child { border-radius: 8px 0 0 8px; }
.agg-cell:last-child  { border-radius: 0 8px 8px 0; }
.agg-cell:only-child  { border-radius: 8px; }
/* TheNumbers from AuditAggregationsBar.tsx lines 363-394:
   - Value Typography: Open Sans 19/28/600, letterSpacing 0.15, color common.white.
   - Label Typography: Open Sans 11/16/400, letterSpacing 0.1, color common.white, opacity 0.8. */
.agg-cell .agg-value {
  font-family: 'Open Sans';
  font-size: 19px; line-height: 28px;
  font-weight: 600; letter-spacing: 0.15px;
  color: white;
}
.agg-cell .agg-label {
  font-family: 'Open Sans';
  font-size: 11px; line-height: 16px;
  font-weight: 400; letter-spacing: 0.1px;
  color: white; opacity: 0.8;
  text-transform: capitalize;
}

.audit-columns {
  display: flex; gap: var(--fx-column-gap);
  overflow-x: visible;
  width: max-content;
}

.audit-column {
  width: var(--fx-column-w); min-width: var(--fx-column-w); flex-shrink: 0;
  min-height: 365px;
}
/* HeaderItem from app/modules/AuditFlow/AuditBoard.tsx lines 653-676:
   marginLeft 5, paddingTop 5; plus the outer sticky Box (top -20, mt 2).
   The .audit-board wrapper handles vertical scroll; this stays sticky to keep
   column headers pinned while cards scroll. */
.column-header {
  position: sticky; top: 0; z-index: 2;
  padding-top: 5px;
  padding-left: 5px;
  margin-top: 16px;
  background: var(--fx-page-bg);
}

/* StyledCard from app/modules/AuditFlow/styles/AuditItems.styles.tsx lines
   14-32: width 308, position relative, borderRadius 8, overflow unset,
   hover box-shadow 'rgba(149,157,165,0.2) 0px 8px 24px'. mt:2/mb:2 = 16/16
   from the wrapping <StyledCard sx={{ mt: 2, mb: 2, position: 'relative' }}>
   in InvoiceItem.tsx line 156. */
.inv-card {
  width: 308px; border-radius: 8px;
  overflow: unset;
  margin-top: 16px; margin-bottom: 16px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--fx-greyscale-200);
  background: white;
  transition: box-shadow .2s;
}
.inv-card:hover { box-shadow: var(--fx-shadow-hover); }

/* Production-style invoice card: stacked sections with explicit labels matching app/'s
   InvoiceItem (Invoice ID, Shipment Number, BOL Number, Original Value, Fair Value, ...) */
.inv-section { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.inv-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.inv-id-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-id-block .inv-id { font-size: 13px; font-weight: 700; line-height: 18px; color: var(--fx-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

.inv-ship-bol { display: flex; gap: 16px; overflow: hidden; }
.inv-ship-bol-col {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.inv-ship-bol-col .value-bold {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--fx-title);
}

.inv-amounts {
  display: flex; justify-content: space-between; padding: 14px 16px;
  border-top: 1px solid var(--fx-divider);
}
.inv-amount-col { display: flex; flex-direction: column; gap: 2px; }
.inv-fair-badge {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.inv-fair-amount {
  font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 14px;
  line-height: 20px; letter-spacing: .1px; color: var(--fx-primary-main);
}
/* FairValueLabel from app/node_modules/@fixefy/fixefy-ui-components/dist/
   FxFairValueBadge/styles/fair_value_badge.styles.js line 58-67:
   Open Sans 10/16/600, letter-spacing 0.5, uppercase, color common.white. */
.inv-fair-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 10px;
  background: linear-gradient(90deg, #3c636c 0%, #72b1c1 100%);
  font-family: 'Open Sans', sans-serif;
  font-size: 10px; line-height: 16px;
  font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: white; white-space: nowrap;
}

/* Main Content Area wrapping Supplier + Dates: production has
   <Box sx={{ px: 2, pt: 2, pb: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
   = padding 16/16/24/16, gap 16 between rows.
   Source: InvoiceItem.tsx line 230. */
.inv-supplier {
  padding: 16px 16px 0 16px;
  display: flex; justify-content: space-between; align-items: center;
}
/* InfoValueBold maxWidth 120 per AuditItems.styles.tsx:85 — ellipsize long
   carrier/shipment values inside the card. */
.inv-supplier-name {
  font-family: 'Open Sans';
  font-size: 14px; line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.15px;
  color: #172326;
  max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Branded carrier-logo pill — 87x20 mimics production FxIcon companies/<seller>.
   Use carrier-specific gradient + monogram-style text. */
.inv-supplier-logo {
  width: 87px; height: 20px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #568793, #72b1c1);
  flex-shrink: 0;
}
/* Per-carrier brand colors — flat, muted for enterprise readability */
.inv-supplier-logo[data-carrier="FedEx"]         { background: #5a2d82; }
.inv-supplier-logo[data-carrier="XPO"]           { background: #a8001a; }
.inv-supplier-logo[data-carrier="J.B. Hunt"]     { background: #9e0e22; }
.inv-supplier-logo[data-carrier="C.H. Robinson"] { background: #1a56a0; }
.inv-supplier-logo[data-carrier="Echo"]          { background: #b84017; }

.inv-dates { padding: 0 16px 12px; }

/* RecoItem top-right cluster (Priority pill + match badge).
   Source: app/modules/AuditFlow/content/Reconciliations/RecoItem.tsx line 228. */
.reco-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* CardPriority pill — production styled in
   app/modules/AuditFlow/content/Reconciliations/styles/ReconcilationItem.styles.ts.
   Colors from theme.palette.priority + chipPriority. */
.reco-priority {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 50px;
  text-transform: capitalize;
}
/* chipPriority hex from page_context/index.js:233-258 — label and border share
   the same hex; background is a paired light tint hex (NOT an alpha mix). */
.reco-pri-critical { background: #FEF6F6; color: #EB5757; border: 1px solid #EB5757; }
.reco-pri-high     { background: #FEF7F1; color: #F2994A; border: 1px solid #F2994A; }
.reco-pri-medium   { background: #F6FAEC; color: #88C00D; border: 1px solid #88C00D; }
.reco-pri-low      { background: #F1FBFE; color: #2D9CDB; border: 1px solid #2D9CDB; }
.reco-pri-marginal { background: #F1FBFE; color: #56CCF2; border: 1px solid #56CCF2; }

/* Reco "Expected refund" section — production wraps it in a Box p:16px (RecoItem.tsx
   line 272). Separated from header + carrier with dividers. */
.reco-refund-section {
  padding: 16px;
  border-top: 1px solid var(--fx-divider);
  border-bottom: 1px solid var(--fx-divider);
  display: flex; flex-direction: column; gap: 2px;
}
.reco-refund-value {
  font-size: 14px; font-weight: 700; line-height: 20px;
  letter-spacing: 0.15px;
  color: var(--fx-title);
}
/* Dates row sits below Supplier in the same wrapping Box. Tighter padding
   since the outer container handles px/pt/pb; only need gap from above. */
.inv-dates-progress {
  padding: 0 16px 16px 16px;
  margin-top: 16px;
}
/* Audit-card Progress override (AuditItems.styles.tsx:41-48): track #F6F9FA,
   bar primary[500] (#568793). Contracts Progress uses different colors (handled
   in contracts.css). */
.inv-dates-progress .progress-bar { background: #F6F9FA; }
.inv-dates-progress .progress-bar-fill { background: var(--fx-primary-500); }
.inv-dates-row {
  display: flex; justify-content: space-between; margin-bottom: 8px;
}
.inv-dates-row .value-sm {
  font-size: 12px; font-weight: 400; color: var(--fx-title); line-height: 18px;
}

.inv-expand-section {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.inv-expand-section.open { max-height: 300px; }

.inv-charges-stats {
  padding: 10px 16px 12px; border-top: 1px solid var(--fx-divider);
}
.inv-charges-stats .stats-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.inv-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.inv-stat-item { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.inv-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inv-stat-val { font-weight: 700; }

/* Show More toggle — production InvoiceItem.tsx lines 312-355:
   borderTop 1px palette.divider, display flex, gap 4px, px:2 (16px), py:1 (8px).
   Inner Typography: 12/16/600/0.5, uppercase, color primary.main. */
.inv-toggle {
  border-top: 1px solid #F0F3F5;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font: 500 11px/15px 'Open Sans';
  letter-spacing: 0.3px;
  color: #8B9092;
  transition: background .12s, color .12s;
}
.inv-toggle:hover { background: #F7F8FA; color: var(--fx-primary-500); }
.inv-toggle-label { transition: color .12s; }
.inv-toggle-chevron {
  font-family: 'Material Icons Outlined' !important;
  font-size: 16px !important; text-transform: none !important; letter-spacing: 0 !important;
  color: inherit;
  transition: transform .25s ease;
}
.inv-toggle.open .inv-toggle-chevron { transform: rotate(180deg); }

/* ── Ironclad pattern: risk score badge on invoice cards ─────────────── */
.inv-risk-bar {
  height: 3px;
  width: 100%;
  border-radius: 3px 3px 0 0;
  margin: -1px -1px 0;
  width: calc(100% + 2px);
}
.inv-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  font: 600 10px/14px "Open Sans", sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.inv-risk-badge .icon { font-size: 12px !important; }
.inv-risk-amt {
  font-weight: 700;
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid currentColor;
  opacity: 0.7;
}

/* ── Fixenator Queue column ───────────────────────────────────────────── */
.audit-column-fxn {
  width: var(--fx-column-w); min-width: var(--fx-column-w); flex-shrink: 0;
  border: 1px solid rgba(86,135,147,.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(86,135,147,.05) 0%, transparent 60%);
  position: relative;
}
.column-header-fxn {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(86,135,147,.12);
}
.fxn-col-row1 {
  display: flex; align-items: center; justify-content: space-between;
}
.fxn-col-title {
  display: flex; align-items: center; gap: 5px;
  font: 700 11px/15px "Open Sans";
  letter-spacing: 0.4px;
  color: #568793;
  text-transform: uppercase;
  white-space: nowrap;
}
.fxn-col-badges { display: flex; align-items: center; gap: 4px; }
.fxn-col-count {
  font: 600 10px/14px "Open Sans";
  background: rgba(86,135,147,.14);
  color: #568793;
  border-radius: 999px;
  padding: 1px 7px;
}
.fxn-execute-all {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(86,135,147,.3);
  background: rgba(86,135,147,.08);
  color: #568793;
  font: 600 11px/15px "Open Sans";
  cursor: pointer;
  transition: all .15s ease;
}
.fxn-execute-all:hover { background: rgba(86,135,147,.16); border-color: #568793; }
.fxn-execute-all .icon { font-size: 14px !important; }

/* ── Fixenator confidence badge on invoice cards ─────────────────────── */
.inv-fxn-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  transition: opacity .15s;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid;
  font: 600 11px/14px "Open Sans", sans-serif;
  letter-spacing: 0.2px;
}
.inv-fxn-badge .icon { font-size: 13px !important; }
.inv-fxn-label { font-weight: 400; opacity: 0.8; margin-left: 2px; }

/* ── Ramp pattern: focus mode button ─────────────────────────────────── */
.audit-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid #D6DCE0;
  border-radius: 999px;
  background: #ffffff;
  font: 500 12px/16px "Open Sans", sans-serif;
  color: #4F6063;
  cursor: pointer;
  transition: all .15s ease;
}
.audit-focus-btn .icon { font-size: 16px !important; font-family: 'Material Icons Outlined' !important; }
.audit-focus-btn:hover { border-color: #87ACB6; color: #2F4F57; }
.audit-focus-btn.active {
  background: rgba(86,135,147,.1);
  border-color: var(--fx-primary-500);
  color: var(--fx-primary-500);
  font-weight: 600;
}

/* ── Inline card actions (Send to Supplier / Dispute / Decline) ──────── */
.inv-card-actions {
  display: flex; gap: 4px;
  padding: 8px 12px 10px;
  border-top: 1px solid #F0F3F5;
  background: #F5F7F8;
  border-top: 1px solid #EEF0F2;
}
.inv-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  flex: 1;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid #E2E7EB;
  background: white;
  font: 500 11px/14px 'Open Sans';
  color: #4F6063;
  cursor: pointer;
  transition: all .12s;
  justify-content: center;
  white-space: nowrap;
}
.inv-action-btn .icon {
  font-size: 13px !important;
  font-family: 'Material Icons Outlined' !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.inv-action-send:hover  { border-color: #568793; color: #568793; background: rgba(86,135,147,.06); }
.inv-action-dispute:hover { border-color: #EB5757; color: #EB5757; background: rgba(235,87,87,.05); }
.inv-action-decline:hover { border-color: #8B9092; color: #8B9092; background: #F7F8F9; }
.inv-action-done { opacity: 0.7; cursor: default; }
.inv-action-declined { border-color: #8B9092 !important; color: #8B9092 !important; }

/* ── Fixenator Queue — empty state ──────────────────────────── */
.fxn-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 16px; gap: 8px; text-align: center;
}
.fxn-empty-icon {
  font-size: 28px !important; color: rgba(86,135,147,.3);
  font-family: 'Material Icons Outlined' !important;
  text-transform: none !important; letter-spacing: 0 !important;
  animation: aiStarTwinkle 4s ease-in-out infinite;
}
.fxn-empty-title {
  font: 600 12px/16px 'Open Sans'; color: #8B9092; margin: 0;
}
.fxn-empty-sub {
  font: 400 10px/14px 'Open Sans'; color: #C0CAD0; margin: 0;
  max-width: 220px;
}

/* Fixenator Queue cell in the aggregation strip */
.agg-cell-fxn {
  background: linear-gradient(135deg, #2F4F57 0%, #568793 100%) !important;
  border-radius: 8px;
}