/* Only new layout behaviour. Visual styles come from base.html and documents.css. */
#content .columns { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
#content .stack { display: grid; gap: 24px; align-content: start; }
#content .table-wrap { overflow-x: auto; }
#content .inbox-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
#content .message-detail { min-width: 0; }
#content .email-body { white-space: pre-wrap; overflow-wrap: anywhere; }
#toast[hidden] { display: none; }
#toast { position: fixed; bottom: 24px; right: 24px; z-index: 80; max-width: calc(100vw - 48px); }
@media (max-width: 1023px) {
  #content .columns, #content .inbox-layout { grid-template-columns: 1fr; }
}

/* Centre the order confirmation while retaining the CRM dialog components. */
.docs-dialog.order-confirm-dialog {
  inset: 0;
  margin: auto;
  width: min(470px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
}