/* ═══════════════════════════════════════════════════════════════
   ACCOUNT MANAGE PAGES — SetPassword · ChangeEmail · ChangeLogin
   ═══════════════════════════════════════════════════════════════
   All three pages use ProfileChildPage.aspx (Rewrite type).card IMPORTANT: the sidebar on these security pages does NOT carry
   .profile-info — so ALL profile .row:has(.profile-info) rules
   fail to fire here. This block is FULLY SELF-CONTAINED.card Scope anchors:
     body:has(.atq-manage-sentinel)          → body-level tokens/bg
     .row:has(.atq-manage-sentinel) → layout row scoping
   
   Sentinel div is injected by each pagecopy content snippet.card ═══════════════════════════════════════════════════════════════ */

/* ── Sentinel: invisible DOM hook ── */
.atq-manage-sentinel { display: none !important; }

/* ── Design tokens: consolidated into §8 (shared Profile + Manage block) ── */

/* ── Page background — light: gradient orbs, dark: dot-grid + orbs ── */
body:has(.atq-manage-sentinel) {
  background-image:
    radial-gradient(ellipse 70% 320px at 15% -40px, rgba(79,124,255,0.40), transparent),
    radial-gradient(ellipse 55% 260px at 85% -60px, rgba(14,165,233,0.30), transparent),
    radial-gradient(ellipse 40% 180px at 50% -20px, rgba(124,58,237,0.12), transparent) !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}
/* ── Dark body bg + orbs: consolidated into §5 (shared Profile + Manage block) ── */

/* ── Animated ambient orbs: consolidated into §5 ── */

/* ── Hide ASPX-rendered page heading — hero replaces it ── */
body:has(.atq-manage-sentinel) .page-heading,
body:has(.atq-manage-sentinel) .page-header,
body:has(.atq-manage-sentinel) .breadcrumb { display: none !important; }
body:has(.atq-manage-sentinel) .container > hr { display: none !important; }
body:has(.atq-manage-sentinel) .container h1:not(.atq-manage-title):not([class]),
body:has(.atq-manage-sentinel) .container h2:not(.atq-manage-title):not([class]) { display: none !important; }

/* ── LAYOUT ROW — outer card matching Profile page ── */
/* Scope: row that CONTAINS the sentinel anywhere as a descendant.card      */
/* This fires regardless of column class name (col-md-8, col-sm-8, col-lg-8). */
.row:has(.atq-manage-sentinel) {
  max-width: 1040px !important;
  margin: 0 auto 48px !important;
  padding: 28px !important;
  display: flex !important;
  gap: 32px !important;
  align-items: flex-start !important;
  font-family: var(--pp-font) !important;
  position: relative !important;
  z-index: 1 !important;
  /* Outer card — matches Profile page .row:has(.profile-info) */
  background: var(--pp-bg) !important;
  border-radius: 28px !important;
  box-shadow: var(--pp-shadow-lg) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) {
  /* Frosted glass — lets animated orbs bleed through as soft aurora glow */
  background: rgba(10,14,24,0.62) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  border: 1px solid rgba(138,180,255,0.08) !important;
}

/* ── SIDEBAR column — column that does NOT contain the sentinel ── */
/* Use :not(:has(.atq-manage-sentinel)) to target the OTHER column (the sidebar). */
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) {
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  position: sticky !important;
  top: 24px !important;
  will-change: transform, opacity !important;
}

/* ── CONTENT column — column that contains the sentinel ── */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  will-change: transform, opacity !important;
}

/* ── AVATAR CARD — .card in sidebar (only well on the page) ── */
/* ── ALL sidebar cards: glassmorphism visual shell only ──
   margin-top / flex-column / font / animation are avatar-only (see below)    */
body:has(.atq-manage-sentinel) .card {
  background: var(--pp-surface-glass) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow-lg), var(--pp-shadow-glow) !important;
  margin-bottom: 16px !important;
  position: relative !important;
  overflow: visible !important;
  transition: transform 0.3s var(--pp-ease), box-shadow 0.3s var(--pp-ease),
              opacity 0.55s var(--pp-ease), translate 0.55s var(--pp-ease) !important;
}
body:has(.atq-manage-sentinel) .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--pp-shadow-lg), 0 0 32px var(--pp-primary-glow) !important;
}

