/*
 * Global ERP consistency layer
 *
 * Presentation only. This file loads after every module stylesheet so the
 * shared component contract remains authoritative across the application.
 */

:root {
  --erp-font: Inter, "Segoe UI", Arial, sans-serif;
  --erp-page-gap: 1rem;
  --erp-card-gap: 0.75rem;
  --erp-card-padding: 1rem;
  --erp-card-radius: 0.875rem;
  --erp-control-height: 2.5rem;
  --erp-table-header-height: 2.625rem;
  --erp-table-row-height: 2.75rem;
  --erp-border: var(--color-border-default, rgba(141, 154, 176, 0.18));
  --erp-border-subtle: var(--color-border-subtle, rgba(141, 154, 176, 0.12));
  --erp-surface: var(--color-bg-surface, var(--card));
  --erp-surface-raised: var(--color-bg-surface-elevated, var(--card-2));
  --erp-text: var(--color-text-primary, var(--text));
  --erp-muted: var(--color-text-secondary, var(--secondary));
  --font-family-mono: var(--erp-font);
  --card-radius: var(--erp-card-radius);
  --card-padding: var(--erp-card-padding);
  --size-table-row: var(--erp-table-row-height);
  --size-table-row-comfortable: var(--erp-table-row-height);
  --table-row-height: var(--erp-table-row-height);
  --table-cell-padding-x: 0.75rem;
  --table-cell-padding-y: 0.5rem;
  --letter-spacing-label: 0.045em;
}

html body,
html body #app-shell,
html body #app-shell :is(button, input, select, textarea, table) {
  font-family: var(--erp-font) !important;
}

html body #app-shell {
  color: var(--erp-text);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
}

/* Page rhythm and typography */
html body #app-shell .main-panel > .page {
  min-width: 0;
}

html body #app-shell .main-panel > .page:not(.hidden) {
  gap: var(--erp-page-gap) !important;
}

html body #app-shell .page :is(.page-header, .ui-page-heading) {
  gap: 1rem !important;
  margin: 0 !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--erp-border-subtle);
}

html body #app-shell .page :is(.page-title-block, .ui-page-heading__content) {
  gap: 0.375rem !important;
}

html body #app-shell .page :is(.page-title-block h1, .page-title-block h2, .ui-page-title) {
  margin: 0 !important;
  font-size: clamp(1.75rem, 2.05vw, 2.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
}

html body #app-shell .page :is(.page-title-block p, .ui-page-heading__content .ui-helper-text) {
  margin: 0 !important;
  color: var(--erp-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
}

html body #app-shell .page :is(h3, .card-title, .ui-card-title) {
  letter-spacing: -0.01em;
}

html body #app-shell .page :is(.ui-card-title, .kpi-label, .dashboard-module-label, .outstanding-metric-label) {
  color: var(--erp-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

html body #app-shell .page :is(.ui-helper-text, .kpi-caption, .ui-card-kpi__meta) {
  color: var(--erp-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

/* One physical KPI card contract */
html body #app-shell .page :is(
  .ui-card-kpi,
  .kpi-card,
  .dashboard-module-card,
  .reports-kpi-card,
  .receipt-summary-card,
  .vendor-payment-summary-card,
  .monthly-kpi-card,
  .sales-master-kpi-card,
  .sales-receivables-kpi-card,
  .outstanding-vendors-kpi-card,
  .outstanding-metric,
  .bank-summary-block,
  .pool-card,
  .rahil-kpi
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 8.25rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--erp-card-padding) !important;
  overflow: visible !important;
  border: 1px solid var(--erp-border) !important;
  border-radius: var(--erp-card-radius) !important;
  background: var(--erp-surface) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

html body #app-shell .page :is(
  .ui-card-kpi,
  .kpi-card,
  .dashboard-module-card,
  .reports-kpi-card,
  .receipt-summary-card,
  .vendor-payment-summary-card,
  .monthly-kpi-card,
  .sales-master-kpi-card,
  .sales-receivables-kpi-card,
  .outstanding-vendors-kpi-card,
  .outstanding-metric,
  .bank-summary-block,
  .pool-card,
  .rahil-kpi
)::before {
  width: 3px !important;
}

