/* Opt in only the detailed customer-debt workspace; payment/QR dialogs keep
   their normal size. Explicit viewport sizing avoids the shared modal's cap. */
.debt-detail-modal {
  flex-shrink: 0;
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  min-width: 0;
}

.debt-detail-modal > div:first-child {
  flex-shrink: 0;
  padding: 12px 16px;
}

.debt-detail-modal > div:last-child {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow-x: hidden;
}

/* A fieldset defaults to min-inline-size:min-content: a wide ledger can then
   stretch ALL controls and clip dates/export buttons at the dialog edge. */
.debt-detail-modal fieldset,
.debt-detail-modal fieldset > *,
.debt-detail-modal .grid > * {
  min-width: 0;
  min-inline-size: 0;
}

.debt-detail-modal input,
.debt-detail-modal select {
  min-width: 0;
  max-width: 100%;
}

/* Preserve all columns and readable money text. On smaller screens only the
   tables scroll sideways; the customer card and filters stay in view. */
.debt-detail-modal .overflow-x-auto {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

@media (max-width: 639px) {
  .debt-detail-modal {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .debt-detail-modal > div:first-child,
  .debt-detail-modal > div:last-child {
    padding: 12px;
  }
}