/* ── AVATAR CARD only — scoped to .card.profile-info / .well.profile-info ──
   Manage page well has FLAT content: <img> &nbsp; Pranjal Patel (bare text).
   We use display:flex + flex-direction:column to force vertical stacking
   regardless of whether the content is wrapped or bare text nodes.             */
body:has(.atq-manage-sentinel) .card.profile-info,
body:has(.atq-manage-sentinel) .well.profile-info,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img),
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img) {
  padding: 28px 24px 28px !important;  /* 28px top = ring (6px) + 22px buffer */
  text-align: center !important;
  margin-top: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-family: var(--pp-font) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  animation: ppFadeSlideUp 0.55s var(--pp-ease) both !important;
}
/* Flatten any inner Bootstrap grid inside the avatar card only */
body:has(.atq-manage-sentinel) .card.profile-info .row,
body:has(.atq-manage-sentinel) .well.profile-info .row,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img) .row,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img) .row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
body:has(.atq-manage-sentinel) .card.profile-info .row > [class*="col-"],
body:has(.atq-manage-sentinel) .card.profile-info .row > [class^="col-"],
body:has(.atq-manage-sentinel) .well.profile-info .row > [class*="col-"],
body:has(.atq-manage-sentinel) .well.profile-info .row > [class^="col-"],
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img) .row > [class*="col-"],
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img) .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}
/* Avatar img — inside avatar card only */
body:has(.atq-manage-sentinel) .card.profile-info img,
body:has(.atq-manage-sentinel) .well.profile-info img,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img) img,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img) img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  border: none !important;
  object-fit: cover !important;
  margin-bottom: 16px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important; /* Avatar fully inside card — no overflow dependency */
  position: relative !important;
  z-index: 2 !important;
  background: var(--pp-surface) !important;
  padding: 4px !important;
  box-shadow: 0 0 0 3px var(--pp-primary), 0 0 0 6px var(--pp-surface), var(--pp-shadow-lg) !important;
  transition: transform 0.3s var(--pp-ease-bounce), box-shadow 0.3s var(--pp-ease) !important;
}
body:has(.atq-manage-sentinel) .card.profile-info:hover img,
body:has(.atq-manage-sentinel) .well.profile-info:hover img,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img):hover img,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img):hover img {
  transform: scale(1.05) !important;
  animation: ppPulseRing 1.5s ease-out !important;
}
body:has(.atq-manage-sentinel) .card.profile-info .userFullName,
body:has(.atq-manage-sentinel) .well.profile-info .userFullName,
body:has(.atq-manage-sentinel) .card.profile-info ~ .userFullName,
body:has(.atq-manage-sentinel) .well.profile-info ~ .userFullName,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img) .userFullName,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img) .userFullName,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img) ~ .userFullName,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .userFullName,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:has(img) a,
body:has(.atq-manage-sentinel) [class*="col-"]:not(:has(.atq-manage-sentinel)) > .well:has(img) a {
  font-family: var(--pp-font) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  margin: 4px 0 6px !important;
  text-align: center !important;
}

/* ── PROFILE NAV CARD — .weblinks.list-group (Power Pages sidebar nav) ── */
body:has(.atq-manage-sentinel) .weblinks.list-group {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  padding: 8px !important;
  /* Entrance animation — staggered 75ms after well */
  animation: ppFadeSlideUp 0.55s var(--pp-ease) 75ms both !important;
}