html body #app-shell .page :is(
  .ui-card-kpi,
  .kpi-card,
  .dashboard-module-card,
  .reports-kpi-card,
  .receipt-summary-card,
  .vendor-payment-summary-card,
  .monthly-kpi-card,
  .sales-master-kpi-card,
  .sales-receivables-kpi-card,
  .outstanding-vendors-kpi-card,
  .outstanding-metric,
  .bank-summary-block,
  .pool-card,
  .rahil-kpi
) :is(.kpi-copy, .ui-card-kpi__body) {
  display: grid !important;
  min-width: 0;
  align-content: space-between !important;
  gap: 0.5rem !important;
}

html body #app-shell .page :is(
  .ui-kpi-value,
  .kpi-value,
  .ui-card-kpi__value,
  .outstanding-metric-value,
  .receipt-summary-card > strong,
  .vendor-payment-summary-card strong,
  .bank-summary-block > strong,
  .pool-card strong,
  .dashboard-module-card > strong,
  .rahil-kpi > strong
) {
  max-width: 100%;
  margin: 0.4rem 0 0 !important;
  font-family: var(--erp-font) !important;
  font-size: clamp(1.5rem, 1.85vw, 1.875rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

html body #app-shell .page :is(
  .ui-card-kpi__meta,
  .kpi-caption,
  .outstanding-metric-caption,
  .receipt-summary-card > small,
  .vendor-payment-summary-card small,
  .bank-summary-block > small,
  .pool-card small,
  .dashboard-module-card > small,
  .rahil-kpi > small
) {
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}

html body #app-shell .page .dashboard-module-open {
  align-self: end;
  margin-top: 0.25rem !important;
  padding-top: 0.25rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Predictable, equal KPI grids */
html body #app-shell .page :is(
  .cards-grid,
  .kpi-grid,
  .reports-kpi-grid,
  .receipts-kpi-grid,
  .receipt-summary-grid,
  .vendor-payment-summary-grid,
  .monthly-kpi-grid,
  .sales-master-kpi-grid,
  .sales-receivables-kpi-grid,
  .outstanding-vendors-kpi-grid,
  .bank-summary-flat,
  .rahil-kpi-grid
) {
  gap: var(--erp-card-gap) !important;
  align-items: stretch !important;
  margin: 0 !important;
}

html body #app-shell #page-sales :is(.sales-master-kpi-grid, .sales-summary) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html body #app-shell #page-sales .sales-receivables-kpi-grid,
html body #app-shell #page-sales .invoice-yet-kpi-grid,
html body #app-shell #page-outstanding-vendors .outstanding-vendors-kpi-grid,
html body #app-shell #page-outstanding-vendors .outstanding-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body #app-shell #page-reports .reports-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body #app-shell #page-monthly-commitments .monthly-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html body #app-shell #page-receipts .receipts-kpi-grid,
html body #app-shell #page-vendor-payments :is(.vendor-payment-summary-grid, .receipt-summary-grid),
html body #app-shell #page-bank-balances .bank-summary-flat {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* General cards/panels share radius, border and calm elevation. */
html body #app-shell .page :is(
  .ui-card,
  .card,
  .side-card,
  .commitment-section,
  .monthly-section-card,
  .report-table-card,
  .reports-visual-card,
  .outstanding-table-card,
  .sales-receivables-analysis-card,
  .outstanding-vendor-analysis-card,
  .rahil-panel
) {
  min-width: 0;
  border: 1px solid var(--erp-border) !important;
  border-radius: var(--erp-card-radius) !important;
  background: var(--erp-surface) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

html body #app-shell .page :is(
  .commitment-section,
  .monthly-section-card,
  .report-table-card,
  .reports-visual-card,
  .sales-receivables-analysis-card,
  .outstanding-vendor-analysis-card,
  .rahil-panel
) {
  padding: var(--erp-card-padding) !important;
}

/* Shared controls */
html body #app-shell .page :is(button, .ui-btn, input:not([type="checkbox"]):not([type="radio"]), select) {
  font-size: 0.8125rem;
}

html body #app-shell .page :is(.ui-btn, .primary-btn, .secondary-btn, .ghost-btn, .danger-btn) {
  min-height: var(--erp-control-height);
  padding: 0 0.875rem;
  border-radius: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body #app-shell .page :is(.ui-input, .ui-select, input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: var(--erp-control-height);
  border-radius: 0.625rem !important;
}

