/* Final mobile/tablet overrides.
   Loaded after page inline styles so desktop register rules cannot leak onto phones. */

/* Shared workflow record status polish.
   This file loads after template-level CSS, so these rules keep the status chips
   consistent across the Deals -> TINV record tables. */
body.vtsa-page-deals .deals-table th:nth-child(3),
body.vtsa-page-deals .deals-table td:nth-child(3),
body.vtsa-page-drs .drs-table th:nth-child(9),
body.vtsa-page-drs .drs-table td:nth-child(9),
body.vtsa-page-loo .loo-table th:nth-child(7),
body.vtsa-page-loo .loo-table td:nth-child(7),
body.vtsa-page-po .po-table th:nth-child(7),
body.vtsa-page-po .po-table td:nth-child(7),
body.vtsa-page-pfi .pfi-table th:nth-child(9),
body.vtsa-page-pfi .pfi-table td:nth-child(9),
body.vtsa-page-ci .ci-table th:nth-child(8),
body.vtsa-page-ci .ci-table td:nth-child(8),
body.vtsa-page-tinv .tinv-table th:nth-child(9),
body.vtsa-page-tinv .tinv-table td:nth-child(9) {
  text-align: center !important;
}

body.vtsa-page-deals .deals-pill,
body.vtsa-page-drs .drs-pill,
body.vtsa-page-loo .loo-pill,
body.vtsa-page-po .po-pill,
body.vtsa-page-pfi .pfi-pill,
body.vtsa-page-ci .ci-pill,
body.vtsa-page-tinv .tinv-pill,
body.vtsa-page-tinv .tinv-missing-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 112px !important;
  min-height: 26px !important;
  height: auto !important;
  padding: 3px 10px !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}

body.vtsa-page-tinv .tinv-missing-pill > span {
  line-height: 1.05 !important;
}

body.vtsa-page-deals .deals-pill.draft,
body.vtsa-page-deals .deals-pill.pending,
body.vtsa-page-drs .drs-pill.draft,
body.vtsa-page-drs .drs-pill.needs-revision,
body.vtsa-page-po .po-pill.draft,
body.vtsa-page-po .po-pill.pending-dispatch,
body.vtsa-page-pfi .pfi-pill.draft,
body.vtsa-page-pfi .pfi-pill.missing-payment-proof,
body.vtsa-page-ci .ci-pill.draft {
  border-color: #fed7aa !important;
}

body.vtsa-page-deals .deals-pill.approved,
body.vtsa-page-deals .deals-pill.complete,
body.vtsa-page-deals .deals-pill.completed,
body.vtsa-page-deals .deals-pill.signed,
body.vtsa-page-drs .drs-pill.approved-internally,
body.vtsa-page-drs .drs-pill.converted-to-loo,
body.vtsa-page-po .po-pill.supplier-pos,
body.vtsa-page-po .po-pill.buyer-pos,
body.vtsa-page-po .po-pill.sent,
body.vtsa-page-po .po-pill.approved,
body.vtsa-page-pfi .pfi-pill.paid,
body.vtsa-page-pfi .pfi-pill.ready-for-ci,
body.vtsa-page-ci .ci-pill.paid,
body.vtsa-page-ci .ci-pill.reconciled,
body.vtsa-page-ci .ci-pill.issued,
body.vtsa-page-tinv .tinv-missing-pill:not(.needs-work) {
  border-color: #bbf7d0 !important;
}

body.vtsa-page-drs .drs-pill.submitted-for-review,
body.vtsa-page-loo .loo-pill.sent,
body.vtsa-page-pfi .pfi-pill.awaiting-payment {
  border-color: #bfdbfe !important;
}

body.vtsa-page-drs .drs-pill.rejected,
body.vtsa-page-loo .loo-pill.rejected,
body.vtsa-page-loo .loo-pill.expired,
body.vtsa-page-tinv .tinv-missing-pill.needs-work {
  border-color: #fecaca !important;
}

/* Desktop register cleanup: remove dead whitespace, keep values readable, and
   make action buttons consistent across Deals -> TINV. */
