/* Keep ordinary scrollable cards inside their actual dialog rail. Specialized
   rule/DNS/UFW editors retain their separate, explicitly sized scroll regions. */
dialog.modal-dialog > :is(.bulk-card, .oci-terminate-card, .confirm-card, .oci-operation-card) {
  max-height: inherit;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Very short VPS dialogs need one scroll rail; fixed heading/footer rows must
   not squeeze the management body to a few invisible pixels. */
@media (max-height: 480px) {
  dialog.infomaniak-dialog > .infomaniak-card {
    max-height: inherit;
    overflow-y: auto;
  }
  dialog.infomaniak-dialog > .infomaniak-card > * { flex: 0 0 auto; }
  dialog.infomaniak-dialog .infomaniak-card [data-ik-body] {
    min-height: auto;
    overflow-y: visible;
  }
}

/* OCI manager cards used a separate mobile cap four pixels taller than their
   clipped dialog shell. Share the actual rail instead of another viewport math. */
dialog.modal-dialog.provider-manager-dialog > .provider-manager-card {
  max-height: inherit;
  min-width: 0;
}

/* Provider display names are free-form and may contain no break opportunities.
   Let the named item shrink inside its flex/grid track rather than widening
   the entire manager and moving its controls offscreen. */
dialog .provider-manager-card :is(.oci-identity-main, .oci-storage-main) strong,
dialog .provider-manager-card .provider-list strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Targets and warnings can contain long domains, resource IDs or translated
   strings. Do not let their min-content width push controls outside the card. */
dialog .confirm-card :is(.confirm-heading > div, .typed-confirm-label) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The generic direct-label grid and nowrap switch style both applied here,
   leaving the checkbox above an unbreakable authorization sentence. */
dialog .modal-card > label.danger-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  white-space: normal;
  color: var(--text);
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--surface-solid) 95%, var(--red));
}
dialog .danger-confirm > input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}
dialog .danger-confirm > :is(span, strong) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The late 1100px registrar rule otherwise wins over its earlier 860px
   single-column rule. Keep shortcut copy within its own grid track. */
#dashboard-screen .registrar-link-card > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 860px) {
  #dashboard-screen .registrar-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #dashboard-screen .registrar-link-grid .dropcatch-link-card {
    grid-column: auto;
  }
}

/* A flex search label retains its input's intrinsic width unless explicitly
   allowed to shrink; at narrow widths, give search and action separate rows. */
dialog .dns-record-tools,
dialog .dns-record-tools .dns-search,
dialog .dns-form-grid > label {
  min-width: 0;
}
@media (max-width: 520px) {
  dialog .dns-record-tools {
    flex-wrap: wrap;
  }
  dialog .dns-record-tools .dns-search {
    flex: 1 1 100%;
  }
  dialog .dns-record-tools > button {
    width: 100%;
  }
}
@media (max-width: 400px) {
  dialog .dns-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  dialog .dns-form-grid > label {
    grid-column: 1;
  }
  dialog .dns-form-actions {
    flex-wrap: wrap;
  }
  dialog .dns-form-actions > button {
    flex: 1 1 auto;
  }
}

/* The template's fixed heading/safety/toolbar/footer rails can consume the
   entire viewport on phones or short windows. Use one natural scroll stack
   there instead of collapsing the actual policy editor to a zero-height row. */
@media (max-height: 600px), (max-width: 520px) {
  dialog#ufw-template-dialog > .ufw-template-viewer {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: inherit;
    overflow-y: auto;
  }
  dialog#ufw-template-dialog > .ufw-template-viewer > * {
    flex: 0 0 auto;
    min-width: 0;
  }
  dialog#ufw-template-dialog .ufw-template-scroll {
    min-height: auto;
    max-height: none;
    overflow-y: visible;
  }
}

/* These template labels otherwise inherit the generic nowrap switch copy,
   whose min-content width can push long text out of a narrow template card. */
dialog#ufw-template-dialog .ufw-template-switches .switch-field {
  min-width: 0;
  white-space: normal;
  align-items: flex-start;
}
dialog#ufw-template-dialog .ufw-template-switches .switch-field > input {
  flex: 0 0 16px;
}
dialog#ufw-template-dialog .ufw-template-switches .switch-field > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The live policy editor has the same fixed-rail constraint as the template.
   On short/narrow screens let the entire form scroll so its heading and action
   rows cannot squeeze the policy fields into an inaccessible zero-height row.
   Keep the desktop editor and the rule table's horizontal scroll unchanged. */
@media (max-height: 600px), (max-width: 520px) {
  dialog#ufw-policy-dialog > .ufw-policy-editor {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: inherit;
    overflow-y: auto;
  }
  dialog#ufw-policy-dialog > .ufw-policy-editor > * {
    flex: 0 0 auto;
    min-width: 0;
  }
  dialog#ufw-policy-dialog .ufw-policy-scroll {
    min-height: auto;
    max-height: none;
    overflow-y: visible;
    grid-template-columns: minmax(0, 1fr);
  }
  dialog#ufw-policy-dialog .ufw-editor-section,
  dialog#ufw-policy-dialog .ufw-preview-panel {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  dialog#ufw-policy-dialog .ufw-editor-section > *,
  dialog#ufw-policy-dialog .ufw-preview-panel > * {
    min-width: 0;
  }
  dialog#ufw-policy-dialog .ufw-editor-heading {
    flex-wrap: wrap;
  }
}

/* Long zone headings and the stacked analytics toolbar can exhaust a short
   viewport. Keep the charts in the card's natural scroll flow there. */
@media (max-width: 520px), (max-height: 600px) {
  dialog.cloudflare-analytics-dialog > .cloudflare-analytics-card {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: inherit;
    overflow-y: auto;
  }
  dialog.cloudflare-analytics-dialog > .cloudflare-analytics-card > * {
    flex: 0 0 auto;
    min-width: 0;
  }
  dialog.cloudflare-analytics-dialog .cloudflare-analytics-content {
    min-height: auto;
    overflow-y: visible;
  }
}

/* Account facts can exceed a short viewport even when the tooltip is placed
   at its top gutter. Keep every value reachable within the positioned panel. */
.profile-account-popover {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}