html body #app-shell .page :is(.ui-label, .filter-field > label) {
  color: var(--erp-muted);
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3;
  text-transform: uppercase;
}

html body #app-shell .page :is(.badge, .ui-badge, .status-pill, .director-chip, .rahil-status) {
  min-height: 1.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.25;
}

/* The one shared Excel-style table component. */
html body #app-shell .page .excel-table-wrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--erp-border-subtle) !important;
  border-radius: var(--erp-card-radius) !important;
  background: var(--erp-surface) !important;
  box-shadow: none !important;
}

html body #app-shell .page .excel-table-toolbar {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem !important;
  margin: 0 0 0.75rem !important;
  padding: 0.375rem 0.5rem !important;
  border: 1px solid var(--erp-border) !important;
  border-radius: var(--erp-card-radius) !important;
  background: var(--erp-surface) !important;
  box-shadow: none !important;
}

html body #app-shell .page .excel-table-search {
  width: min(26rem, 48vw);
  min-width: 12rem;
  height: 2.25rem !important;
  border-color: var(--erp-border) !important;
  border-radius: 0.625rem !important;
  background: var(--color-bg-input, var(--bg)) !important;
}

html body #app-shell .page .excel-table-search input {
  min-height: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}

html body #app-shell .page :is(.excel-filter-count, .excel-row-count) {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}

html body #app-shell .page .excel-table-actions > summary {
  min-width: 6.5rem;
  height: 2.25rem !important;
  border-radius: 0.625rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

html body #app-shell .page .excel-data-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
}

html body #app-shell .page .excel-data-table thead th {
  height: var(--erp-table-header-height) !important;
  min-height: var(--erp-table-header-height) !important;
  padding: 0 0.75rem !important;
  border: 0 !important;
  border-right: 1px solid var(--erp-border-subtle) !important;
  border-bottom: 1px solid var(--erp-border) !important;
  background: var(--erp-surface-raised) !important;
  color: var(--erp-muted) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
  vertical-align: middle;
}

html body #app-shell .page .excel-data-table thead th:last-child {
  border-right: 0 !important;
}

html body #app-shell .page .excel-data-table tbody td {
  height: var(--erp-table-row-height) !important;
  min-height: var(--erp-table-row-height) !important;
  padding: 0.375rem 0.75rem !important;
  border: 0 !important;
  border-right: 1px solid var(--erp-border-subtle) !important;
  border-bottom: 1px solid var(--erp-border-subtle) !important;
  color: var(--erp-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
}

html body #app-shell .page .excel-data-table tbody tr {
  height: var(--erp-table-row-height) !important;
  min-height: var(--erp-table-row-height) !important;
}

html body #app-shell .page .excel-data-table tbody td:last-child {
  border-right: 0 !important;
}

html body #app-shell .page .excel-data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

html body #app-shell .page .excel-data-table tbody tr:hover td {
  background: var(--color-bg-hover, rgba(45, 140, 255, 0.06)) !important;
}

html body #app-shell .page .excel-data-table td :is(strong, b) {
  font-weight: 600 !important;
}

html body #app-shell .page .excel-filter-trigger {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0.25rem !important;
  border-radius: 0.375rem !important;
}

html body #app-shell .excel-column-popover {
  border-color: var(--erp-border) !important;
  border-radius: var(--erp-card-radius) !important;
  background: var(--erp-surface-raised) !important;
  color: var(--erp-text) !important;
  font-family: var(--erp-font) !important;
}

html body #app-shell .excel-column-popover :is(button, input, select, label, span) {
  font-family: var(--erp-font) !important;
}

html body #app-shell .page :is(.pagination, .ui-table-footer) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem !important;
  color: var(--erp-muted);
  font-size: 0.75rem;
}

/* Dashboard: equal three-column executive ownership row. */
html body #app-shell #page-dashboard .dashboard-main {
  gap: 1rem !important;
  padding: 1rem !important;
  border-radius: var(--erp-card-radius) !important;
}

html body #app-shell #page-dashboard :is(.dashboard-highlight-grid, .dashboard-module-grid) {
  gap: var(--erp-card-gap) !important;
}

html body #app-shell #page-dashboard .dashboard-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}

