/* Invoice header — matches production InvoiceHeader.styles.ts:
   padding 32px 32px 16px (not 32 all around), info-card min-height 108px,
   reduced inter-row gap. Bleeds to content-root edges. */
.inv-page-header {
  background: #E2EEF1;
  padding: 28px 32px 16px;
  margin: -19px -15px 20px -15px;
  border-radius: 0;
  display: flex; flex-direction: column;
  gap: 16px;
}

/* ─── Row 1: Title bar ─────────────────────────────────────────────── */
.inv-title-bar {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}
.inv-title-left {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-width: 0;
  flex-wrap: wrap;
}
.inv-title-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Back arrow circle (24x24) */
.inv-back-circle {
  width: 24px; height: 24px;
  border: 1px solid var(--fx-primary-500);
  background: transparent;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.inv-back-circle:hover { background: rgba(86,135,147,.08); }

/* Title icon box: 32x32 dark rounded-square + title */
.inv-title-iconbox { display: inline-flex; align-items: center; gap: 8px; }
.inv-title-icon-square {
  width: 32px; height: 32px;
  background: #172326;
  border-radius: 6.4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inv-title-icon-square img { filter: brightness(0) invert(1); width: 19px; height: 19px; }
.inv-title-text {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px; line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: #172326;
  white-space: nowrap;
}

/* Status chip — 96w, 24h, palette.status hex, 10.8/600/0.2 #5C6467 capitalize */
.inv-status-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 24px;
  border-radius: 50px;
  border: 1px solid;
  font-family: 'Open Sans';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #5C6467;
  text-transform: capitalize;
  white-space: nowrap;
  box-sizing: border-box;
}
.inv-status-chip-in_progress { background: #F1FBFE; border-color: #56CCF2; }
.inv-status-chip-in_dispute   { background: #FEF7F1; border-color: #F2994A; }
.inv-status-chip-approved     { background: #EEF9F2; border-color: #27AE60; }
.inv-status-chip-pending      { background: #F3F9FD; border-color: #2D9CDB; }
.inv-status-chip-pending_review { background: #F1FBFE; border-color: #2D9CDB; }
.inv-status-chip-pending_resolution { background: #FEFAF6; border-color: #F7C08F; }
.inv-status-chip-pending_credit { background: #FEF3FB; border-color: #f9c9eb; }
.inv-status-chip-credited     { background: #FAF6FE; border-color: #BB6BD9; }
.inv-status-chip-rejected     { background: #FEF5F5; border-color: #F48085; }
.inv-status-chip-resolved     { background: #FAF6FE; border-color: #BB6BD9; }

/* Doc button (plain icon + uppercase label) — production style, no white circle */
.inv-title-left .inv-doc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  font-family: 'Open Sans';
  font-size: 12px; line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #568793;
  min-width: auto;
}
.inv-title-left .inv-doc-btn img { width: 22px; height: 22px; }
.inv-title-left .inv-doc-btn:hover { color: #3C636C; }

/* Right paginator + Tickets link */
.inv-paginator-arrow {
  width: 24px; height: 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #568793;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.inv-paginator-arrow .icon { font-size: 18px; }
.inv-paginator-arrow:hover { color: #3C636C; }
.inv-tickets-link {
  font-family: 'Open Sans';
  font-size: 12px; line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #568793;
  text-decoration: none;
  cursor: pointer;
}
.inv-tickets-link:hover { color: #3C636C; }

/* ─── Row 2: Info cards row ─────────────────────────────────────────── */
.inv-info-cards {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
  overflow-x: auto;
}
/* Production caps card height at 108px (InvoiceHeader.styles.ts:143/152).
   This prevents the Charges Status card with 3 rows from blowing up the
   whole row via flex `align-items: stretch`. */
.inv-info-card {
  background: white;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  min-height: 108px;
  max-height: 108px;
  box-sizing: border-box;
  overflow: hidden;
}
.inv-info-label {
  font-family: 'Open Sans';
  font-size: 11px; line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #8B9092;
}
.inv-info-row { display: flex; align-items: center; gap: 16px; }
.inv-info-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-info-val {
  font-family: 'Open Sans';
  font-size: 15px; line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #172326;
  white-space: nowrap;
}
.inv-info-sublabel {
  font-family: 'Open Sans';
  font-size: 11px; line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #8B9092;
  white-space: nowrap;
}

/* Card 1: Type/Category/Score — 3 columns split by vertical dividers */
.inv-info-tcs { flex-direction: row; align-items: center; gap: 16px; padding: 16px; }
.tcs-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  min-width: 56px;
}
.tcs-icon-wrap {
  width: 56px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tcs-icon-circle {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #F6F9FA 0%, #E8F2F4 100%);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.tcs-score-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-family: 'Open Sans';
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1px;
}
.tcs-label {
  font-family: 'Open Sans';
  font-size: 11px; line-height: 16px;
  color: #8B9092;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.tcs-vdiv {
  width: 1px; height: 64px;
  background: #F0F0F0;
}

/* Card 2: Seller */
.inv-info-seller .inv-seller-name {
  font-family: 'Open Sans';
  font-size: 14px; line-height: 20px;
  font-weight: 700;
  color: #172326;
  letter-spacing: 0.15px;
}

/* Card 4: Approved check */
.inv-approved-check {
  width: 28px; height: 28px;
  background: #27AE60;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white;
}
.inv-approved-check img { filter: brightness(0) invert(1); width: 14px; height: 14px; }
.inv-approved-check .icon { font-size: 16px; line-height: 1; }

/* Card 5: Reconciliation — green/pink progress bar + 2 columns */
.inv-info-reco { min-width: 280px; }
.inv-reco-head {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inv-reco-bar {
  display: inline-flex;
  height: 6px;
  width: 160px;
  border-radius: 100px;
  overflow: hidden;
  background: #F0F0F0;
}
.inv-reco-bar-green { background: #27AE60; height: 100%; }
.inv-reco-bar-pink  { background: #EC6AC8; height: 100%; }
.inv-reco-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.inv-reco-icon img { filter: brightness(0) invert(1); width: 14px; height: 14px; }
.inv-reco-icon .icon { color: white; font-size: 16px; line-height: 1; }
.inv-reco-icon-green { background: #27AE60; }
.inv-reco-icon-pink  { background: #EC6AC8; }

/* Card 5: Charges Status — 3 rows w/ colored circle icons + currency values */
.inv-info-charges { min-width: 280px; }
.inv-charges-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.inv-charges-row {
  display: flex; align-items: center; gap: 8px;
}
.inv-charges-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inv-charges-icon img { filter: brightness(0) invert(1); width: 12px; height: 12px; }
.inv-charges-icon .icon { color: white; font-size: 13px; line-height: 1; }
.inv-charges-icon-blue { background: #2D9CDB; }
.inv-charges-icon-lime { background: #88C00D; }
.inv-charges-icon-red  { background: #EB5757; }

.inv-charges-bars {
  display: flex; align-items: flex-end;
  gap: 2px;
}
.inv-charges-bar {
  width: 6px;
  border-radius: 1px;
  display: inline-block;
}

/* Card 4 (Reco) — pair of icon + col layout */
.inv-info-col-icon {
  display: flex; align-items: center; gap: 10px;
  flex: 1;
}

/* SHOW MORE toggle at the bottom of the header */
.inv-header-foot {
  display: flex; justify-content: flex-end;
  width: 100%;
  margin-top: -4px;
}
.inv-show-more {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 0;
  font-family: 'Open Sans';
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #568793;
}
.inv-show-more:hover { color: #3C636C; }
.inv-show-more .chev { font-size: 14px; line-height: 1; }

/* ─── Sub-tabs bar (Invoice / Reconciliation) + Upload files ────────────── */
.inv-subtabs-bar {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #E0E5EB;
  margin-bottom: 16px;
}
.inv-sub-tabs { display: flex; gap: 0; }
.inv-sub-tab {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 18px;
  font-family: 'Open Sans';
  font-size: 14px; line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: #8B9092;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.inv-sub-tab.active {
  color: #568793;
  border-bottom-color: #568793;
}
.inv-sub-tab:hover { color: #568793; }

.inv-upload-files {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
  font-family: 'Open Sans';
  font-size: 12px; line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #568793;
}
.inv-upload-files:hover { color: #3C636C; }
.inv-upload-files img { width: 18px; height: 18px; }
.inv-upload-files .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 18px !important;
  line-height: 1;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ─── Invoice Lines section ─────────────────────────────────────────────── */
.inv-lines-title {
  margin: 8px 0 16px;
  font-family: 'Open Sans';
  font-size: 18px; line-height: 24px;
  font-weight: 700;
  color: #172326;
  letter-spacing: 0.1px;
}
.inv-filter-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid #E0E5EB;
  margin-bottom: 16px;
}
.inv-filter-tab {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  font-family: 'Open Sans';
  font-size: 12px; line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #87ACB6;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.inv-filter-tab.active {
  color: #568793;
  border-bottom-color: #568793;
}
.inv-filter-tab:hover { color: #568793; }

/* Quick Actions row (label + ghost pill buttons) */
.inv-quick-actions {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.inv-qa-label {
  font-family: 'Open Sans';
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #87ACB6;
}
.inv-qa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: white;
  border: 1px solid #C6DDE2;
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: 'Open Sans';
  font-size: 12px; line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #568793;
  transition: all .15s;
}
.inv-qa-btn:hover {
  background: #568793; color: white; border-color: #568793;
}
.inv-qa-btn:hover img { filter: brightness(0) invert(1); }
.inv-qa-btn img { width: 14px; height: 14px; }
.inv-qa-btn .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 16px !important;
  line-height: 1;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ─── Invoice Lines table ──────────────────────────────────────────────── */
.inv-lines-table-wrap { overflow-x: auto; }
.inv-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Open Sans';
  font-size: 13px;
  letter-spacing: 0.15px;
}
.inv-lines-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #8B9092;
  text-transform: uppercase;
  padding: 12px 8px;
  border-bottom: 1px solid #E0E5EB;
  white-space: nowrap;
}
.inv-lines-table tbody td {
  padding: 14px 8px;
  border-bottom: 1px solid #F0F0F0;
  color: #172326;
  vertical-align: middle;
}
.inv-line-row { transition: background .15s; }
.inv-line-row:hover { background: #F8FAFB; }
.inv-lines-table .col-cb { width: 32px; }
.inv-lines-table .col-cb input { cursor: pointer; }
.inv-lines-table .col-st { width: 56px; }
.inv-line-stbadge {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.inv-line-stbadge img { width: 14px; height: 14px; }
.inv-line-stbadge .icon { font-size: 14px; line-height: 1; }
.inv-lines-table .col-num {
  font-weight: 500;
  color: #8B9092;
  width: 32px;
}
.inv-line-event { font-weight: 500; color: #172326; }
.inv-lines-table .col-ov, .inv-lines-table .col-fv { font-weight: 700; }
.inv-line-fv { color: #568793; }
.fv-pill-th {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #3c636c 0%, #72b1c1 100%);
  color: white;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.fv-pill-th img { width: 10px; height: 10px; filter: brightness(0) invert(1); }
.inv-line-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 22px;
  border-radius: 30px;
  color: white;
  font-size: 11px; font-weight: 700;
  padding: 0 8px;
}
.inv-line-exc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FEF6F6;
  color: #EB5757;
  font-size: 12px; font-weight: 700;
}
.inv-lines-table .col-act { white-space: nowrap; }
.inv-line-approve {
  font-family: 'Open Sans';
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #568793;
  cursor: pointer;
  margin-right: 12px;
}
.inv-line-approve:hover { color: #3C636C; }
.inv-line-approve.approved {
  color: #27AE60;
  cursor: default;
  pointer-events: none;
}
.inv-line-dispute {
  font-family: 'Open Sans';
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #EB5757;
  cursor: pointer;
  margin-right: 12px;
}
.inv-line-dispute:hover { color: #C53030; }
.inv-line-dispute.disputed {
  color: #F2994A;
  cursor: default;
  pointer-events: none;
}

/* Expandable line detail row */
.inv-line-detail { display: none; }
.inv-line-detail.open { display: table-row; }
.inv-line-detail-inner {
  background: #F7FAFC;
  border-top: 1px solid #E0E5EB;
  padding: 16px 20px;
  animation: ildIn .2s ease;
}
@keyframes ildIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inv-line-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.ild-label {
  font: 600 11px/14px "Open Sans";
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8B9092;
  margin-bottom: 4px;
}
.ild-value {
  font: 600 13px/18px "Open Sans";
  color: #172326;
}
.ild-delta { color: #EB5757; }
.inv-line-detail-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #E0E5EB;
}
.ild-history {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/16px "Open Sans";
  color: #4F6063;
}
.ild-history .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 14px !important; line-height: 14px !important;
  color: #8B9092;
}
.inv-line-detail-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid #87ACB6;
  color: #2F4F57;
  border-radius: 6px;
  padding: 6px 12px;
  font: 600 12px/16px "Open Sans";
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.inv-line-detail-btn:hover { background: rgba(86, 135, 147, 0.1); }
.inv-line-detail-btn .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 16px !important; line-height: 16px !important;
}
.inv-line-tbl-icon { color: #87ACB6; cursor: pointer; vertical-align: middle; }
.inv-line-tbl-icon img { width: 16px; height: 16px; }
.inv-line-tbl-icon .icon { font-size: 18px; line-height: 1; }

/* Red variant for reco icon */
.inv-reco-icon-red { background: #EB5757; }

/* Embedded Fair Value pill inside Total card */
.inv-info-card .inv-fair-pill {
  margin-top: 4px;
}

.inv-detail-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.inv-detail-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.inv-detail-icon { font-size: 32px !important; color: var(--fx-primary-main); }

/* FxScore variant='circle' — solid colored disk, white text. Source: FxScore/
   styles/score.styles.js container + scoreNumber styled. */
.inv-score-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  color: white;
}
.inv-detail-icon-wrap { display: inline-flex; align-items: center; }
/* PageTitle = theme.typography.h4 (25/40/400) + common.black; uppercase from
   production source line 617 invoice?.name?.toUpperCase().
   Source: app/modules/AuditFlow/InvoiceView/content/InvoiceTab/InvoiceHeader.tsx
   line 616-619 + FxStyledComponents PageTitle. */
.inv-detail-name {
  margin: 0;
  font-size: 25px; line-height: 40px; font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
}
.inv-detail-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Reco ID teal pill verbatim from InvoiceHeader.tsx:631-651:
   24h, padding 6/9.6, #568793 + 1.2px border, radius 50px, white text
   10.8px Open Sans 600, capitalize, letter-spacing 0.2px. */
.inv-reco-pill {
  display: inline-flex; align-items: center;
  height: 24px;
  padding: 5px 10px;
  box-sizing: border-box;
  background: var(--fx-primary-500);
  border: 1px solid var(--fx-primary-500);
  border-radius: 50px;
  color: white;
  font-family: 'Open Sans';
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}

/* Production "Original documents" / "Supporting documents" button styling */
/* InvoicePDFView from app/modules/AuditFlow/InvoiceView/content/InvoiceTab/
   InvoiceHeader.components.tsx lines 144-176:
   Box with FxIcon 16x16 + Typography body1 (14/24/normal/0.15) override
   fontWeight 600, color primary[500], ml 6px on text, whitespace nowrap,
   minWidth 100. */
.inv-doc-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0;
  font-family: 'Open Sans';
  font-size: 14px; line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: var(--fx-primary-500);
  white-space: nowrap;
}
.inv-doc-btn .icon { font-size: 16px; color: inherit; }
.inv-doc-btn img { width: 16px; height: 16px; display: block; }
.inv-doc-btn span { margin-left: 6px; }
.inv-doc-btn:hover { color: var(--fx-primary-700); }

/* MainInfoCard from InvoiceHeader.styles.ts:147-157:
   borderRadius 8, boxShadow none, height 108, padding 0, width fit-content.
   Demo uses min-height since our cells (Type/Category split, plus a separate
   Score cell) need slightly more vertical space than production's 108 target. */
.inv-main-card {
  display: flex; align-items: stretch; gap: 0;
  border-radius: var(--fx-radius); background: white;
  overflow: hidden;
  min-height: 108px;
  width: fit-content;
  max-width: 100%;
}
.inv-main-card-section {
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
  min-width: 140px; position: relative;
}
.inv-main-card-section + .inv-main-card-section {
  border-left: 1px solid var(--fx-header-bg);
}

.inv-info-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.inv-info-tile { padding: 14px; }
.inv-info-tile .label { margin-bottom: 6px; }
.inv-info-tile .value-bold { font-size: 15px; }

/* Legacy .inv-sub-tabs / .inv-sub-tab rules removed — replaced by the
   .inv-subtabs-bar (underline-tab) pattern earlier in this file. */

.charge-line {
  margin-bottom: 8px; border-radius: var(--fx-radius);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden; transition: box-shadow .15s;
}
.charge-line:hover { box-shadow: 0 2px 8px rgba(86,135,147,.1); }

.charge-head {
  display: flex; justify-content: space-between; align-items: center;
  height: 56px; padding: 0 16px; cursor: pointer; background: white;
  transition: background .15s;
}
.charge-head:hover { background: #f6f9fa; }
.charge-head-left { display: flex; align-items: center; gap: 12px; }
.charge-head-left .charge-type { font-size: 13px; font-weight: 600; }
.charge-head-left .charge-id { font-size: 11px; color: var(--fx-body); }
.charge-head-right { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.charge-head-right .charge-fair { font-weight: 700; }
.charge-head .expand-icon {
  font-family: 'Material Icons Outlined'; font-size: 18px; color: var(--fx-grey-400);
  transition: transform .2s;
}
.charge-head .expand-icon.open { transform: rotate(180deg); }

.charge-body {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  background: #fafcfc;
}
.charge-body.open { max-height: 400px; }
.charge-body-inner {
  padding: 16px; border-top: 1px solid var(--fx-divider);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  font-size: 12px;
}
.charge-detail-item .label { margin-bottom: 4px; }

.detail-charts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
}
.detail-charts .dash-panel { min-height: 300px; }

.reco-timeline { padding: 16px; }
.reco-step {
  display: flex; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--fx-divider);
}
.reco-step:last-child { border-bottom: none; }
.reco-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 4px; flex-shrink: 0;
}
.reco-step-content { flex: 1; }
.reco-step-title { font-size: 13px; font-weight: 600; }
.reco-step-meta { font-size: 11px; color: var(--fx-body); margin-top: 2px; }

@media (max-width: 900px) {
  .inv-info-strip { grid-template-columns: 1fr 1fr; }
  .detail-charts { grid-template-columns: 1fr; }
  .charge-body-inner { grid-template-columns: 1fr; }
}

/* ── P0-E: Fixenator confidence column ───────────────────────────────── */
.col-conf { width: 90px; white-space: nowrap; }
.inv-conf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  font: 600 11px/16px "Open Sans", sans-serif;
  letter-spacing: 0.3px;
}
.inv-conf-badge .icon { font-size: 14px !important; line-height: 14px !important; }
.inv-conf-high { background: rgba(39,174,96,.12);   color: #27AE60; }
.inv-conf-med  { background: rgba(242,153,74,.12);  color: #F2994A; }
.inv-conf-low  { background: rgba(237,50,59,.12);   color: #ED323B; }

/* column header ai-mark alignment */
.col-conf .ai-mark { gap: 4px; }
.col-conf .ai-mark .icon { font-size: 13px !important; }

/* Primary invoice action buttons in header (Send to Supplier, Dispute, Decline) */
.inv-action-primary-btn {
  background: rgba(86,135,147,.08);
  border: 1px solid rgba(86,135,147,.3) !important;
  border-radius: 6px;
  padding: 6px 12px !important;
  color: #568793 !important;
  transition: all .12s !important;
  min-width: auto !important;
}
.inv-action-primary-btn:hover { background: rgba(86,135,147,.16); border-color: #568793 !important; }

.inv-action-dispute-btn {
  color: #EB5757 !important;
  border-color: rgba(235,87,87,.3) !important;
  background: rgba(235,87,87,.04) !important;
}
.inv-action-dispute-btn:hover { background: rgba(235,87,87,.1) !important; border-color: #EB5757 !important; }

.inv-action-decline-btn {
  color: #8B9092 !important;
  border-color: #E2E7EB !important;
  background: #F7F8F9 !important;
}
.inv-action-decline-btn:hover { background: #EEF0F2 !important; border-color: #8B9092 !important; }