@media (min-width: 901px) {
  body.vtsa-page-deals .deals-table-wrap,
  body.vtsa-page-drs .drs-table-wrap,
  body.vtsa-page-loo .loo-table-wrap,
  body.vtsa-page-po .po-table-wrap,
  body.vtsa-page-pfi .pfi-table-wrap,
  body.vtsa-page-ci .ci-table-wrap,
  body.vtsa-page-tinv .tinv-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body.vtsa-page-deals .deals-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* R7 (part 2) — SHRINK TO FIT. With `width: 100%` the table always fills the wrap,
     so the slack has to go SOMEWHERE: into the data columns (dead whitespace mid-row)
     or into an unsized Actions column (a long dead tail after Delete). Instead: size
     EVERY column, then pin the table to the exact sum. Nothing stretches; the card
     ends right after the last button.

     Two traps, both hit while building this:
       · The Actions column must be sized explicitly. Under table-layout:fixed an AUTO
         column is measured from the FIRST ROW only, and rows differ (DRS: "Approval
         required" vs "Create LOO"+"Create PO"; TINV: with/without "+ Add CS").
       · The table width must be an explicit px sum, NOT `max-content`/`fit-content`.
         Intrinsic sizing on a fixed-layout table takes max(specified, cell content),
         so one un-nicknamed party ("Sicomines SARL") reflates its column.

     KEEP THE SUM IN SYNC with the `.X-record-col-*` widths in each template.
     A mismatch is visible immediately: too small squeezes the columns, too large
     brings the dead tail back. No max-width/min-width — the wrap is overflow-x:auto,
     so a narrow window scrolls rather than crushing the buttons. */
  body.vtsa-page-drs .drs-table,
  body.vtsa-page-loo .loo-table,
  body.vtsa-page-po .po-table,
  body.vtsa-page-pfi .pfi-table,
  body.vtsa-page-ci .ci-table,
  body.vtsa-page-tinv .tinv-table {
    min-width: 0 !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  /* Widest button strip each table can emit + 16px cell padding + a small buffer.
     Strips measured 2026-07-23 at the R10 pill spec (13px / 0 12px / 6px gap) with
     flex:none pills — re-measure after ANY button label/size change. */
  body.vtsa-page-drs  .drs-record-col-actions  { width: 512px !important; }  /* Open Preview Edit "Create LOO" "Create PO" Delete = 488 */
  body.vtsa-page-loo  .loo-record-col-actions  { width: 516px !important; }  /* + "Create PFI" "Create SPO"                     = 490 */
  body.vtsa-page-po   .po-record-col-actions   { width: 296px !important; }  /* Open Preview Edit Delete                        = 272 */
  body.vtsa-page-pfi  .pfi-record-col-actions  { width: 512px !important; }  /* + "Create CI" "Create TINV"                     = 487 */
  body.vtsa-page-ci   .ci-record-col-actions   { width: 420px !important; }  /* + "Create TINV"                                 = 393 */
  body.vtsa-page-tinv .tinv-record-col-actions { width: 344px !important; }  /* + "+ Add CS" (CS-eligible rows)                 ≈ 320 */

  /* = sum of that table's column widths (data + actions). */
  body.vtsa-page-drs  .drs-table     { width: 1436px !important; }  /*  924 + 512 (2026-07-23c squeeze: fits a ~1500px window) */
  body.vtsa-page-loo  .loo-table     { width: 1356px !important; }  /*  840 + 516 (2026-07-23c squeeze) */
  body.vtsa-page-po   .po-spo-table  { width: 1084px !important; }  /*  788 + 296 (2026-07-23c squeeze) */
  body.vtsa-page-po   .po-bpo-table  { width: 1184px !important; }  /*  888 + 296 (2026-07-23c squeeze) */
  body.vtsa-page-pfi  .pfi-table     { width: 1464px !important; }  /*  952 + 512 (2026-07-23c squeeze; fits a 1500px window incl. borders) */
  body.vtsa-page-ci   .ci-table      { width: 1464px !important; }  /* 1044 + 420 (2026-07-23c squeeze) */
  body.vtsa-page-tinv .tinv-table    { width: 1144px !important; }  /* 800 + 344 (2026-07-23c: Supplier column removed) */

  body.vtsa-page-drs .drs-record-col-value {
    width: 140px !important;  /* freak-long money values ellipsize (.drs-money) */
  }

  /* NOTE: row-action nowrap / pill height / cell padding are now enforced once for
     ALL record tables by the "RECORD TABLE STANDARD" block at the end of this file. */

  /* PO column widths used to live here as `col:nth-child(N) { width: … !important }`,
     which also SIZED the Actions column (150px) — the slack was then redistributed
     into the data columns as dead whitespace. Widths now come from the R7
     `.po-record-col-*` classes in po_dashboard.html, with Actions left unsized. */

  body.vtsa-page-deals .deals-table td,
  body.vtsa-page-drs .drs-table td,
  body.vtsa-page-loo .loo-table td,
  body.vtsa-page-po .po-table td,
  body.vtsa-page-pfi .pfi-table td,
  body.vtsa-page-ci .ci-table td,
  body.vtsa-page-tinv .tinv-table td {
    min-width: 0 !important;
  }

  /* Money cells: the R7 widths above fit a 7-figure USD amount ("$1,683,000.00").
     Anything longer — a currency-code prefix ("CHF 1,683,000.00"), a credit note
     ("$-269,280.00"), or the free-text passthrough the builders allow for VAT —
     must TRUNCATE, not spill. These used to be `overflow: visible`, which made an
     over-long amount silently overlap the next column instead of ellipsizing. */
  body.vtsa-page-drs .drs-money,
  body.vtsa-page-loo .loo-money,
  body.vtsa-page-po .po-money,
  body.vtsa-page-pfi .pfi-money,
  body.vtsa-page-ci .ci-money,
  body.vtsa-page-tinv .tinv-money {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.vtsa-page-po .po-table th:nth-child(4),
  body.vtsa-page-po .po-table td:nth-child(4),
  body.vtsa-page-pfi .pfi-table th:nth-child(5),
  body.vtsa-page-pfi .pfi-table td:nth-child(5),
  body.vtsa-page-ci .ci-table th:nth-child(4),
  body.vtsa-page-ci .ci-table td:nth-child(4),
  body.vtsa-page-tinv .tinv-table th:nth-child(5),
  body.vtsa-page-tinv .tinv-table td:nth-child(5) {
    text-align: center !important;
  }

  body.vtsa-page-deals .deals-table th:last-child,
  body.vtsa-page-deals .deals-table td:last-child,
  body.vtsa-page-drs .drs-table th:last-child,
  body.vtsa-page-drs .drs-table td:last-child,
  body.vtsa-page-loo .loo-table th:last-child,
  body.vtsa-page-loo .loo-table td:last-child,
  body.vtsa-page-po .po-table th:last-child,
  body.vtsa-page-po .po-table td:last-child,
  body.vtsa-page-pfi .pfi-table th:last-child,
  body.vtsa-page-pfi .pfi-table td:last-child,
  body.vtsa-page-ci .ci-table th:last-child,
  body.vtsa-page-ci .ci-table td:last-child,
  body.vtsa-page-tinv .tinv-table th:last-child,
  body.vtsa-page-tinv .tinv-table td:last-child {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.vtsa-page-deals .deals-row-actions,
  body.vtsa-page-drs .drs-row-actions,
  body.vtsa-page-loo .loo-row-actions,
  body.vtsa-page-po .po-row-actions,
  body.vtsa-page-pfi .pfi-row-actions,
  body.vtsa-page-ci .ci-row-actions,
  body.vtsa-page-tinv .tinv-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body.vtsa-page-deals .deals-row-actions form,
  body.vtsa-page-drs .drs-row-actions form,
  body.vtsa-page-loo .loo-row-actions form,
  body.vtsa-page-po .po-row-actions form,
  body.vtsa-page-pfi .pfi-row-actions form,
  body.vtsa-page-ci .ci-row-actions form,
  body.vtsa-page-tinv .tinv-row-actions form {
    display: inline-flex !important;
    align-items: stretch !important;
    flex: none !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  body.vtsa-page-deals .deals-row-actions a,
  body.vtsa-page-deals .deals-row-actions button,
  body.vtsa-page-drs .drs-row-actions a,
  body.vtsa-page-drs .drs-row-actions button,
  body.vtsa-page-loo .loo-row-actions a,
  body.vtsa-page-loo .loo-row-actions button,
  body.vtsa-page-po .po-row-actions a,
  body.vtsa-page-po .po-row-actions button,
  body.vtsa-page-pfi .pfi-row-actions a,
  body.vtsa-page-pfi .pfi-row-actions button,
  body.vtsa-page-ci .ci-row-actions a,
  body.vtsa-page-ci .ci-row-actions button,
  body.vtsa-page-tinv .tinv-row-actions a,
  body.vtsa-page-tinv .tinv-row-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.vtsa-page-drs .drs-row-actions .drs-approval-required {
    min-width: 148px !important;
  }

  /* (A LOO-only shrink pass — 11px font / 0 9px padding — used to live here. It made
     the LOO strip visibly smaller than every other record table and fought the RECORD
     TABLE STANDARD block; sizing is now unified there for all seven tables.) */
}

@media (max-width: 900px) {
  body.vtsa-page-loo,
  body.vtsa-page-drs,
  body.vtsa-page-ci,
  body.vtsa-page-po,
  body.vtsa-page-pfi,
  body.vtsa-page-tinv,
  body.vtsa-page-accounting,
  body.vtsa-page-logistics {
    overflow-x: hidden !important;
  }

  body.vtsa-page-loo main.shell,
  body.vtsa-page-drs main.shell,
  body.vtsa-page-ci main.shell,
  body.vtsa-page-po main.shell,
  body.vtsa-page-pfi main.shell,
  body.vtsa-page-tinv main.shell,
  body.vtsa-page-accounting main.shell,
  body.vtsa-page-logistics main.shell,
  body.vtsa-page-loo .shell,
  body.vtsa-page-drs .shell,
  body.vtsa-page-ci .shell,
  body.vtsa-page-po .shell,
  body.vtsa-page-pfi .shell,
  body.vtsa-page-tinv .shell,
  body.vtsa-page-accounting .shell,
  body.vtsa-page-logistics .shell {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 14px auto 44px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .loo-workflow-page,
  .drs-workflow-page,
  .ci-workflow-page,
  .po-workflow-page,
  .pfi-workflow-page,
  .tinv-workflow-page,
  .accounting-dashboard,
  .logistics-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .accounting-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .loo-hero-card,
  .drs-hero-card,
  .ci-hero-card,
  .po-hero-card,
  .pfi-hero-card,
  .tinv-hero-card,
  .accounting-dashboard .accounting-hero-panel,
  .accounting-dashboard .accounting-hero-panel.accounting-calm-header,
  .logistics-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .loo-hero-card > *,
  .drs-hero-card > *,
  .ci-hero-card > *,
  .po-hero-card > *,
  .pfi-hero-card > *,
  .tinv-hero-card > *,
  .accounting-dashboard .accounting-hero-panel > *,
  .logistics-hero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .loo-hero-card h1,
  .drs-hero-card h1,
  .ci-hero-card h1,
  .po-hero-card h1,
  .pfi-hero-card h1,
  .tinv-hero-card h1,
  .accounting-dashboard .accounting-hero-panel h1,
  .logistics-hero h1 {
    font-size: clamp(32px, 10vw, 46px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .loo-hero-card p,
  .drs-hero-card p,
  .ci-hero-card p,
  .po-hero-card p,
  .pfi-hero-card p,
  .tinv-hero-card p,
  .accounting-dashboard .accounting-hero-panel .hero-subtitle,
  .logistics-hero p {
    max-width: 100% !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.34 !important;
    overflow-wrap: break-word !important;
  }

  .loo-actions,
  .drs-actions,
  .ci-actions,
  .po-actions,
  .pfi-actions,
  .tinv-actions,
  .accounting-dashboard .accounting-hero-actions,
  .logistics-hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .loo-actions a,
  .drs-actions a,
  .ci-actions a,
  .po-actions a,
  .pfi-actions a,
  .tinv-action,
  .accounting-dashboard .accounting-hero-actions .accounting-btn,
  .logistics-hero-actions .logistics-btn,
  .logistics-hero-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 9px 12px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.12 !important;
  }

  .loo-kpi-grid,
  .drs-kpi-grid,
  .ci-kpi-grid,
  .po-kpi-grid,
  .pfi-kpi-grid,
  .tinv-kpi-grid,
  .logistics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .po-kpi-card,
  .drs-kpi-card,
  .po-inventory-metric,
  .accounting-dashboard .accounting-metrics article,
  .logistics-kpi {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    container-type: inline-size;
  }

  .po-kpi-card strong,
  .drs-kpi-card strong,
  .po-inventory-metric strong {
    max-width: 100% !important;
    font-size: clamp(23px, 12cqw, 42px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .po-kpi-card.value strong,
  .drs-kpi-card.value strong,
  .drs-kpi-card.good strong,
  .po-kpi-card.warning strong {
    font-size: clamp(21px, 11cqw, 40px) !important;
  }

  .accounting-dashboard .accounting-metrics strong,
  .accounting-dashboard .accounting-control-strip strong,
  .accounting-dashboard .accounting-context-list strong,
  .logistics-kpi strong {
    max-width: 100% !important;
    font-size: clamp(24px, 14cqw, 38px) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .loo-filters,
  .drs-filters,
  .ci-filters,
  .po-filters,
  .pfi-filters,
  .tinv-filters,
  .logistics-filters,
  .po-buyer-scan-form,
  .po-buyer-scan-head,
  .po-inventory-grid,
  .po-inventory-lists,
  .accounting-dashboard .accounting-primary-metrics,
  .accounting-dashboard .accounting-review-grid,
  .accounting-dashboard .accounting-grid-two,
  .accounting-dashboard .accounting-control-strip,
  .accounting-dashboard .accounting-context-list {
    grid-template-columns: 1fr !important;
  }

  .logistics-filters {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  .logistics-filters label,
  .logistics-filters input,
  .logistics-filters select {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .logistics-check {
    margin-top: 0 !important;
  }

  .accounting-tabs.accounting-page-menu,
  .accounting-page-menu {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .accounting-tabs.accounting-page-menu::-webkit-scrollbar,
  .accounting-page-menu::-webkit-scrollbar {
    display: none !important;
  }

  .accounting-tabs.accounting-page-menu a,
  .accounting-page-menu a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .loo-table-wrap,
  .drs-table-wrap,
  .ci-table-wrap,
  .po-table-wrap,
  .pfi-table-wrap,
  .tinv-table-wrap,
  .logistics-table-wrap,
  .accounting-dashboard .accounting-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .loo-table,
  .loo-table thead,
  .loo-table tbody,
  .loo-table tr,
  .loo-table th,
  .loo-table td,
  .drs-table,
  .drs-table thead,
  .drs-table tbody,
  .drs-table tr,
  .drs-table th,
  .drs-table td,
  .ci-table,
  .ci-table thead,
  .ci-table tbody,
  .ci-table tr,
  .ci-table th,
  .ci-table td,
  .po-table,
  .po-table thead,
  .po-table tbody,
  .po-table tr,
  .po-table th,
  .po-table td,
  .pfi-table,
  .pfi-table thead,
  .pfi-table tbody,
  .pfi-table tr,
  .pfi-table th,
  .pfi-table td,
  .tinv-table,
  .tinv-table thead,
  .tinv-table tbody,
  .tinv-table tr,
  .tinv-table th,
  .tinv-table td,
  .logistics-table,
  .logistics-table thead,
  .logistics-table tbody,
  .logistics-table tr,
  .logistics-table th,
  .logistics-table td,
  .accounting-dashboard .accounting-table,
  .accounting-dashboard .accounting-table thead,
  .accounting-dashboard .accounting-table tbody,
  .accounting-dashboard .accounting-table tr,
  .accounting-dashboard .accounting-table th,
  .accounting-dashboard .accounting-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  .loo-table colgroup,
  .drs-table colgroup,
  .ci-table colgroup,
  .po-table colgroup,
  .tinv-table colgroup,
  .logistics-table colgroup,
  .accounting-dashboard .accounting-table colgroup,
  .loo-table thead,
  .drs-table thead,
  .ci-table thead,
  .po-table thead,
  .pfi-table colgroup,
  .pfi-table thead,
  .tinv-table thead,
  .logistics-table thead,
  .accounting-dashboard .accounting-table thead {
    display: none !important;
  }

  .loo-table,
  .drs-table,
  .ci-table,
  .po-table,
  .pfi-table,
  .tinv-table,
  .logistics-table,
  .accounting-dashboard .accounting-table {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .loo-table tbody tr,
  .drs-table tbody tr,
  .ci-table tbody tr,
  .po-table tbody tr,
  .pfi-table tbody tr,
  .tinv-table tbody tr,
  .logistics-table tbody tr,
  .accounting-dashboard .accounting-table tbody tr {
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid #dbe4ee !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
  }

  .loo-table td,
  .drs-table td,
  .ci-table td,
  .po-table td,
  .pfi-table td,
  .tinv-table td,
  .logistics-table td,
  .accounting-dashboard .accounting-table td {
    display: grid !important;
    grid-template-columns: minmax(86px, 0.38fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15) !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .loo-table td:last-child,
  .drs-table td:last-child,
  .ci-table td:last-child,
  .po-table td:last-child,
  .pfi-table td:last-child,
  .tinv-table td:last-child,
  .logistics-table td:last-child,
  .accounting-dashboard .accounting-table td:last-child {
    grid-template-columns: 1fr !important;
    border-bottom: 0 !important;
    padding-top: 10px !important;
  }

  .loo-table td::before,
  .drs-table td::before,
  .ci-table td::before,
  .po-table td::before,
  .pfi-table td::before,
  .tinv-table td::before,
  .logistics-table td::before {
    content: attr(data-label) !important;
  }

  .accounting-dashboard .accounting-table td:nth-child(1)::before { content: "Deal No." !important; }
  .accounting-dashboard .accounting-table td:nth-child(2)::before { content: "Buyer" !important; }
  .accounting-dashboard .accounting-table td:nth-child(3)::before { content: "Supplier" !important; }
  .accounting-dashboard .accounting-table td:nth-child(4)::before { content: "Issue" !important; }
  .accounting-dashboard .accounting-table td:nth-child(5)::before { content: "Risk" !important; }
  .accounting-dashboard .accounting-table td:nth-child(6)::before { content: "Action" !important; }

  /* Redesigned deal ledger has 7 columns — override the generic labels above
     (body-class prefix lifts specificity so these win regardless of order). */
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(1)::before { content: "Deal No." !important; }
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(2)::before { content: "Buyer / Supplier" !important; }
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(3)::before { content: "Revenue" !important; }
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(4)::before { content: "COGS" !important; }
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(5)::before { content: "Margin" !important; }
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(6)::before { content: "Status" !important; }
  body.vtsa-page-accounting .accounting-dashboard .acc-ledger-table td:nth-child(7)::before { content: "Action" !important; }

  .loo-table td::before,
  .drs-table td::before,
  .ci-table td::before,
  .po-table td::before,
  .pfi-table td::before,
  .tinv-table td::before,
  .logistics-table td::before,
  .accounting-dashboard .accounting-table td::before {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
  }

  .loo-row-actions,
  .drs-row-actions,
  .ci-row-actions,
  .po-row-actions,
  .pfi-row-actions,
  .tinv-row-actions,
  .logistics-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .ci-row-actions a.convert-tinv {
    grid-column: 1 / -1 !important;
  }

  .loo-row-actions a,
  .loo-row-actions button,
  .drs-row-actions a,
  .drs-row-actions button,
  .drs-row-actions form,
  .ci-row-actions a,
  .po-row-actions a,
  .po-row-actions button,
  .pfi-row-actions a,
  .tinv-row-actions a,
  .tinv-row-actions button,
  .logistics-actions a,
  .logistics-actions button,
  .logistics-actions form,
  .accounting-dashboard .table-link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  .logistics-status,
  .risk-pill,
  .logistics-flag,
  .deals-pill,
  .drs-pill,
  .loo-pill,
  .po-pill,
  .pfi-pill,
  .ci-pill,
  .tinv-pill,
  .tinv-missing-pill,
  .status-pill {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 20px !important;
    padding: 2px 7px !important;
    border-width: 1px !important;
    border-style: solid !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .logistics-flag-row {
    gap: 6px !important;
  }

  .logistics-panel {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .loo-table td[colspan],
  .drs-table td[colspan],
  .ci-table td[colspan],
  .po-table td[colspan],
  .pfi-table td[colspan],
  .tinv-table td[colspan],
  .logistics-table td[colspan],
  .accounting-dashboard .accounting-table td[colspan],
  .accounting-dashboard .accounting-table .empty-state {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border: 1px dashed #dbe4ee !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
  }

  .loo-table td[colspan]::before,
  .drs-table td[colspan]::before,
  .ci-table td[colspan]::before,
  .po-table td[colspan]::before,
  .pfi-table td[colspan]::before,
  .tinv-table td[colspan]::before,
  .logistics-table td[colspan]::before,
  .accounting-dashboard .accounting-table td[colspan]::before,
  .accounting-dashboard .accounting-table .empty-state::before {
    content: none !important;
  }

  body.vtsa-page-accounting .accounting-dashboard .accounting-table td.empty-state,
  body.vtsa-page-accounting .accounting-dashboard .empty-state {
    width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
  }

  body.vtsa-page-accounting .accounting-dashboard .accounting-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.vtsa-page-accounting .accounting-dashboard .accounting-table,
  body.vtsa-page-accounting .accounting-dashboard .accounting-table tbody,
  body.vtsa-page-accounting .accounting-dashboard .accounting-table tr,
  body.vtsa-page-accounting .accounting-dashboard .accounting-table td {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }

  body.vtsa-page-accounting .accounting-dashboard .accounting-table tr.accounting-empty-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.vtsa-page-accounting .accounting-dashboard .accounting-table tr.accounting-empty-row td.empty-state {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.vtsa-page-accounting .accounting-dashboard .accounting-empty-text {
    display: block !important;
    width: min(100%, 30rem) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.vtsa-page-ci .ci-workflow-page .ci-table,
  body.vtsa-page-ci .ci-workflow-page .ci-table tbody,
  body.vtsa-page-ci .ci-workflow-page .ci-table tr,
  body.vtsa-page-ci .ci-workflow-page .ci-table th,
  body.vtsa-page-ci .ci-workflow-page .ci-table td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  body.vtsa-page-ci .ci-workflow-page .ci-table td {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.vtsa-page-ci .ci-workflow-page .ci-table th:last-child,
  body.vtsa-page-ci .ci-workflow-page .ci-table td:last-child {
    position: static !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.vtsa-page-ci .ci-workflow-page .ci-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.vtsa-page-ci .ci-workflow-page .ci-row-actions a.convert-tinv {
    grid-column: 1 / -1 !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-table,
  body.vtsa-page-drs .drs-workflow-page .drs-table tbody,
  body.vtsa-page-drs .drs-workflow-page .drs-table tr,
  body.vtsa-page-drs .drs-workflow-page .drs-table th,
  body.vtsa-page-drs .drs-workflow-page .drs-table td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-table td {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-table th:last-child,
  body.vtsa-page-drs .drs-workflow-page .drs-table td:last-child {
    position: static !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-row-actions a,
  body.vtsa-page-drs .drs-workflow-page .drs-row-actions button,
  body.vtsa-page-drs .drs-workflow-page .drs-row-actions form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-row-actions .drs-create-doc-form,
  body.vtsa-page-drs .drs-workflow-page .drs-row-actions .drs-approval-required {
    grid-column: 1 / -1 !important;
  }

  body.vtsa-page-loo .loo-workflow-page .loo-table,
  body.vtsa-page-loo .loo-workflow-page .loo-table tbody,
  body.vtsa-page-loo .loo-workflow-page .loo-table tr,
  body.vtsa-page-loo .loo-workflow-page .loo-table th,
  body.vtsa-page-loo .loo-workflow-page .loo-table td,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table tbody,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table tr,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table th,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  body.vtsa-page-loo .loo-workflow-page .loo-table td,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table td {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.vtsa-page-loo .loo-workflow-page .loo-table th:last-child,
  body.vtsa-page-loo .loo-workflow-page .loo-table td:last-child,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table th:last-child,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-table td:last-child {
    position: static !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.vtsa-page-loo .loo-workflow-page .loo-row-actions,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  body.vtsa-page-loo .loo-workflow-page .loo-row-actions form,
  body.vtsa-page-loo .loo-workflow-page .loo-row-actions a,
  body.vtsa-page-loo .loo-workflow-page .loo-row-actions button,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-row-actions a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  body.vtsa-page-loo .loo-workflow-page .loo-row-actions .loo-create-doc-button,
  body.vtsa-page-pfi .pfi-workflow-page .pfi-row-actions a.tinv-create {
    grid-column: 1 / -1 !important;
  }

  body.vtsa-page-logistics .logistics-page .logistics-table,
  body.vtsa-page-logistics .logistics-page .logistics-table tbody,
  body.vtsa-page-logistics .logistics-page .logistics-table tr,
  body.vtsa-page-logistics .logistics-page .logistics-table th,
  body.vtsa-page-logistics .logistics-page .logistics-table td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  body.vtsa-page-logistics .logistics-page .logistics-table tbody tr {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid #efdca6 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(117, 91, 35, 0.07) !important;
    overflow: hidden !important;
  }

  body.vtsa-page-logistics .logistics-page .logistics-table td {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(117, 91, 35, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  body.vtsa-page-logistics .logistics-page .logistics-table td:last-child {
    grid-template-columns: 1fr !important;
    border-bottom: 0 !important;
    padding-top: 10px !important;
  }

  body.vtsa-page-logistics .logistics-page .logistics-table td:last-child::before {
    margin-bottom: 8px !important;
  }

  body.vtsa-page-po .po-workflow-page .po-row-actions,
  body.vtsa-page-logistics .logistics-page .logistics-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  body.vtsa-page-po .po-workflow-page .po-row-actions form,
  body.vtsa-page-po .po-workflow-page .po-row-actions a,
  body.vtsa-page-po .po-workflow-page .po-row-actions button,
  body.vtsa-page-logistics .logistics-page .logistics-actions form,
  body.vtsa-page-logistics .logistics-page .logistics-actions a,
  body.vtsa-page-logistics .logistics-page .logistics-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-row-actions form,
  body.vtsa-page-po .po-workflow-page .po-row-actions form,
  body.vtsa-page-logistics .logistics-page .logistics-actions form {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.vtsa-page-logistics .logistics-page .logistics-actions form {
    grid-column: 1 / -1 !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-row-actions a,
  body.vtsa-page-drs .drs-workflow-page .drs-row-actions button,
  body.vtsa-page-po .po-workflow-page .po-row-actions a,
  body.vtsa-page-po .po-workflow-page .po-row-actions button,
  body.vtsa-page-logistics .logistics-page .logistics-actions a,
  body.vtsa-page-logistics .logistics-page .logistics-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: none !important;
    padding: 0 10px !important;
    line-height: 1.05 !important;
    box-sizing: border-box !important;
  }

  body.vtsa-page-drs .drs-workflow-page .drs-row-actions button.danger,
  body.vtsa-page-po .po-workflow-page .po-table .po-row-actions .po-delete-action,
  body.vtsa-page-logistics .logistics-page .logistics-actions button.danger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: none !important;
    padding: 0 10px !important;
  }
}

@media (max-width: 520px) {
  .loo-actions,
  .drs-actions,
  .ci-actions,
  .po-actions,
  .pfi-actions,
  .tinv-actions,
  .accounting-dashboard .accounting-hero-actions,
  .logistics-hero-actions,
  .loo-kpi-grid,
  .drs-kpi-grid,
  .ci-kpi-grid,
  .pfi-kpi-grid,
  .pfi-product-grid,
  .tinv-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .po-kpi-grid,
  .logistics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .po-kpi-card,
  .logistics-kpi,
  .accounting-dashboard .accounting-metrics article,
  .accounting-dashboard .accounting-panel.clean {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .po-kpi-card strong {
    font-size: clamp(20px, 12cqw, 34px) !important;
  }

  .tinv-hero-card h1,
  .accounting-dashboard .accounting-hero-panel h1,
  .logistics-hero h1 {
    font-size: clamp(32px, 11vw, 42px) !important;
  }

  .tinv-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .tinv-tabs a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 9px !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    white-space: normal !important;
  }

  .tinv-tabs a span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 360px) {
  .po-kpi-grid,
  .logistics-kpis {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   RECORD TABLE STANDARD  —  deals · DRS · LOO · PO · PFI · CI · TINV
   --------------------------------------------------------------------------
   One shared contract for EVERY record/dashboard table. Distilled from the DRS
   and LOO passes (2026-07). Any new record page must follow all of these.

   CSS rules (enforced below; desktop only — the <=900px stacked/grid view is
   deliberately left alone):
     R1  Cell padding is 4px 8px. Rows are content-height, not padded boxes.
     R2  Row-action pills are 34px tall / 14px text / 0 14px padding, 6px gap —
         one size for ALL seven tables (2026-07-23: LOO had drifted to 11px text
         and mixed paddings; sizes raised same day for legibility — the user
         reads these with poor eyesight, nothing in a row below 12px). The pill
         is the tallest thing in a row, so it drives row height. See R10.
     R3  Row actions NEVER wrap: display:flex + flex-wrap:nowrap. Every button
         stays on ONE line so rows stay short; the table scrolls if needed.
     R4  Status pill: 14px font / 26px min-height / max-width 120px (see the
         shared `.X-pill` rule near the top of this file).
     R5  The record-number cell (.X-no): <strong> 15px, <small> 12px.
     R11 Cell text is 16px, headers 14px (enforced in the R10 section).

   Markup rules (per template — cannot be expressed in CSS; done for all seven):
     R6  Show ALL row actions inline. No "⋯" overflow menu. (`row-menu-btn` /
         `row-menu-pop` no longer appear in any template; record_actions.js is
         now inert and kept only so nothing 404s.)
     R7  Give EVERY column — data AND actions — an explicit width via <colgroup>
         and a `.X-record-col-*` class, then set the table to `width: max-content`
         so it shrinks to exactly that sum. There is then no slack anywhere: none
         stretched into the data columns (dead whitespace mid-row) and none left as
         a dead tail after the last action button.
           · data columns  -> sized to WORST-CASE content + header (see below)
           · actions column -> sized to the WIDEST button strip the table can emit
             (rows differ! DRS: "Approval required" vs "Create LOO"+"Create PO";
             TINV: with/without "+ Add CS"). It must be explicit, because under
             table-layout:fixed an AUTO column is sized from the FIRST ROW only.
         Never give row-action pills a `min-width`; padding alone should size them.

         "Worst-case content" is NOT the nickname. Size against the real data:
           · money cells  >= 128px  ("$1,683,000.00" at the 15px money font is
             125px, and `.X-money` is overflow:visible, so an undersized money
             cell SPILLS over its neighbour instead of ellipsizing)
           · status cells >= 120px  (the `.X-pill` above is capped at max-width
             104px; add the 16px of cell padding)
           · date cells   >= 104px  ("2026-07-04" is 108px)
           · record-no cells must fit any sub-line or control inside them (TINV's
             number cell holds a split id and a "N per-horse splits" toggle)
         Getting this wrong is invisible on seeded demo rows and obvious on prod.
     R8  Parties/products render the DrsOption NICKNAME (server-side, via
         `_display_nickname`), never the full company value.

   Housekeeping:
     R9  Bump this file's ?v= in base.html on every change, or browsers keep
         serving the stale CSS.
   ========================================================================== */
@media (min-width: 901px) {

  /* R1 — content-height rows */
  body.vtsa-page-deals .deals-table th, body.vtsa-page-deals .deals-table td,
  body.vtsa-page-drs   .drs-table th,   body.vtsa-page-drs   .drs-table td,
  body.vtsa-page-loo   .loo-table th,   body.vtsa-page-loo   .loo-table td,
  body.vtsa-page-po    .po-table th,    body.vtsa-page-po    .po-table td,
  body.vtsa-page-pfi   .pfi-table th,   body.vtsa-page-pfi   .pfi-table td,
  body.vtsa-page-ci    .ci-table th,    body.vtsa-page-ci    .ci-table td,
  body.vtsa-page-tinv  .tinv-table th,  body.vtsa-page-tinv  .tinv-table td {
    padding: 4px 8px !important;
  }

  /* Column alignment — TEXT columns (record no, parties, product, date,
     status, actions) stay LEFT; only NUMBER columns (qty, price, total, value)
     are centered. The `:nth-child(n)` reset matches the specificity of the older
     per-column centering rules earlier in this file so it overrides them; the
     numeric rules below (same specificity, later source) then re-center numbers. */
  body.vtsa-page-deals .deals-table th:nth-child(n), body.vtsa-page-deals .deals-table td:nth-child(n),
  body.vtsa-page-drs   .drs-table th:nth-child(n),   body.vtsa-page-drs   .drs-table td:nth-child(n),
  body.vtsa-page-loo   .loo-table th:nth-child(n),   body.vtsa-page-loo   .loo-table td:nth-child(n),
  body.vtsa-page-po    .po-table th:nth-child(n),    body.vtsa-page-po    .po-table td:nth-child(n),
  body.vtsa-page-pfi   .pfi-table th:nth-child(n),   body.vtsa-page-pfi   .pfi-table td:nth-child(n),
  body.vtsa-page-ci    .ci-table th:nth-child(n),    body.vtsa-page-ci    .ci-table td:nth-child(n),
  body.vtsa-page-tinv  .tinv-table th:nth-child(n),  body.vtsa-page-tinv  .tinv-table td:nth-child(n) {
    text-align: left !important;
    vertical-align: middle !important;
  }

  /* Center only the numeric columns (qty · price · total · value) per table. */
  body.vtsa-page-drs   .drs-table  th:nth-child(7), body.vtsa-page-drs   .drs-table  td:nth-child(7),
  body.vtsa-page-drs   .drs-table  th:nth-child(8), body.vtsa-page-drs   .drs-table  td:nth-child(8),
  body.vtsa-page-loo   .loo-table  th:nth-child(5), body.vtsa-page-loo   .loo-table  td:nth-child(5),
  body.vtsa-page-loo   .loo-table  th:nth-child(6), body.vtsa-page-loo   .loo-table  td:nth-child(6),
  body.vtsa-page-po    .po-table   th:nth-child(4), body.vtsa-page-po    .po-table   td:nth-child(4),
  body.vtsa-page-po    .po-table   th:nth-child(5), body.vtsa-page-po    .po-table   td:nth-child(5),
  body.vtsa-page-po    .po-table   th:nth-child(6), body.vtsa-page-po    .po-table   td:nth-child(6),
  body.vtsa-page-pfi   .pfi-table  th:nth-child(5), body.vtsa-page-pfi   .pfi-table  td:nth-child(5),
  body.vtsa-page-pfi   .pfi-table  th:nth-child(7), body.vtsa-page-pfi   .pfi-table  td:nth-child(7),
  body.vtsa-page-pfi   .pfi-table  th:nth-child(8), body.vtsa-page-pfi   .pfi-table  td:nth-child(8),
  body.vtsa-page-ci    .ci-table   th:nth-child(4), body.vtsa-page-ci    .ci-table   td:nth-child(4),
  body.vtsa-page-ci    .ci-table   th:nth-child(6), body.vtsa-page-ci    .ci-table   td:nth-child(6),
  body.vtsa-page-ci    .ci-table   th:nth-child(7), body.vtsa-page-ci    .ci-table   td:nth-child(7),
  body.vtsa-page-tinv  .tinv-table th:nth-child(4), body.vtsa-page-tinv  .tinv-table td:nth-child(4),
  body.vtsa-page-tinv  .tinv-table th:nth-child(5), body.vtsa-page-tinv  .tinv-table td:nth-child(5),
  body.vtsa-page-tinv  .tinv-table th:nth-child(6), body.vtsa-page-tinv  .tinv-table td:nth-child(6) {
    text-align: center !important;
  }

  /* R3 — all row actions on one line, never wrapped */
  body.vtsa-page-deals .deals-row-actions,
  body.vtsa-page-drs   .drs-row-actions,
  body.vtsa-page-loo   .loo-row-actions,
  body.vtsa-page-po    .po-row-actions,
  body.vtsa-page-pfi   .pfi-row-actions,
  body.vtsa-page-ci    .ci-row-actions,
  body.vtsa-page-tinv  .tinv-row-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 4px !important;
  }

  /* R2 — compact row-action pills (these drive the row height). Values must match
     the R10 unification below — R10 restates them at higher specificity to beat
     per-template rules; this copy catches strips outside a .X-table. */
  body.vtsa-page-deals .deals-row-actions a, body.vtsa-page-deals .deals-row-actions button,
  body.vtsa-page-drs   .drs-row-actions a,   body.vtsa-page-drs   .drs-row-actions button,
  body.vtsa-page-loo   .loo-row-actions a,   body.vtsa-page-loo   .loo-row-actions button,
  body.vtsa-page-po    .po-row-actions a,    body.vtsa-page-po    .po-row-actions button,
  body.vtsa-page-pfi   .pfi-row-actions a,   body.vtsa-page-pfi   .pfi-row-actions button,
  body.vtsa-page-ci    .ci-row-actions a,    body.vtsa-page-ci    .ci-row-actions button,
  body.vtsa-page-tinv  .tinv-row-actions a,  body.vtsa-page-tinv  .tinv-row-actions button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 11px !important;
  }

  /* R7 (CSS half) — the ACTIONS column must stay UNSIZED so it absorbs the slack.
     Any width/min-width on the last cell makes table-layout:fixed treat it as a
     specified column and spread the leftover space back into the DATA columns as
     dead whitespace. Older per-page rules did exactly that (e.g. styles.css
     `.ci-workflow-page .ci-table th:last-child { width:210px; min-width:210px }`),
     so neutralise them here for every record table. */
  body.vtsa-page-deals .deals-table th:last-child, body.vtsa-page-deals .deals-table td:last-child,
  body.vtsa-page-drs   .drs-table th:last-child,   body.vtsa-page-drs   .drs-table td:last-child,
  body.vtsa-page-loo   .loo-table th:last-child,   body.vtsa-page-loo   .loo-table td:last-child,
  body.vtsa-page-po    .po-table th:last-child,    body.vtsa-page-po    .po-table td:last-child,
  body.vtsa-page-pfi   .pfi-table th:last-child,   body.vtsa-page-pfi   .pfi-table td:last-child,
  body.vtsa-page-ci    .ci-table th:last-child,    body.vtsa-page-ci    .ci-table td:last-child,
  body.vtsa-page-tinv  .tinv-table th:last-child,  body.vtsa-page-tinv  .tinv-table td:last-child {
    width: auto !important;
    min-width: 0 !important;
  }

  /* (A min-width floor used to live here to stop the unsized Actions column being
     crushed. It is unnecessary now that the tables are `width: max-content` with an
     explicitly-sized Actions column — the table simply never gets smaller than its
     columns, and the wrap scrolls.) */

  /* R5 — compact record-number cell (number 13px, version 10px) */
  body.vtsa-page-drs  .drs-no strong,
  body.vtsa-page-loo  .loo-no strong,
  body.vtsa-page-po   .po-no strong,
  body.vtsa-page-pfi  .pfi-no strong,
  body.vtsa-page-ci   .ci-no strong,
  body.vtsa-page-tinv .tinv-no strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  body.vtsa-page-drs  .drs-no small,
  body.vtsa-page-loo  .loo-no small,
  body.vtsa-page-po   .po-no small,
  body.vtsa-page-pfi  .pfi-no small,
  body.vtsa-page-ci   .ci-no small,
  body.vtsa-page-tinv .tinv-no small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 12px !important;
  }

  /* ------------------------------------------------------------------------
     R10 (2026-07-23) — ONE look for every row-action strip.
     Before this, each page tuned its own pills: LOO had shrunk to 11px text with
     mixed 9/10/14px paddings (crushed, and its 384px actions column was tuned
     when the row had 5 buttons — Create SPO made it 6), PO's Delete was a plain
     grey pill, PFI/CI create buttons were unfilled and labelled just "CI"/"TINV".
     These selectors deliberately out-rank every per-template rule (templates go
     up to 4 classes on PO's delete, and inline <style> wins order ties), so the
     chain is body.vtsa-page-X + .X-table — nothing in a template beats them.
       · pills: 34px tall, 14px/800 text, 0 14px padding, 6px gap
       · "Create X" buttons carry .rec-create → soft fill in the TARGET doc's
         section colour (Create TINV amber, Create PFI purple, Create PO green …)
       · Delete is the same soft-red danger pill on all seven tables
     ---------------------------------------------------------------------- */
  body.vtsa-page-deals .deals-table .deals-row-actions,
  body.vtsa-page-drs   .drs-table .drs-row-actions,
  body.vtsa-page-loo   .loo-table .loo-row-actions,
  body.vtsa-page-po    .po-table .po-row-actions,
  body.vtsa-page-pfi   .pfi-table .pfi-row-actions,
  body.vtsa-page-ci    .ci-table .ci-row-actions,
  body.vtsa-page-tinv  .tinv-table .tinv-row-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body.vtsa-page-deals .deals-table .deals-row-actions a, body.vtsa-page-deals .deals-table .deals-row-actions button,
  body.vtsa-page-drs   .drs-table .drs-row-actions a,     body.vtsa-page-drs   .drs-table .drs-row-actions button,
  body.vtsa-page-loo   .loo-table .loo-row-actions a,     body.vtsa-page-loo   .loo-table .loo-row-actions button,
  body.vtsa-page-po    .po-table .po-row-actions a,       body.vtsa-page-po    .po-table .po-row-actions button,
  body.vtsa-page-pfi   .pfi-table .pfi-row-actions a,     body.vtsa-page-pfi   .pfi-table .pfi-row-actions button,
  body.vtsa-page-ci    .ci-table .ci-row-actions a,       body.vtsa-page-ci    .ci-table .ci-row-actions button,
  body.vtsa-page-tinv  .tinv-table .tinv-row-actions a,   body.vtsa-page-tinv  .tinv-table .tinv-row-actions button {
    flex: none !important;   /* never crush a pill to fit the cell — R7 sizes the column instead */
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 11px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Cell text 16px / headers 14px — the user reads these tables all day with poor
     eyesight; nothing in a record row goes below 12px (see also R4/R5 above). */
  body.vtsa-page-deals .deals-table td,
  body.vtsa-page-drs   .drs-table td,
  body.vtsa-page-loo   .loo-table td,
  body.vtsa-page-po    .po-table td,
  body.vtsa-page-pfi   .pfi-table td,
  body.vtsa-page-ci    .ci-table td,
  body.vtsa-page-tinv  .tinv-table td {
    font-size: 16px !important;
  }

  body.vtsa-page-deals .deals-table th,
  body.vtsa-page-drs   .drs-table th,
  body.vtsa-page-loo   .loo-table th,
  body.vtsa-page-po    .po-table th,
  body.vtsa-page-pfi   .pfi-table th,
  body.vtsa-page-ci    .ci-table th,
  body.vtsa-page-tinv  .tinv-table th {
    font-size: 14px !important;
  }

  /* Create-next-doc buttons: filled with the page's own workflow accent. */
  body.vtsa-page-drs .drs-table .drs-row-actions .rec-create {
    border-color: #176b9d !important;
    background: #cfefff !important;
    color: #12547b !important;
  }
  body.vtsa-page-loo .loo-table .loo-row-actions .rec-create {
    border-color: #a94d32 !important;
    background: #ffd8cc !important;
    color: #843b25 !important;
  }
  body.vtsa-page-pfi .pfi-table .pfi-row-actions .rec-create {
    border-color: #8b3d91 !important;
    background: #f4d3f8 !important;
    color: #6f2f73 !important;
  }
  body.vtsa-page-ci .ci-table .ci-row-actions .rec-create {
    border-color: #3157a8 !important;
    background: #d6e2ff !important;
    color: #27437f !important;
  }

  body.vtsa-page-drs .drs-table .drs-row-actions .rec-create:hover { border-color: #12547b !important; background: #12547b !important; color: #fff !important; }
  body.vtsa-page-loo .loo-table .loo-row-actions .rec-create:hover { border-color: #843b25 !important; background: #843b25 !important; color: #fff !important; }
  body.vtsa-page-pfi .pfi-table .pfi-row-actions .rec-create:hover { border-color: #6f2f73 !important; background: #6f2f73 !important; color: #fff !important; }
  body.vtsa-page-ci  .ci-table .ci-row-actions .rec-create:hover   { border-color: #27437f !important; background: #27437f !important; color: #fff !important; }

  /* A "Create X" button carries the colour of the doc BEING CREATED, not the page
     it sits on (Create PFI = PFI purple, Create SPO = PO green). The page-accent
     rules above would paint Create TINV blue on the CI register and purple on the
     PFI register — these win on the extra class and restore TINV amber. */
  body.vtsa-page-ci  .ci-table  .ci-row-actions  .rec-create.convert-tinv,
  body.vtsa-page-pfi .pfi-table .pfi-row-actions .rec-create.tinv-create {
    border-color: #8a6200 !important;
    background: #ffe4a8 !important;
    color: #6c4d00 !important;
  }
  body.vtsa-page-ci  .ci-table  .ci-row-actions  .rec-create.convert-tinv:hover,
  body.vtsa-page-pfi .pfi-table .pfi-row-actions .rec-create.tinv-create:hover {
    border-color: #6c4d00 !important;
    background: #6c4d00 !important;
    color: #fff !important;
  }

  /* Same target-doc convention for every other "Create X" (these also win on the
     extra class): Create LOO = LOO terracotta, Create PO/SPO = PO green,
     Create PFI = PFI purple, Create CI = CI indigo. */
  body.vtsa-page-drs .drs-table .drs-row-actions .rec-create.drs-create-doc-button {
    border-color: #a94d32 !important;
    background: #ffd8cc !important;
    color: #843b25 !important;
  }
  body.vtsa-page-drs .drs-table .drs-row-actions .rec-create.po-create,
  body.vtsa-page-loo .loo-table .loo-row-actions .rec-create.spo-create {
    border-color: #3d7d2a !important;
    background: #d7f4ce !important;
    color: #2f6220 !important;
  }
  body.vtsa-page-loo .loo-table .loo-row-actions .rec-create.pfi-create {
    border-color: #8b3d91 !important;
    background: #f4d3f8 !important;
    color: #6f2f73 !important;
  }
  body.vtsa-page-pfi .pfi-table .pfi-row-actions .rec-create.ci-create {
    border-color: #3157a8 !important;
    background: #d6e2ff !important;
    color: #27437f !important;
  }

  body.vtsa-page-drs .drs-table .drs-row-actions .rec-create.drs-create-doc-button:hover { border-color: #843b25 !important; background: #843b25 !important; color: #fff !important; }
  body.vtsa-page-drs .drs-table .drs-row-actions .rec-create.po-create:hover,
  body.vtsa-page-loo .loo-table .loo-row-actions .rec-create.spo-create:hover { border-color: #2f6220 !important; background: #2f6220 !important; color: #fff !important; }
  body.vtsa-page-loo .loo-table .loo-row-actions .rec-create.pfi-create:hover { border-color: #6f2f73 !important; background: #6f2f73 !important; color: #fff !important; }
  body.vtsa-page-pfi .pfi-table .pfi-row-actions .rec-create.ci-create:hover { border-color: #27437f !important; background: #27437f !important; color: #fff !important; }

  /* Delete: identical soft-red danger pill everywhere (PO's was plain grey). */
  body.vtsa-page-deals .deals-table .deals-row-actions button.danger,
  body.vtsa-page-drs   .drs-table .drs-row-actions button.danger,
  body.vtsa-page-loo   .loo-table .loo-row-actions button.danger,
  body.vtsa-page-po    .po-workflow-page .po-table .po-row-actions .po-delete-action,
  body.vtsa-page-pfi   .pfi-table .pfi-row-actions .pfi-delete-action,
  body.vtsa-page-ci    .ci-table .ci-row-actions .ci-delete-action,
  body.vtsa-page-tinv  .tinv-table .tinv-row-actions .tinv-delete-action {
    border-color: #fecaca !important;
    background: #fff5f5 !important;
    color: #b91c1c !important;
  }

  body.vtsa-page-deals .deals-table .deals-row-actions button.danger:hover,
  body.vtsa-page-drs   .drs-table .drs-row-actions button.danger:hover,
  body.vtsa-page-loo   .loo-table .loo-row-actions button.danger:hover,
  body.vtsa-page-po    .po-workflow-page .po-table .po-row-actions .po-delete-action:hover,
  body.vtsa-page-pfi   .pfi-table .pfi-row-actions .pfi-delete-action:hover,
  body.vtsa-page-ci    .ci-table .ci-row-actions .ci-delete-action:hover,
  body.vtsa-page-tinv  .tinv-table .tinv-row-actions .tinv-delete-action:hover {
    border-color: #b91c1c !important;
    background: #b91c1c !important;
    color: #fff !important;
  }
}
/* === RECORD TABLE STANDARD END === */

/* =============================================================================
   RECORD TABLE BUTTON TEXT BUMP  —  2026-07-23 (user call, accessibility)
   -----------------------------------------------------------------------------
   Row-action pills read one step larger WITHOUT growing: the STANDARD block above
   pins height/min-height/max-height at 34px, so font-size cannot change the pill
   height. Only width can grow, so padding drops 11px -> 10px to give the extra
   glyph width somewhere to go. `white-space: nowrap` (also from the block above)
   means these can never wrap — they widen instead, which is why the Actions
   column slack was measured on every page before landing this.

   Appended after the STANDARD END marker on purpose: same file, same media query,
   later in source, so it wins without touching the shared contract above.
   ========================================================================== */
@media (min-width: 901px) {
  body.vtsa-page-deals .deals-table .deals-row-actions a, body.vtsa-page-deals .deals-table .deals-row-actions button,
  body.vtsa-page-drs   .drs-table .drs-row-actions a,     body.vtsa-page-drs   .drs-table .drs-row-actions button,
  body.vtsa-page-loo   .loo-table .loo-row-actions a,     body.vtsa-page-loo   .loo-table .loo-row-actions button,
  body.vtsa-page-po    .po-table .po-row-actions a,       body.vtsa-page-po    .po-table .po-row-actions button,
  body.vtsa-page-po    .po-workflow-page .po-table .po-row-actions a,
  body.vtsa-page-po    .po-workflow-page .po-table .po-row-actions button,
  body.vtsa-page-pfi   .pfi-table .pfi-row-actions a,     body.vtsa-page-pfi   .pfi-table .pfi-row-actions button,
  body.vtsa-page-ci    .ci-table .ci-row-actions a,       body.vtsa-page-ci    .ci-table .ci-row-actions button,
  body.vtsa-page-tinv  .tinv-table .tinv-row-actions a,   body.vtsa-page-tinv  .tinv-table .tinv-row-actions button {
    font-size: 15.5px !important;
    padding: 0 10px !important;
  }
}