/* Global load-board contract.
   Load boards compact every selected column to its configured minimum first.
   If those minimums still exceed the viewport, the table itself scrolls
   horizontally while the application shell remains contained. */
@media (min-width: 721px) {
  html,
  body,
  .app-shell,
  .main-content {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body :is(
    #boardView #loadsSection,
    #claimsView #claimsLoadsPanel,
    #customerServiceView #customerServiceLoadsPanel,
    #trackingView .table-section,
    #shipmentsView .table-section,
    #customerServiceDeliveredView .table-section
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body :is(
    #boardView #loadsBody,
    #claimsView #claimsLoadsPanel > .table-scroll,
    #customerServiceView #customerServiceLoadsPanel > .table-scroll,
    #trackingView .table-section > .table-scroll,
    #shipmentsView .table-section > .table-scroll,
    #customerServiceDeliveredView .table-section > .table-scroll
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
  }

  html body :is(
    #boardView #loadsBody > table,
    #claimsView #claimsLoadsPanel > .table-scroll > .claims-loads-table,
    #customerServiceView #customerServiceLoadsPanel > .table-scroll > .customer-service-load-table,
    #trackingView .table-section > .table-scroll > .tracking-loads-table,
    #shipmentsView .table-section > .table-scroll > table,
    #customerServiceDeliveredView .table-section > .table-scroll > .customer-service-delivered-table
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  html body :is(
    #boardView #loadsBody > table,
    #claimsView #claimsLoadsPanel > .table-scroll > .claims-loads-table,
    #customerServiceView #customerServiceLoadsPanel > .table-scroll > .customer-service-load-table,
    #trackingView .table-section > .table-scroll > .tracking-loads-table,
    #shipmentsView .table-section > .table-scroll > table,
    #customerServiceDeliveredView .table-section > .table-scroll > .customer-service-delivered-table
  ) :is(col, th, td) {
    min-width: 0 !important;
  }

  html body :is(
    #boardView #loadsBody > table,
    #claimsView #claimsLoadsPanel > .table-scroll > .claims-loads-table,
    #customerServiceView #customerServiceLoadsPanel > .table-scroll > .customer-service-load-table,
    #trackingView .table-section > .table-scroll > .tracking-loads-table,
    #shipmentsView .table-section > .table-scroll > table,
    #customerServiceDeliveredView .table-section > .table-scroll > .customer-service-delivered-table
  ) :is(th, td) {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body :is(
    #loadRows,
    #claimsRows,
    #customerServiceRows,
    #trackingRows,
    #shipmentRows,
    #customerServiceDeliveredRows
  ) > tr > td:has(> :is(.status-pill, .status-pill-select)) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body :is(
    #loadRows,
    #claimsRows,
    #customerServiceRows,
    #trackingRows,
    #shipmentRows,
    #customerServiceDeliveredRows
  ) :is(.status-pill, .status-pill-select) {
    box-sizing: border-box !important;
    width: min(120px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 999px !important;
  }

  /* Customer Service is a 14-column board. This selector deliberately
     matches the old four-ID map so Status wins the same CSS specificity.
     Load # is the following column and can never paint over the pill. */
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(1) { width: 3% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(2) { width: 3% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(3) { width: 4% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(4) { width: 11% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(5) { width: 8% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(6),
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(7) { width: 6% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(8),
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(9) { width: 7% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(10),
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(11) { width: 12% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(12),
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(13) { width: 9% !important; min-width: 0 !important; max-width: none !important; }
  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(14) { width: 3% !important; min-width: 0 !important; max-width: none !important; }

  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(4) {
    box-sizing: border-box !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    overflow: hidden !important;
  }

  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel #customerServiceRows .status-pill-select {
    box-sizing: border-box !important;
    width: min(120px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(5) {
    padding-left: 8px !important;
    padding-right: 4px !important;
  }
}

/* Customer Service filters are a popover, not table content. Keep the open
   panel above the sticky table header. */
@media (min-width: 721px) {
  html body #customerServiceView .board-tools.customer-service-filter-bar {
    position: relative !important;
    z-index: 1100 !important;
    overflow: visible !important;
  }

  html body #customerServiceView .customer-service-filter-details {
    position: relative !important;
    z-index: 1101 !important;
    overflow: visible !important;
  }

  html body #customerServiceView .customer-service-filter-details #customerServiceMoreFilters {
    z-index: 1102 !important;
  }
}