/* FieldBase 1.6.8.3.142 - Dev Center mobile containment
   UI-only guardrail to stop Dev Center header/cards from pushing past mobile viewport. */

html,
body.dev-center-page {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.dev-center-page,
body.dev-center-page * {
  box-sizing: border-box !important;
}

body.dev-center-page .dev-shell {
  width: 100% !important;
  max-width: 1180px !important;
  padding-left: clamp(12px, 4vw, 24px) !important;
  padding-right: clamp(12px, 4vw, 24px) !important;
  overflow-x: hidden !important;
}

body.dev-center-page .dev-header,
body.dev-center-page .dev-panel,
body.dev-center-page .dev-card,
body.dev-center-page .dev-security-panel,
body.dev-center-page .dev-security-subpanel,
body.dev-center-page .qa-test-card {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.dev-center-page .dev-header {
  width: 100% !important;
  flex-wrap: wrap !important;
  overflow: hidden !important;
}

body.dev-center-page .dev-title {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "back logo"
    "title logo"
    "desc desc"
    "badge badge" !important;
  align-items: center !important;
  gap: 8px 14px !important;
}

body.dev-center-page .dev-back-link {
  grid-area: back !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.dev-center-page .dev-title h1 {
  grid-area: title !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.08 !important;
}

body.dev-center-page .dev-title p {
  grid-area: desc !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  overflow-wrap: anywhere !important;
}

body.dev-center-page .dev-title .dev-badge,
body.dev-center-page #devIdentityBadge {
  grid-area: badge !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.dev-center-page .topbar-logo {
  grid-area: logo !important;
  width: clamp(58px, 14vw, 110px) !important;
  height: clamp(58px, 14vw, 110px) !important;
  max-width: 28vw !important;
  margin-left: 0 !important;
  justify-self: end !important;
  align-self: center !important;
  flex: 0 0 auto !important;
}

body.dev-center-page .dev-grid,
body.dev-center-page .dev-security-summary,
body.dev-center-page .security-category-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  max-width: 100% !important;
}

body.dev-center-page .dev-control-grid,
body.dev-center-page .dev-security-intelligence-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  max-width: 100% !important;
}

body.dev-center-page .dev-toggle-row,
body.dev-center-page .dev-actions,
body.dev-center-page .qa-actions,
body.dev-center-page .dev-security-head,
body.dev-center-page .security-result-title {
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

body.dev-center-page .dev-text-input,
body.dev-center-page input,
body.dev-center-page select,
body.dev-center-page textarea {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.dev-center-page .dev-btn,
body.dev-center-page .dev-mini-action,
body.dev-center-page .security-json-row {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.dev-center-page .dev-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.dev-center-page .dev-table {
  width: 100% !important;
}

@media (max-width: 720px) {
  body.dev-center-page .dev-shell {
    padding-top: 14px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.dev-center-page .dev-header {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body.dev-center-page .dev-title {
    grid-template-columns: minmax(0, 1fr) clamp(54px, 20vw, 76px) !important;
    gap: 6px 10px !important;
  }

  body.dev-center-page .topbar-logo {
    width: clamp(54px, 20vw, 76px) !important;
    height: clamp(54px, 20vw, 76px) !important;
    max-width: 22vw !important;
  }

  body.dev-center-page .dev-title h1 {
    font-size: clamp(1.45rem, 8vw, 2rem) !important;
  }

  body.dev-center-page .dev-grid,
  body.dev-center-page .dev-control-grid,
  body.dev-center-page .dev-security-summary,
  body.dev-center-page .dev-security-intelligence-grid,
  body.dev-center-page .security-category-grid {
    grid-template-columns: 1fr !important;
  }

  body.dev-center-page .dev-actions,
  body.dev-center-page .qa-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.dev-center-page .dev-btn,
  body.dev-center-page .dev-mini-action {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}