/* ========================================================================
   DentalGenius Account / 2FA layout guard
   Scope: prevent Fortify QR SVG from stretching the account page after
   legacy utility removal and keep the setup block responsive.
   ======================================================================== */

.layout-wrapper.layout-content-navbar .dg-account-page #account-security-tab,
.layout-wrapper.layout-content-navbar .dg-account-page #twoFactorAccountCard,
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup,
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-recovery {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup .dg-account-security-grid {
  grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(1rem, 2vw, 1.4rem) !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup .dg-account-side-panel,
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup .dg-account-main-panel {
  min-width: 0 !important;
  max-width: 100% !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup .dg-account-side-panel {
  width: 100% !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-account-qr-box {
  width: 100% !important;
  max-width: 21rem !important;
  margin-inline: auto !important;
  padding: clamp(.9rem, 2vw, 1.15rem) !important;
  overflow: hidden !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr svg,
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr .dg-two-factor-qr-svg {
  display: block !important;
  width: min(100%, 18rem) !important;
  min-width: 0 !important;
  max-width: 18rem !important;
  height: auto !important;
  max-height: min(54vh, 18rem) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr svg[width],
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr svg[height] {
  width: min(100%, 18rem) !important;
  height: auto !important;
}

.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup h6,
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup p,
.layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup form {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 991.98px) {
  .layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup .dg-account-security-grid {
    grid-template-columns: 1fr !important;
  }

  .layout-wrapper.layout-content-navbar .dg-account-page .dg-account-qr-box {
    max-width: 19rem !important;
  }

  .layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr svg,
  .layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr .dg-two-factor-qr-svg {
    width: min(100%, 16.5rem) !important;
    max-width: 16.5rem !important;
    max-height: 16.5rem !important;
  }
}

@media (max-width: 575.98px) {
  .layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-setup {
    margin-inline: -.25rem !important;
  }

  .layout-wrapper.layout-content-navbar .dg-account-page .dg-account-qr-box {
    max-width: 100% !important;
    padding: .85rem !important;
  }

  .layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr svg,
  .layout-wrapper.layout-content-navbar .dg-account-page .dg-2fa-qr .dg-two-factor-qr-svg {
    width: min(100%, 14.5rem) !important;
    max-width: 14.5rem !important;
    max-height: 14.5rem !important;
  }
}