/*
 * Final cross-portal layout safeguards.
 * Scope: presentation only. No business logic, permissions, pricing or data changes.
 */

/* CRM: allow customer cards to grow when an attention message is present. */
.crm-customer-list > button {
  box-sizing: border-box;
  height: auto !important;
  min-height: 112px !important;
  overflow: hidden;
}

.crm-customer-list > button:has(> em) {
  min-height: 136px !important;
}

.crm-customer-list > button > span,
.crm-customer-list > button > small,
.crm-customer-list > button > em,
.crm-customer-row-top > strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.crm-customer-list > button > em {
  display: block;
  line-height: 1.35;
}

/* Logistics: the original fixed 430px/480px columns exceed the workspace at
   common laptop and tablet widths. Stack the panels before that happens. */
.logistics-layout,
.logistics-layout > *,
.logistics-form-panel,
.logistics-list-panel {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 1121px) {
  .logistics-layout {
    grid-template-columns: minmax(540px, 1.1fr) minmax(360px, 1fr) !important;
  }
}

@media (max-width: 1120px) {
  .logistics-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .logistics-form-panel,
  .logistics-list-panel {
    width: 100%;
  }
}

/* Payments: preserve the intentional scrollable ledger while keeping long
   customer names and references inside their cells. */
.payment-records .table-wrap {
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.payment-records td,
.payment-records td strong,
.payment-records td small {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 1180px) {
  .payment-attention {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  .payment-attention > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .payment-attention > button {
    flex: 1 1 210px !important;
    min-width: 0 !important;
  }
}

/* Email templates: make the long template library intentionally scrollable
   and prevent tab labels from being compressed or painted over neighbours. */
.template-tabs {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}

.template-tabs > button {
  flex: 0 0 auto;
  max-width: min(320px, 82vw);
  white-space: normal;
  overflow-wrap: anywhere;
  scroll-snap-align: start;
}

@media (max-width: 640px) {
  .template-heading > button,
  .template-library,
  .template-compose-panel,
  .template-preview-panel {
    min-width: 0;
    max-width: 100%;
  }

  .template-tabs > button {
    min-height: 44px;
  }
}