html body #app-shell #page-dashboard .dashboard-module-column {
  display: grid;
  min-width: 0;
  grid-template-rows: 3.5rem;
  grid-auto-rows: minmax(8.25rem, auto) !important;
  gap: var(--erp-card-gap) !important;
}

html body #app-shell #page-dashboard .dashboard-module-column > h3 {
  box-sizing: border-box;
  min-height: 3.5rem !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-width: 1px !important;
  border-left-width: 3px !important;
  border-radius: var(--erp-card-radius) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

html body #app-shell #page-dashboard .dashboard-module-column > h3::before {
  width: 0.5rem;
  height: 0.5rem;
  flex-basis: 0.5rem;
  border-width: 1px;
  box-shadow: none;
}

/* Rahil uses the same global components and density. */
html body #app-shell #page-rahil-dashboard .rahil-dashboard {
  gap: var(--erp-page-gap) !important;
}

html body #app-shell #page-rahil-dashboard :is(.rahil-scope-banner, .rahil-filter-bar) {
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--erp-border) !important;
  border-radius: var(--erp-card-radius) !important;
  background: var(--erp-surface) !important;
  box-shadow: none !important;
}

html body #app-shell #page-rahil-dashboard .rahil-scope-banner {
  min-height: 3rem !important;
  border-left: 3px solid #8e7cff !important;
}

html body #app-shell #page-rahil-dashboard .rahil-filter-bar {
  gap: 0.75rem !important;
}

html body #app-shell #page-rahil-dashboard .rahil-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body #app-shell #page-rahil-dashboard .rahil-kpi {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.375rem !important;
}

html body #app-shell #page-rahil-dashboard .rahil-kpi > span,
html body #app-shell #page-rahil-dashboard .rahil-panel > header span {
  color: var(--erp-muted) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
}

html body #app-shell #page-rahil-dashboard .rahil-section-grid,
html body #app-shell #page-rahil-dashboard .rahil-bottom-grid {
  gap: var(--erp-card-gap) !important;
}

html body #app-shell #page-rahil-dashboard .rahil-panel {
  padding: var(--erp-card-padding) !important;
}

html body #app-shell #page-rahil-dashboard .rahil-panel > header {
  gap: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

html body #app-shell #page-rahil-dashboard .rahil-panel > header h3 {
  margin-top: 0.2rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

html body #app-shell #page-rahil-dashboard .rahil-panel h4 {
  margin: 0.875rem 0 0.5rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
}

html body #app-shell #page-rahil-dashboard .rahil-mini-grid {
  gap: 0.5rem !important;
}

html body #app-shell #page-rahil-dashboard .rahil-mini-metric {
  min-height: 4.25rem !important;
  padding: 0.75rem !important;
  border: 1px solid var(--erp-border-subtle) !important;
  border-radius: 0.625rem !important;
}

html body #app-shell #page-rahil-dashboard .rahil-mini-metric span {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
}

html body #app-shell #page-rahil-dashboard .rahil-mini-metric strong {
  margin-top: 0.375rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

html body #app-shell #page-rahil-dashboard .rahil-table-wrap {
  border: 1px solid var(--erp-border-subtle) !important;
  border-radius: 0.625rem !important;
}

/* Compact forms and section spacing throughout modules. */
html body #app-shell .page :is(.form-grid, .filters, .toolbar-filters) {
  gap: 0.75rem !important;
}

html body #app-shell .page :is(.toolbar, .data-toolbar, .ui-table-toolbar) {
  border-radius: var(--erp-card-radius) !important;
}

