/* Cross-surface responsive and bidirectional safeguards. */
html, body { max-width: 100%; }
main, section, article, form, fieldset, table, pre, code { min-width: 0; }
pre, code, .text-break { overflow-wrap: anywhere; word-break: break-word; }
.table-responsive { scrollbar-width: thin; scrollbar-color: #c9c3df transparent; }
.dropdown-menu { overflow-wrap: anywhere; }

[dir="rtl"] { text-align: right; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .pagination { padding-right: 0; }
[dir="rtl"] .input-group > :not(:first-child) { margin-right: -1px; margin-left: 0; }
[dir="rtl"] .input-group > :first-child { border-radius: 0 var(--sx-radius-md) var(--sx-radius-md) 0; }
[dir="rtl"] .input-group > :last-child { border-radius: var(--sx-radius-md) 0 0 var(--sx-radius-md); }

@media (max-width: 1199.98px) {
  .sx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .sx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767.98px) {
  .sx-page-header { align-items: stretch; flex-direction: column; }
  .sx-page-header__actions, .sx-page-header__actions .btn { width: 100%; }
  .sx-toolbar { grid-template-columns: 1fr; }
  .sx-toolbar .btn, .sx-toolbar .form-control, .sx-toolbar .form-select { width: 100%; }
  .sx-tabs__list { margin-inline: -.25rem; border-radius: var(--sx-radius-md); }
  .sx-technical-value__text { max-inline-size: 62vw; }
  body { font-size: .9rem; }
  .container-xl { padding-inline: 1rem; }
  .sx-grid-2, .sx-grid-3, .sx-grid-4 { grid-template-columns: 1fr; }
  .btn-group { max-width: 100%; flex-wrap: wrap; }
  .btn-group > .btn { flex: 1 1 auto; }
  .d-flex.gap-2, .d-flex.gap-3 { min-width: 0; flex-wrap: wrap; }
  .d-flex.gap-2 > .form-control, .d-flex.gap-2 > .form-select { min-width: min(100%, 12rem); }
  .store-actions { align-items: stretch; flex-direction: column; }
  .store-actions .btn { width: 100%; }
  .branding-upload-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  .btn-lg { min-height: 48px; }
  .sx-state-actions, .deployment-actions { align-items: stretch; flex-direction: column; }
  .sx-state-actions .btn, .deployment-actions .btn { width: 100%; }
  .store-meta { grid-template-columns: 1fr; }
  .modal-dialog { margin: .65rem; }
}