/* ── SECURITY PANEL — sidebar column's .card (sibling fallback + column-scoped) ── */
/* Two selector strategies:
   1. .weblinks.list-group ~ .card  (works when they're siblings)
   2. sidebar-column > .card        (works regardless of DOM sibling relationship) */
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card{
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  transition: box-shadow 0.3s var(--pp-ease), transform 0.3s var(--pp-ease) !important;
  /* Entrance animation — staggered 150ms after well */
  animation: ppFadeSlideUp 0.55s var(--pp-ease) 150ms both !important;
}
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card:hover,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card:hover {
  box-shadow: var(--pp-shadow-lg) !important;
  transform: translateY(-1px) !important;
}
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .card-header,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .card-header {
  background: var(--pp-gradient-soft) !important;
  border-bottom: 1px solid var(--pp-border) !important;
  padding: 16px 20px !important;
  border-radius: var(--pp-radius) var(--pp-radius) 0 0 !important;
}
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .card-header h3,
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .card-title,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .card-header h3,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .card-title {
  font-family: var(--pp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
  margin: 0 !important;
}
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .card-header .bi,
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .card-header .fa,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .card-header .bi,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .card-header .fa {
  margin-right: 8px !important;
  opacity: 0.75 !important;
}
body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .list-group,
.row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .list-group,
/* Also cover profile page Security card inner list-group */
.row:has(.profile-info) .card .list-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 8px !important;
}

/* ── Border kill — ONLY for .weblink items (Profile nav), NOT panel items ── */
/* Profile page does NOT kill borders on Security panel items — they keep
   Bootstrap's default .list-group-item dividers. So we only kill borders
   on .weblink.list-group-item (the "Profile" nav link). */
body:has(.atq-manage-sentinel) .weblink.list-group-item {
  border: none !important;
  border-width: 0 !important;
}
body:has(.atq-manage-sentinel) .weblink.list-group-item + .weblink.list-group-item {
  border-top: none !important;
  margin-top: 0 !important;
}