@media (max-width: 1600px) {
  html body #app-shell #page-rahil-dashboard .rahil-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1440px) {
  html body #app-shell #page-sales :is(.sales-master-kpi-grid, .sales-summary),
  html body #app-shell #page-monthly-commitments .monthly-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body #app-shell #page-sales .sales-receivables-kpi-grid,
  html body #app-shell #page-sales .invoice-yet-kpi-grid,
  html body #app-shell #page-outstanding-vendors :is(.outstanding-vendors-kpi-grid, .outstanding-summary) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body #app-shell #page-dashboard .dashboard-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  html body #app-shell #page-reports .reports-kpi-grid,
  html body #app-shell #page-sales :is(.sales-master-kpi-grid, .sales-summary, .sales-receivables-kpi-grid, .invoice-yet-kpi-grid),
  html body #app-shell #page-monthly-commitments .monthly-kpi-grid,
  html body #app-shell #page-outstanding-vendors :is(.outstanding-vendors-kpi-grid, .outstanding-summary),
  html body #app-shell #page-rahil-dashboard .rahil-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #app-shell #page-dashboard .dashboard-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  html body #app-shell .page :is(.page-header, .ui-page-heading) {
    align-items: stretch !important;
  }

  html body #app-shell #page-dashboard .dashboard-module-grid,
  html body #app-shell #page-reports .reports-kpi-grid,
  html body #app-shell #page-receipts .receipts-kpi-grid,
  html body #app-shell #page-vendor-payments :is(.vendor-payment-summary-grid, .receipt-summary-grid),
  html body #app-shell #page-bank-balances .bank-summary-flat,
  html body #app-shell #page-sales :is(.sales-master-kpi-grid, .sales-summary, .sales-receivables-kpi-grid, .invoice-yet-kpi-grid),
  html body #app-shell #page-monthly-commitments .monthly-kpi-grid,
  html body #app-shell #page-outstanding-vendors :is(.outstanding-vendors-kpi-grid, .outstanding-summary),
  html body #app-shell #page-rahil-dashboard :is(.rahil-kpi-grid, .rahil-section-grid, .rahil-bottom-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #app-shell .page .excel-table-toolbar {
    flex-wrap: wrap;
  }

  html body #app-shell .page .excel-table-search {
    width: 100%;
  }

  html body #app-shell .page .excel-row-count {
    margin-left: 0;
  }

  html body #app-shell .page .excel-table-actions {
    margin-left: auto;
  }
}

@media print {
  html body #app-shell .page :is(
    .ui-card-kpi,
    .kpi-card,
    .dashboard-module-card,
    .reports-kpi-card,
    .receipt-summary-card,
    .vendor-payment-summary-card,
    .monthly-kpi-card,
    .sales-master-kpi-card,
    .sales-receivables-kpi-card,
    .outstanding-vendors-kpi-card,
    .outstanding-metric,
    .bank-summary-block,
    .pool-card,
    .rahil-kpi,
    .rahil-panel
  ) {
    box-shadow: none !important;
  }
}

/* Customer Receipts: compact long references without colliding with Manage. */
html body #app-shell #page-receipts .receipts-table-container {
  --ui-table-min-width: 102rem;
}

html body #app-shell #page-receipts .receipts-table {
  width: 102rem !important;
  min-width: 102rem !important;
  table-layout: fixed !important;
}

html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(1) { width: 8rem !important; }
html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(2) { width: 18rem !important; }
html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(3) { width: 10rem !important; }
html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(4) { width: 11rem !important; }
html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(5) { width: 16rem !important; }
html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(6) { width: 27rem !important; }
html body #app-shell #page-receipts .receipts-table :is(th, td):nth-child(7) { width: 12rem !important; }

html body #app-shell #page-receipts .receipts-table tbody :is(td:nth-child(2), td:nth-child(5), td:nth-child(6)) {
  text-align: left !important;
  vertical-align: middle !important;
}

html body #app-shell #page-receipts .receipts-table :is(.receipt-cell-primary, .receipt-cell-reference, .receipt-cell-notes) {
  display: -webkit-box !important;
  max-width: 100%;
  overflow: hidden !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word;
}

html body #app-shell #page-receipts .receipts-table .receipt-cell-reference {
  font-weight: 500 !important;
}

html body #app-shell #page-receipts .receipts-table tbody .ui-table-column--frozen-last {
  border-left: 1px solid var(--erp-border) !important;
  background: var(--erp-surface) !important;
  box-shadow: -0.5rem 0 0.75rem rgba(0, 0, 0, 0.08);
  text-align: center !important;
  white-space: nowrap !important;
}

html body #app-shell #page-receipts .receipts-table tbody tr:nth-child(even) .ui-table-column--frozen-last {
  background: color-mix(in srgb, var(--erp-surface) 96%, var(--color-info)) !important;
}

html body #app-shell #page-receipts .receipts-table tbody tr:hover .ui-table-column--frozen-last {
  background: var(--color-bg-hover) !important;
}

html body #app-shell #page-receipts .receipts-table tbody .ui-table-column--frozen-last .ui-btn {
  min-width: 4.25rem;
  margin: 0.125rem !important;
}