/* Terminal Customer Service quick-edit fix.
   The legacy table rules apply text-overflow: ellipsis to every cell. When the
   two quick controls do not fit, that turns the edit control into visible dots.
   Reserve the full two-button width, disable cell ellipsis, and paint the edit
   pencil on the button itself so row redraws cannot replace it with text. */
@media (min-width: 721px) {
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table col {
    display: table-column !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table thead th {
    display: table-cell !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 11020 !important;
    background: #eef1f5 !important;
    background-clip: padding-box !important;
  }

  /* Legacy responsive rules made Delivery and Actions static, allowing rows
     to paint over those two labels during vertical scrolling. */
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table thead th:nth-child(12),
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table thead th:nth-child(13) {
    position: sticky !important;
    top: 0 !important;
    z-index: 11020 !important;
  }

  /* Give long rail Pickup numbers the unused horizontal room they need, while
     retaining ellipsis only as a last-resort guard at narrower widths. */
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table col:nth-child(8),
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table th:nth-child(8),
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table tbody#customerServiceRows > tr > td:nth-child(8) {
    width: 11% !important;
    min-width: 11% !important;
    max-width: 11% !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table tbody#customerServiceRows > tr > td:nth-child(8) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table col.customer-service-quick-edit-col,
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table th:first-child,
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel .customer-service-load-table td.customer-service-quick-edit-col {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel tbody#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col {
    display: grid !important;
    grid-template-columns: 28px 28px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 4px !important;
    padding: 7px 4px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 0 !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel tbody#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col > button {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel tbody#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col > button.customer-service-quick-edit-button,
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel tbody#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col > button:nth-of-type(2) {
    border: 1px solid #c9d4e2 !important;
    border-radius: 7px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel tbody#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col > button.customer-service-quick-edit-button > *,
  html body[data-page="customer-service"] #customerServiceView #customerServiceLoadsPanel tbody#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col > button:nth-of-type(2) > * {
    display: none !important;
  }
}

/* Terminal 14-column correction: TMS/play and pencil are separate centered columns. */
@media (min-width: 721px) {
  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(1),
  html body[data-page="customer-service"] #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[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel :is(.customer-service-tms-pull-header, .customer-service-quick-edit-header),
  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel tbody#customerServiceRows#customerServiceRows > tr[data-customer-service-id] > :is(td.customer-service-tms-pull-col, td.customer-service-quick-edit-col) {
    display: table-cell !important;
    padding: 7px 4px !important;
    overflow: visible !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel tbody#customerServiceRows#customerServiceRows > tr[data-customer-service-id] > td.customer-service-quick-edit-col > .quick-tms-pull-button {
    display: none !important;
  }

  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel tbody#customerServiceRows#customerServiceRows > tr[data-customer-service-id] > :is(td.customer-service-tms-pull-col, td.customer-service-quick-edit-col) > .quick-edit-load-button,
  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel #customerServiceAutoTmsToggle {
    display: inline-grid !important;
    place-items: center !important;
    position: static !important;
    left: auto !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(8) {
    width: 7.5% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body[data-page="customer-service"] #customerServiceView#customerServiceView #customerServiceLoadsPanel#customerServiceLoadsPanel .customer-service-load-table :is(col, th, td):nth-child(9) {
    width: 7.5% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}