/* ── Security panel .list-group-item — full nav pill treatment (matches weblink items) ── */
/* Kill Bootstrap 5 dividers and apply the same borderless pill nav styling as .weblink items. */
body:has(.atq-manage-sentinel) .card .list-group-item,
.row:has(.profile-info) .card .list-group-item {
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pp-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-top: none !important; /* Kill Bootstrap 5 sibling dividers */
  border-radius: var(--pp-radius-sm) !important;
  padding: 11px 16px !important;
  margin: 2px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s var(--pp-ease) !important;
}
body:has(.atq-manage-sentinel) .card .list-group-item:first-child,
body:has(.atq-manage-sentinel) .card .list-group-item:last-child,
.row:has(.profile-info) .card .list-group-item:first-child,
.row:has(.profile-info) .card .list-group-item:last-child {
  border-radius: var(--pp-radius-sm) !important;
}
body:has(.atq-manage-sentinel) .card .list-group-item:hover,
.row:has(.profile-info) .card .list-group-item:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateX(4px) !important;
}
body:has(.atq-manage-sentinel) .card .list-group-item.active,
body:has(.atq-manage-sentinel) .card .list-group-item[aria-current="page"],
.row:has(.profile-info) .card .list-group-item.active,
.row:has(.profile-info) .card .list-group-item[aria-current="page"] {
  background: var(--pp-gradient) !important;
  background-color: var(--pp-primary) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px var(--pp-primary-glow) !important;
}
body:has(.atq-manage-sentinel) .card .list-group-item.active:hover,
body:has(.atq-manage-sentinel) .card .list-group-item[aria-current="page"]:hover,
.row:has(.profile-info) .card .list-group-item.active:hover,
.row:has(.profile-info) .card .list-group-item[aria-current="page"]:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* ── NAV ITEMS — ONLY .weblink items (Profile nav link) ── */
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item {
  display: block !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pp-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: var(--pp-radius-sm) !important;
  padding: 11px 16px !important;
  margin: 2px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s var(--pp-ease) !important;
}
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item:first-child,
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item:last-child {
  border-radius: var(--pp-radius-sm) !important;
}
/* Shine sweep on hover */
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(79,124,255,0.08), transparent) !important;
  transition: none !important;
  pointer-events: none !important;
}
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item:hover::before {
  animation: ppShine 0.6s var(--pp-ease) !important;
}
/* Hover */
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateX(4px) !important;
}
/* Active / current page */
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item.active,
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item[aria-current="page"] {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px var(--pp-primary-glow) !important;
  transform: none !important;
}
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item.active:hover,
body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item[aria-current="page"]:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* ── Dark mode sidebar overrides ── */
html[data-theme="dark"] body:has(.atq-manage-sentinel) .card {
  background: var(--pp-surface-glass) !important;
  background-color: var(--pp-surface-glass) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .card img {
  box-shadow: 0 0 0 3px var(--pp-primary), 0 0 0 6px var(--pp-surface), var(--pp-shadow-lg) !important;
  background: var(--pp-surface) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks.list-group {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card{
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks.list-group ~ .card .card-header,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) > .card .card-header {
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pp-text) !important;
  border: none !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item.active,
html[data-theme="dark"] body:has(.atq-manage-sentinel) .weblinks .weblink.list-group-item[aria-current="page"] {
  background: var(--pp-gradient) !important;
  background-color: var(--pp-primary) !important;
  color: #ffffff !important;
}
/* Dark mode — Security panel items (keep Bootstrap dividers, just fix colors) */
html[data-theme="dark"] body:has(.atq-manage-sentinel) .card .list-group-item {
  background-color: var(--pp-surface) !important;
  color: var(--pp-text) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .card .list-group-item:hover {
  background: var(--pp-gradient) !important;
  background-color: transparent !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .card .list-group-item.active {
  background-color: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
  color: #ffffff !important;
}

/* ── page-copy wrapper — top margin matches Profile (40px gap before hero) ── */
body:has(.atq-manage-sentinel) .page-copy,
body:has(.atq-manage-sentinel) .xrm-editable-html {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 40px 0 24px !important;
  box-shadow: none !important;
}

/* ── ASPX form heading — hidden; hero provides the title already ── */
/* DOM: col > .row > fieldset > legend + form
   The <legend> is the heading text, the outer <fieldset> adds an unwanted border.card Use DESCENDANT selectors to reach through the .row wrapper. */
body:has(.atq-manage-sentinel) .row > fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:has(.atq-manage-sentinel) .row > fieldset > legend {
  display: none !important;
}

/* ── OUTER FIELDSET WRAPPER — reset browser default border ── */
/* DOM: .row > col(content) > fieldset > legend + form  (Set Password, Change Email…)  */
body:has(.atq-manage-sentinel) fieldset:has(> form) {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}
/* Remove legend entirely — hero card already provides the page title */
body:has(.atq-manage-sentinel) fieldset:has(> form) > legend {
  display: none !important;
}
/* Nuclear fallback — hide ALL legends on manage pages except inner form fieldsets */
body:has(.atq-manage-sentinel) legend {
  display: none !important;
}

/* ── HERO CARD ── */
body:has(.atq-manage-sentinel) .atq-manage-hero {
  background: var(--pp-surface-glass) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 22px !important;
  padding: 26px 30px !important;
  box-shadow: var(--pp-shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  /* Entrance animation — staggered 150ms (matches Profile .atq-profile-hero) */
  animation: ppFadeSlideUp 0.55s var(--pp-ease) 150ms both !important;
}
body:has(.atq-manage-sentinel) .atq-manage-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(800px 220px at 0% 0%, rgba(79,124,255,0.10), transparent 60%),
    radial-gradient(600px 180px at 100% 0%, rgba(14,165,233,0.08), transparent 60%) !important;
  pointer-events: none !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .atq-manage-hero {
  background: rgba(20,26,36,0.85) !important;
  border-color: rgba(138,180,255,0.10) !important;
}
html[data-theme="dark"] body:has(.atq-manage-sentinel) .atq-manage-hero::before {
  background:
    radial-gradient(800px 220px at 0% 0%, rgba(138,180,255,0.09), transparent 60%),
    radial-gradient(600px 180px at 100% 0%, rgba(34,211,238,0.07), transparent 60%) !important;
}
body:has(.atq-manage-sentinel) .atq-manage-hero-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
}
body:has(.atq-manage-sentinel) .atq-manage-kicker {
  font-family: var(--pp-font) !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--pp-text-soft) !important;
  margin: 0 0 8px !important;
}
body:has(.atq-manage-sentinel) .atq-manage-title {
  font-family: var(--pp-font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.4px !important;
  line-height: 1.25 !important;
}
body:has(.atq-manage-sentinel) .atq-manage-lead {
  font-family: var(--pp-font) !important;
  font-size: 14.5px !important;
  color: var(--pp-text-muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
  max-width: 520px !important;
}
body:has(.atq-manage-sentinel) .atq-manage-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body:has(.atq-manage-sentinel) .atq-manage-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--pp-border) !important;
  background: var(--pp-surface-raised) !important;
  color: var(--pp-text-muted) !important;
  font-family: var(--pp-font) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
body:has(.atq-manage-sentinel) .atq-manage-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: 1px solid var(--pp-border) !important;
  background: var(--pp-surface) !important;
  color: var(--pp-text) !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform 0.2s var(--pp-ease), border-color 0.2s var(--pp-ease),
              box-shadow 0.2s var(--pp-ease), color 0.2s var(--pp-ease) !important;
}
body:has(.atq-manage-sentinel) .atq-manage-back:hover {
  transform: translateY(-2px) !important;
  border-color: var(--pp-primary) !important;
  color: var(--pp-primary) !important;
  box-shadow: var(--pp-shadow) !important;
  text-decoration: none !important;
}

/* ── FORM CARD ── */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  padding: 28px 30px !important;
  box-shadow: var(--pp-shadow) !important;
  margin-bottom: 16px !important;
  /* Entrance animation — staggered 450ms (matches Profile fieldset timing) */
  animation: ppFadeSlideUp 0.55s var(--pp-ease) 450ms both !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form {
  background: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
/* Legend → small uppercase section label.
   IMPORTANT: the nuclear rule above hides ALL legends — this rule must counter
   it with display:block for inner form fieldset legends (section titles). */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form legend {
  display: block !important;           /* counter body:has(.atq-manage-sentinel) legend { display:none } */
  font-family: var(--pp-font) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--pp-text-soft) !important;
  border-bottom: none !important;
  margin-bottom: 18px !important;
  width: 100% !important;
  float: none !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form legend {
  color: var(--pp-text-soft) !important;
}

/* Form groups */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .row {
  margin-bottom: 18px !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .row label,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .col-form-label {
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--pp-text-muted) !important;
  margin-bottom: 7px !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .row label,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .col-form-label {
  color: var(--pp-text-soft) !important;
}

/* Inputs */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .form-control,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="text"],
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="email"],
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="password"],
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="tel"],
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) select,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) textarea {
  background: var(--pp-surface-raised) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 10px !important;
  color: var(--pp-text) !important;
  font-family: var(--pp-font) !important;
  font-size: 14.5px !important;
  padding: 10px 14px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .form-control:focus,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="text"]:focus,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="email"]:focus,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="password"]:focus {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 3px var(--pp-primary-light) !important;
  outline: none !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .form-control:hover,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input:not([type="submit"]):hover {
  border-color: var(--pp-border-hover) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .form-control,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="text"],
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="email"],
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="password"] {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text) !important;
}
/* Dark mode hover — must be MORE specific than the base dark rule above */
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .form-control:hover,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="text"]:hover,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="email"]:hover,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="password"]:hover,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) select:hover,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) textarea:hover {
  border-color: var(--pp-border-hover) !important;
  box-shadow: 0 0 0 3px rgba(138,180,255,0.07) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .form-control:focus,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="text"]:focus,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="email"]:focus,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) input[type="password"]:focus {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 3px var(--pp-primary-light) !important;
  outline: none !important;
  background: var(--pp-surface-raised) !important;
}

/* Submit / primary button */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form [type="submit"],
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form .btn-primary {
  background: var(--pp-gradient) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 11px 26px !important;
  font-family: var(--pp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 4px 16px var(--pp-primary-glow) !important;
  cursor: pointer !important;
  transition: transform 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form [type="submit"]:hover,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px var(--pp-primary-glow) !important;
}

/* ── Linked accounts panel (ChangeLogin page) ── */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card-header {
  background: var(--pp-surface-raised) !important;
  border-bottom: 1px solid var(--pp-border) !important;
  padding: 14px 20px !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card-body {
  padding: 18px 20px !important;
  font-family: var(--pp-font) !important;
  color: var(--pp-text) !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card .btn {
  border-radius: 10px !important;
  font-family: var(--pp-font) !important;
  font-weight: 500 !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card-header {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .card-body {
  color: var(--pp-text) !important;
}

/* ── External login table (ChangeLogin page — Entra ID row) ── */
/* Bootstrap 3 sets border-collapse:collapse which prevents border-radius clipping.card We use a display:block trick on tbody to get the card shape, then layer individual
   cells. The outer element becomes a display:block visual wrapper. */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table {
  /* Force card appearance — display:block allows overflow+border-radius to clip */
  display: block !important;
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
  overflow: hidden !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  font-family: var(--pp-font) !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table thead,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table tbody,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table tfoot {
  display: block !important;
  width: 100% !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table tr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  border-bottom: 1px solid var(--pp-border) !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table tr:last-child {
  border-bottom: none !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table td,
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table th {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  border: none !important;
  padding: 16px 20px !important;
  font-family: var(--pp-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
  background: transparent !important;
  line-height: 1.4 !important;
}
/* Action button cell — pin right and don't stretch */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table td:last-child {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
}
/* Glyphicon in provider cell */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table .bi {
  color: var(--pp-primary) !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
}
/* Remove/action buttons inside the table */
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table .btn {
  border-radius: 10px !important;
  font-family: var(--pp-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  border: 1px solid var(--pp-border) !important;
  background: var(--pp-surface-raised) !important;
  color: var(--pp-text-muted) !important;
  transition: all 0.2s var(--pp-ease) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table .btn:hover {
  border-color: var(--pp-danger) !important;
  color: var(--pp-danger) !important;
  background: rgba(220,38,38,0.06) !important;
}
/* Dark mode */
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table {
  background: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table tr {
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table td,
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table th {
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) .table .btn {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text-muted) !important;
}

/* ── Validation summary ── */
.row:has(.atq-manage-sentinel) .validation-summary-errors ul {
  list-style: none !important;
  padding: 12px 16px !important;
  background: rgba(220,38,38,0.08) !important;
  border: 1px solid rgba(220,38,38,0.2) !important;
  border-radius: 10px !important;
  margin: 0 0 16px !important;
}
.row:has(.atq-manage-sentinel) .validation-summary-errors li {
  color: var(--pp-danger) !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  padding: 2px 0 !important;
}

/* ── Alerts ── */
.row:has(.atq-manage-sentinel) .alert-success {
  background: rgba(5,150,105,0.08) !important;
  border: 1px solid rgba(5,150,105,0.22) !important;
  color: var(--pp-success) !important;
  border-radius: 12px !important;
  font-family: var(--pp-font) !important;
}
.row:has(.atq-manage-sentinel) .alert-info {
  background: var(--pp-primary-light) !important;
  border: 1px solid rgba(79,124,255,0.2) !important;
  color: var(--pp-primary) !important;
  border-radius: 12px !important;
  font-family: var(--pp-font) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) .alert-success {
  background: rgba(16,185,129,0.09) !important;
  border-color: rgba(16,185,129,0.22) !important;
  color: var(--pp-success) !important;
}
html[data-theme="dark"] .row:has(.atq-manage-sentinel) .alert-info {
  background: var(--pp-primary-light) !important;
  border-color: rgba(138,180,255,0.2) !important;
  color: var(--pp-primary) !important;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .row:has(.atq-manage-sentinel) {
    padding: 18px !important;
    gap: 20px !important;
    flex-direction: column !important;
  }
  .row:has(.atq-manage-sentinel) > .col-lg-4,
  .row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)),
  .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .row:has(.atq-manage-sentinel) > .col-lg-4,
  .row:has(.atq-manage-sentinel) > [class*="col-"]:not(:has(.atq-manage-sentinel)) {
    position: static !important;
  }
}
@media (max-width: 767px) {
  body:has(.atq-manage-sentinel) .atq-manage-hero { padding: 20px 18px !important; }
  body:has(.atq-manage-sentinel) .atq-manage-title { font-size: 22px !important; }
  body:has(.atq-manage-sentinel) .atq-manage-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .row:has(.atq-manage-sentinel) > [class*="col-"]:has(.atq-manage-sentinel) form {
    padding: 20px 18px !important;
  }
}