/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE — 2026 Obsidian Refresh
   ═══════════════════════════════════════════════════════════════
   App-like profile experience with:
   • Glassmorphism sidebar card + hero banner
   • Progress-ring avatar border
   • Micro-interaction hover states
   • Entrance reveal animations (ppFadeSlideUp)
   • Pill-tag checkboxes
   • Fully adaptive dark mode (frosted glass outer card)

   Design tokens:  .row:has(.profile-info) (light + dark)
   Layout scope:   body:has(.profile-info) + .row:has(.profile-info)
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
/* Profile tokens defined at .row:has(.profile-info) scope — see Obsidian Refresh section below.card Manage page tokens at body:has(.atq-manage-sentinel) scope — see Manage Pages section.card Shared tokens (font, ease, radius) are set on body:has() for each page type. */

/* ── Animations ── */
@keyframes ppFadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ppSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ppPulseRing {
  0%   { box-shadow: 0 0 0 0 var(--pp-primary-glow); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ppShine {
  from { left: -100%; }
  to   { left: 200%; }
}
/* Dark mode ambient orb floats */
@keyframes ppOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(80px, 55px) scale(1.12); }
  66%       { transform: translate(-45px, 28px) scale(0.93); }
}
@keyframes ppOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-60px, 38px) scale(1.09); }
  66%       { transform: translate(38px, -28px) scale(1.15); }
}
@keyframes ppOrbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(50px, -45px) scale(1.08); }
}

/* ── Hide default page heading — we build our own ── */
body:has(.profile-info) .page-heading {
  display: none !important;
}

/* ── Hero background — blurred orb approach (no overflow artifacts) ── */
/* Applied to body so it fills edge-to-edge without any pseudo-element tricks */
body:has(.profile-info) {
  background-image:
    radial-gradient(ellipse 70% 320px at 15% -40px, rgba(79,124,255,0.45), transparent),
    radial-gradient(ellipse 55% 260px at 85% -60px, rgba(14,165,233,0.35), transparent),
    radial-gradient(ellipse 40% 180px at 50% -20px, rgba(124,58,237,0.15), transparent) !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}
html[data-theme="dark"] body:has(.profile-info),
html[data-theme="dark"] body:has(.atq-manage-sentinel) {
  background-color: #060810 !important;
  /* Dot-grid texture + deep violet accent at page bottom for form area depth */
  background-image:
    url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(138%2C180%2C255%2C0.055)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 420px at 50% 100%, rgba(124,58,237,0.12), transparent) !important;
  background-size: 28px 28px, 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
}

/* ── Hero banner behind avatar / Animated ambient orbs ── */
body:has(.profile-info) .container:has(.profile-info),
body:has(.atq-manage-sentinel) .container:has(.atq-manage-sentinel) {
  position: relative !important;
  padding-top: 0 !important;
  /* overflow:visible lets orbs render — overflow-x:clip on body contains them */
  overflow: visible !important;
}
/* Orb 1 — indigo/periwinkle, top-left, slow drift */
html[data-theme="dark"] body:has(.profile-info) .container:has(.profile-info)::before,
html[data-theme="dark"] body:has(.atq-manage-sentinel) .container:has(.atq-manage-sentinel)::before {
  content: '' !important;
  position: absolute !important;
  top: -220px !important;
  left: -280px !important;
  width: 780px !important;
  height: 780px !important;
  background: radial-gradient(circle at 38% 38%, rgba(79,124,255,0.34), rgba(79,124,255,0.10) 46%, transparent 70%) !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  animation: ppOrbFloat1 24s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Orb 2 — cyan/teal, top-right, slightly faster */
html[data-theme="dark"] body:has(.profile-info) .container:has(.profile-info)::after,
html[data-theme="dark"] body:has(.atq-manage-sentinel) .container:has(.atq-manage-sentinel)::after {
  content: '' !important;
  position: absolute !important;
  top: -160px !important;
  right: -260px !important;
  width: 680px !important;
  height: 680px !important;
  background: radial-gradient(circle at 58% 34%, rgba(34,211,238,0.26), rgba(14,165,233,0.07) 46%, transparent 70%) !important;
  border-radius: 50% !important;
  filter: blur(68px) !important;
  animation: ppOrbFloat2 30s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ── Profile layout — flex row ── */
.row:has(.profile-info) {
  max-width: 1040px !important;
  margin: 0 auto 48px !important;
  padding: 0 20px !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;
}

/* ── Sidebar column ── */
.row:has(.profile-info) > .col-lg-4,
.row:has(.profile-info) > .col-md-4 {
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
  float: none !important;
  padding: 0 !important;
  position: sticky !important;
  top: 24px !important;
  will-change: transform, opacity !important;
  overflow: visible !important; /* Ensure avatar ring can render above card if needed */
}

/* ── Main content column ── */
.row:has(.profile-info) > .col-lg-8,
.row:has(.profile-info) > .col-md-8 {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  width: auto !important;
  will-change: transform, opacity !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — AVATAR CARD (Glassmorphism)
   ══════════════════════════════════════════════════════════════ */
.card.profile-info,
.well.profile-info {
  display: flex !important; /* flex-column centers avatar + name reliably */
  flex-direction: column !important;
  align-items: center !important;
  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;
  /* padding-top: 16px keeps the avatar ring fully inside the card (no overflow dep) */
  padding: 16px 24px 28px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  margin-top: 100px !important;
  position: relative !important;
  overflow: visible !important;
  transition: transform 0.3s var(--pp-ease), box-shadow 0.3s var(--pp-ease) !important;
}
.card.profile-info:hover,
.well.profile-info:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--pp-shadow-lg), 0 0 32px var(--pp-primary-glow) !important;
}

/* Avatar with gradient ring — sits inside card top (no negative margin / no overflow dep) */
.card.profile-info img,
.well.profile-info 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; /* No longer needs to overflow above card */
  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;
}
.card.profile-info:hover img,
.well.profile-info:hover img {
  transform: scale(1.05) !important;
  animation: ppPulseRing 1.5s ease-out !important;
}

/* User name — descendant OR sibling of avatar card */
.card.profile-info .userFullName,
.well.profile-info .userFullName,
.card.profile-info ~ .userFullName,
.well.profile-info ~ .userFullName,
.row:has(.profile-info) > [class*="col-"] > .userFullName,
.row:has(.profile-info) > [class*="col-"] .userFullName {
  font-family: var(--pp-font) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  margin: 4px 0 6px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
/* Add a subtle role badge below the name via CSS */
.card.profile-info .userFullName::after,
.well.profile-info .userFullName::after {
  content: '' !important;
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — NAV LINKS
   ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info) .weblinks.list-group {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--pp-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  padding: 6px !important;
}
.row:has(.profile-info) .weblink.list-group-item {
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pp-text) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin: 2px 0 !important;
  transition: all 0.2s var(--pp-ease) !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Shine sweep on hover */
.row:has(.profile-info) .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(124,58,237,0.06), transparent) !important;
  transition: none !important;
  pointer-events: none !important;
}
.row:has(.profile-info) .weblink.list-group-item:hover::before {
  animation: ppShine 0.6s var(--pp-ease) !important;
}
.row:has(.profile-info) .weblink.list-group-item:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateX(4px) !important;
}
/* Active link — gradient pill */
.row:has(.profile-info) .weblink.list-group-item.active,
.row:has(.profile-info) .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;
}
.row:has(.profile-info) .weblink.list-group-item.active:hover,
.row:has(.profile-info) .weblink.list-group-item[aria-current="page"]:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
}
.row:has(.profile-info) .weblink.list-group-item .bi,
.row:has(.profile-info) .weblink.list-group-item .fa {
  margin-right: 10px !important;
  font-size: 15px !important;
  opacity: 0.7 !important;
}

/* ══════════════════════════════════════════════════════════════
   CONTENT AREA — HERO
   ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info) > .col-lg-8 .page-copy,
.row:has(.profile-info) > .col-md-8 .page-copy,
.row:has(.profile-info) > .col-lg-8 > .xrm-editable-html,
.row:has(.profile-info) > .col-md-8 > .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;
}
.row:has(.profile-info) .atq-profile-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: 24px !important;
  padding: 28px 32px !important;
  box-shadow: var(--pp-shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}
.row:has(.profile-info) .atq-profile-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(800px 280px at 0% 0%, rgba(124,58,237,0.12), transparent 60%),
              radial-gradient(800px 280px at 100% 0%, rgba(6,182,212,0.10), transparent 60%) !important;
  pointer-events: none !important;
}
.row:has(.profile-info) .atq-profile-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  gap: 20px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}
.row:has(.profile-info) .atq-profile-kicker {
  font-family: var(--pp-font) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--pp-text-soft) !important;
  margin: 0 0 10px !important;
}
.row:has(.profile-info) .atq-profile-title {
  font-family: var(--pp-font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.4px !important;
}
.row:has(.profile-info) .atq-profile-lead {
  font-family: var(--pp-font) !important;
  font-size: 15px !important;
  color: var(--pp-text-muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 16px !important;
}
.row:has(.profile-info) .atq-profile-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.row:has(.profile-info) .atq-profile-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 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-size: 12.5px !important;
}
.row:has(.profile-info) .atq-profile-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.row:has(.profile-info) .atq-profile-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 14px !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-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.2s var(--pp-ease), border-color 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease) !important;
}
.row:has(.profile-info) .atq-profile-action:hover {
  transform: translateY(-2px) !important;
  border-color: var(--pp-primary) !important;
  box-shadow: var(--pp-shadow) !important;
}
.row:has(.profile-info) .atq-profile-action:first-child {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px var(--pp-primary-glow) !important;
}
.row:has(.profile-info) .atq-profile-status {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.row:has(.profile-info) .atq-profile-status-item {
  border: 1px solid var(--pp-border) !important;
  background: var(--pp-surface) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.row:has(.profile-info) .atq-profile-status-label {
  display: block !important;
  font-size: 11px !important;
  color: var(--pp-text-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 6px !important;
}
.row:has(.profile-info) .atq-profile-status-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
}
.row:has(.profile-info) .atq-profile-hero--public .atq-profile-actions {
  display: none !important;
}
@media (max-width: 991px) {
  .row:has(.profile-info) .atq-profile-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .row:has(.profile-info) .atq-profile-status {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CONTENT AREA — FORM CARD
   ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info) > .col-lg-8 .tab.clearfix,
.row:has(.profile-info) > .col-md-8 .tab.clearfix {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}
.row:has(.profile-info) > .col-lg-8 .tab.clearfix::before,
.row:has(.profile-info) > .col-md-8 .tab.clearfix::before {
  content: none !important;
}
.row:has(.profile-info) > .col-lg-8 .tab.clearfix::after,
.row:has(.profile-info) > .col-md-8 .tab.clearfix::after {
  content: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: none !important;
}
/* Remove any remaining frame on the basic form container */
.row:has(.profile-info) #ProfileFormView,
.row:has(.profile-info) .crmEntityFormView {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.row:has(.profile-info) #ProfileFormView::before,
.row:has(.profile-info) #ProfileFormView::after,
.row:has(.profile-info) .crmEntityFormView::before,
.row:has(.profile-info) .crmEntityFormView::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  display: none !important;
}

/* ── Unified Form Card — outer fieldset (top) ── */
.row:has(.profile-info) > .col-lg-8 > fieldset,
.row:has(.profile-info) > .col-md-8 > fieldset {
  background: var(--pp-surface) !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: var(--pp-radius) var(--pp-radius) 0 0 !important;
  box-shadow: var(--pp-shadow-lg) !important;
  padding: 24px 36px 16px !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 !important;
}
/* Make the legend render INSIDE the fieldset card — not on the border */
.row:has(.profile-info) > .col-lg-8 > fieldset > legend,
.row:has(.profile-info) > .col-md-8 > fieldset > legend {
  float: left !important;
  width: 100% !important;
}
/* Clear the float so content flows normally after legend */
.row:has(.profile-info) > .col-lg-8 > fieldset > legend + *,
.row:has(.profile-info) > .col-md-8 > fieldset > legend + * {
  clear: both !important;
}
/* Reset h2/h3 inside legend sections */
.row:has(.profile-info) fieldset legend h2,
.row:has(.profile-info) fieldset legend h3 {
  font-size: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
  line-height: inherit !important;
  color: inherit !important;
}
/* ── Unified Form Card — Marketing Options (middle) ── */
/* Use #mainContent to beat the nuclear dark-mode div{transparent} rule */
#mainContent .row:has(.profile-info) > .col-lg-8 > div[id*="MarketingOptions"],
#mainContent .row:has(.profile-info) > .col-md-8 > div[id*="MarketingOptions"],
.row:has(.profile-info) > .col-lg-8 > div[id*="MarketingOptions"],
.row:has(.profile-info) > .col-md-8 > div[id*="MarketingOptions"],
.row:has(.profile-info) > .col-lg-8 > fieldset + div,
.row:has(.profile-info) > .col-md-8 > fieldset + div {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-left: 1px solid var(--pp-border) !important;
  border-right: 1px solid var(--pp-border) !important;
  border-top: 1px solid var(--pp-border) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 8px 36px 24px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
/* ── Unified Form Card — Actions (bottom) ── */
#mainContent .row:has(.profile-info) > .col-lg-8 > div:has(> .actions),
#mainContent .row:has(.profile-info) > .col-md-8 > div:has(> .actions),
.row:has(.profile-info) > .col-lg-8 > div:has(> .actions),
.row:has(.profile-info) > .col-md-8 > div:has(> .actions),
.row:has(.profile-info) > .col-lg-8 > fieldset + div + div:has(input[value="Update"]),
.row:has(.profile-info) > .col-md-8 > fieldset + div + div:has(input[value="Update"]) {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 0 0 var(--pp-radius) var(--pp-radius) !important;
  padding: 24px 36px 32px !important;
  margin: 0 !important;
  box-shadow: var(--pp-shadow-lg) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── Section headings — with left accent bar ── */
.row:has(.profile-info) fieldset legend,
.row:has(.profile-info) fieldset[aria-label] > legend,
.row:has(.profile-info) .section-title {
  font-family: var(--pp-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  letter-spacing: -0.2px !important;
  border-bottom: none !important;
  padding: 0 0 16px 16px !important;
  margin: 8px 0 24px !important;
  width: 100% !important;
  position: relative !important;
}
.row:has(.profile-info) fieldset legend::before,
.row:has(.profile-info) fieldset[aria-label] > legend::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 4px !important;
  height: 20px !important;
  background: var(--pp-gradient) !important;
  border-radius: 4px !important;
}

/* ── Form field labels ── */
.row:has(.profile-info) .field-label {
  font-family: var(--pp-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pp-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
  transition: color 0.2s var(--pp-ease) !important;
}
/* Label turns primary when input is focused */
.row:has(.profile-info) td.cell:focus-within .field-label {
  color: var(--pp-primary) !important;
}

/* ── Form controls — modern flat with bottom-accent ── */
.row:has(.profile-info) .form-control,
.row:has(.profile-info) input.text,
.row:has(.profile-info) input[type="text"],
.row:has(.profile-info) input[type="email"],
.row:has(.profile-info) input[type="tel"],
.row:has(.profile-info) input[type="url"],
.row:has(.profile-info) input[type="password"],
.row:has(.profile-info) select,
.row:has(.profile-info) textarea {
  font-family: var(--pp-font) !important;
  font-size: 14.5px !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface-raised) !important;
  border: 1.5px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-sm) !important;
  padding: 12px 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s var(--pp-ease), box-shadow 0.2s var(--pp-ease), background 0.2s var(--pp-ease) !important;
  box-shadow: none !important;
  position: relative !important;
}
.row:has(.profile-info) .form-control:hover:not(:focus),
.row:has(.profile-info) input.text:hover:not(:focus),
.row:has(.profile-info) input[type="text"]:hover:not(:focus),
.row:has(.profile-info) input[type="email"]:hover:not(:focus),
.row:has(.profile-info) input[type="tel"]:hover:not(:focus),
.row:has(.profile-info) input[type="url"]:hover:not(:focus),
.row:has(.profile-info) input[type="password"]:hover:not(:focus),
.row:has(.profile-info) select:hover:not(:focus),
.row:has(.profile-info) textarea:hover:not(:focus) {
  border-color: var(--pp-primary) !important;
  background: var(--pp-surface-raised) !important;
  box-shadow: 0 0 0 3px var(--pp-primary-light) !important;
}
.row:has(.profile-info) .form-control:focus,
.row:has(.profile-info) input:focus,
.row:has(.profile-info) select:focus,
.row:has(.profile-info) textarea:focus {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 4px var(--pp-primary-light), var(--pp-shadow) !important;
  outline: none !important;
  background: var(--pp-surface) !important;
}

.row:has(.profile-info) textarea {
  min-height: 110px !important;
  resize: vertical !important;
}
.row:has(.profile-info) select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-color: var(--pp-surface-raised) !important;
  padding-right: 38px !important;
}

/* ── Two-column field table ── */
.row:has(.profile-info) table.section {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.row:has(.profile-info) table.section td.cell {
  padding: 0 12px 24px 0 !important;
  vertical-align: top !important;
  border: none !important;
  background: transparent !important;
}
/* Right-column gap — separates adjacent field pairs (First/Last Name, etc.) */
.row:has(.profile-info) table.section td.cell + td.cell {
  padding-left: 18px !important;
}
.row:has(.profile-info) td.form-control-cell,
.row:has(.profile-info) td.form-control-cell * {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.row:has(.profile-info) td.cell.text.form-control-cell,
.row:has(.profile-info) td.cell.text.form-control-cell .info,
.row:has(.profile-info) td.cell.text.form-control-cell .validators {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Hide Public Profile Copy + Preferred Language fields (profile form) */
.row:has(.profile-info) tr:has(label[for="publicprofilecopy"]),
.row:has(.profile-info) tr:has(label[for="preferredlanguageid"]),
.row:has(.profile-info) td.form-control-cell:has(label[for="publicprofilecopy"]),
.row:has(.profile-info) td.form-control-cell:has(label[for="preferredlanguageid"]),
.row:has(.profile-info) #publicprofilecopy,
.row:has(.profile-info) #preferredlanguageid {
  display: none !important;
}
.row:has(.profile-info) td.form-control-cell::before,
.row:has(.profile-info) td.form-control-cell::after {
  content: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: none !important;
}
.row:has(.profile-info) .section,
.row:has(.profile-info) .section table,
.row:has(.profile-info) .section tbody,
.row:has(.profile-info) .section tr,
.row:has(.profile-info) .section td {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.row:has(.profile-info) table.section td.cell.zero-cell {
  display: none !important;
}

/* ── Lookup input-group ── */
.row:has(.profile-info) .input-group {
  border-radius: var(--pp-radius-sm) !important;
}
.row:has(.profile-info) .input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.row:has(.profile-info) .input-group-btn .btn {
  border: 1.5px solid var(--pp-border) !important;
  border-left: none !important;
  background: var(--pp-surface-raised) !important;
  color: var(--pp-text-muted) !important;
  padding: 12px 14px !important;
  height: auto !important;
  border-top-right-radius: var(--pp-radius-sm) !important;
  border-bottom-right-radius: var(--pp-radius-sm) !important;
  transition: all 0.2s var(--pp-ease) !important;
}
.row:has(.profile-info) .input-group-btn .btn:hover {
  background: var(--pp-primary-light) !important;
  color: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   CHECKBOXES — Modern pill tags
   ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info) .form-check {
  display: inline-block !important;
  margin: 4px 6px 4px 0 !important;
}
.row:has(.profile-info) .form-check label {
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface-raised) !important;
  border: 1.5px solid var(--pp-border) !important;
  border-radius: 50px !important;
  padding: 8px 20px 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--pp-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
.row:has(.profile-info) .form-check label:hover {
  border-color: var(--pp-primary) !important;
  background: var(--pp-primary-light) !important;
}
.row:has(.profile-info) .form-check input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  position: relative !important;  /* override Bootstrap 3 position: absolute */
  margin: 0 !important;
  vertical-align: middle !important;
  accent-color: var(--pp-primary) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
.row:has(.profile-info) .form-check:has(input:checked) label {
  background: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — Gradient primary, ghost secondary
   ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info) .btn-primary,
.row:has(.profile-info) input[type="submit"],
.row:has(.profile-info) input[type="button"],
.row:has(.profile-info) button[type="submit"] {
  font-family: var(--pp-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  background: var(--pp-gradient) !important;
  background-size: 200% auto !important;
  border: none !important;
  color: #ffffff !important;
  padding: 12px 32px !important;
  border-radius: var(--pp-radius-sm) !important;
  cursor: pointer !important;
  transition: all 0.3s var(--pp-ease) !important;
  box-shadow: 0 2px 12px var(--pp-primary-glow) !important;
  position: relative !important;
  overflow: hidden !important;
  letter-spacing: 0.01em !important;
}
/* Shine sweep on button */
.row:has(.profile-info) .btn-primary::after,
.row:has(.profile-info) input[type="submit"]::after,
.row:has(.profile-info) input[type="button"]::after,
.row:has(.profile-info) button[type="submit"]::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  pointer-events: none !important;
}
.row:has(.profile-info) .btn-primary:hover::after,
.row:has(.profile-info) input[type="submit"]:hover::after,
.row:has(.profile-info) input[type="button"]:hover::after,
.row:has(.profile-info) button[type="submit"]:hover::after {
  animation: ppShine 0.5s var(--pp-ease) !important;
}
.row:has(.profile-info) .btn-primary:hover,
.row:has(.profile-info) input[type="submit"]:hover,
.row:has(.profile-info) input[type="button"]:hover,
.row:has(.profile-info) button[type="submit"]:hover {
  background-position: right center !important;
  box-shadow: 0 4px 20px var(--pp-primary-glow) !important;
  transform: translateY(-2px) !important;
}
.row:has(.profile-info) .btn-primary:active,
.row:has(.profile-info) input[type="submit"]:active,
.row:has(.profile-info) input[type="button"]:active {
  transform: translateY(0) scale(0.98) !important;
}

.row:has(.profile-info) .btn-secondary {
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1.5px solid var(--pp-border) !important;
  color: var(--pp-text) !important;
  padding: 10px 24px !important;
  border-radius: var(--pp-radius-sm) !important;
  transition: all 0.2s var(--pp-ease) !important;
}
.row:has(.profile-info) .btn-secondary:hover {
  border-color: var(--pp-primary) !important;
  color: var(--pp-primary) !important;
  background: var(--pp-primary-light) !important;
}

.row:has(.profile-info) .btn-danger {
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1.5px solid rgba(239,68,68,0.3) !important;
  color: var(--pp-danger) !important;
  padding: 10px 24px !important;
  border-radius: var(--pp-radius-sm) !important;
  transition: all 0.2s var(--pp-ease) !important;
}
.row:has(.profile-info) .btn-danger:hover {
  background: var(--pp-danger) !important;
  border-color: var(--pp-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(239,68,68,0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   PANELS (Security section, Change Password, etc.)
   ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info) .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;
}
.row:has(.profile-info) .card:hover {
  box-shadow: var(--pp-shadow-lg) !important;
  transform: translateY(-1px) !important;
}
.row:has(.profile-info) .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;
}
.row:has(.profile-info) .card-header h3,
.row:has(.profile-info) .card-title {
  font-family: var(--pp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
  margin: 0 !important;
}
.row:has(.profile-info) .card-body {
  padding: 20px !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  color: var(--pp-text) !important;
  line-height: 1.6 !important;
}

/* ── Alerts ── */
.row:has(.profile-info) .alert {
  border-radius: var(--pp-radius-sm) !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  padding: 14px 18px !important;
  border-left-width: 4px !important;
}
.row:has(.profile-info) .alert-info {
  background: rgba(59,130,246,0.05) !important;
  border-color: rgba(59,130,246,0.15) !important;
  border-left-color: #3b82f6 !important;
  color: #2563eb !important;
}
.row:has(.profile-info) .alert-success {
  background: rgba(16,185,129,0.05) !important;
  border-color: rgba(16,185,129,0.15) !important;
  border-left-color: var(--pp-success) !important;
  color: var(--pp-success) !important;
}
.row:has(.profile-info) .alert-danger {
  background: rgba(239,68,68,0.05) !important;
  border-color: rgba(239,68,68,0.15) !important;
  border-left-color: var(--pp-danger) !important;
  color: var(--pp-danger) !important;
}

/* ── Help text & validation ── */
.row:has(.profile-info) .help-block,
.row:has(.profile-info) .text-muted,
.row:has(.profile-info) .field-description {
  font-family: var(--pp-font) !important;
  font-size: 12px !important;
  color: var(--pp-text-soft) !important;
  margin-top: 6px !important;
}
.row:has(.profile-info) .field-validation-error {
  font-size: 12px !important;
  color: var(--pp-danger) !important;
  font-weight: 500 !important;
}
.row:has(.profile-info) .has-error .form-control {
  border-color: var(--pp-danger) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.08) !important;
}
.row:has(.profile-info) .validation-summary {
  border-radius: var(--pp-radius-sm) !important;
}

/* ── Required field indicator ── */
.row:has(.profile-info) .info.required .field-label::after {
  content: ' *' !important;
  color: var(--pp-danger) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .row:has(.profile-info) {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 16px !important;
  }
  .row:has(.profile-info) > .col-lg-4,
  .row:has(.profile-info) > .col-md-4 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }
  .row:has(.profile-info) > .col-lg-8,
  .row:has(.profile-info) > .col-md-8 {
    width: 100% !important;
  }
  .row:has(.profile-info) > .col-lg-8 > .xrm-editable-html,
  .row:has(.profile-info) > .col-md-8 > .xrm-editable-html {
    margin-top: 80px !important;
  }
  .row:has(.profile-info) > .col-lg-8 > fieldset,
  .row:has(.profile-info) > .col-md-8 > fieldset {
    padding: 24px 20px 12px !important;
    border-radius: var(--pp-radius-sm) var(--pp-radius-sm) 0 0 !important;
  }
  .row:has(.profile-info) > .col-lg-8 > div[id*="MarketingOptions"],
  .row:has(.profile-info) > .col-md-8 > div[id*="MarketingOptions"] {
    padding: 8px 20px 16px !important;
  }
  .row:has(.profile-info) > .col-lg-8 > div:has(> .actions),
  .row:has(.profile-info) > .col-md-8 > div:has(> .actions) {
    padding: 16px 20px 24px !important;
    border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm) !important;
  }
  .card.profile-info,
  .well.profile-info {
    margin-top: 80px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — PROFILE OVERRIDES
   ══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .card.profile-info,
html[data-theme="dark"] .well.profile-info {
  background: var(--pp-surface-glass) !important;
  background-color: var(--pp-surface-glass) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] .card.profile-info img,
html[data-theme="dark"] .well.profile-info img {
  box-shadow: 0 0 0 3px var(--pp-primary), 0 0 0 6px var(--pp-surface), var(--pp-shadow-lg) !important;
}
html[data-theme="dark"] .card.profile-info .userFullName,
html[data-theme="dark"] .well.profile-info .userFullName,
html[data-theme="dark"] .card.profile-info ~ .userFullName,
html[data-theme="dark"] .well.profile-info ~ .userFullName,
html[data-theme="dark"] .row:has(.profile-info) > [class*="col-"] > .userFullName,
html[data-theme="dark"] .row:has(.profile-info) > [class*="col-"] .userFullName {
  color: var(--pp-text) !important;
}

html[data-theme="dark"] .row:has(.profile-info) .weblinks.list-group {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .weblink.list-group-item {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .weblink.list-group-item:hover {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .row:has(.profile-info) .weblink.list-group-item.active,
html[data-theme="dark"] .row:has(.profile-info) .weblink.list-group-item[aria-current="page"] {
  background: var(--pp-gradient) !important;
  background-color: var(--pp-primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .row:has(.profile-info) > .col-lg-8 .page-copy,
html[data-theme="dark"] .row:has(.profile-info) > .col-md-8 .page-copy,
html[data-theme="dark"] .row:has(.profile-info) > .col-lg-8 > .xrm-editable-html,
html[data-theme="dark"] .row:has(.profile-info) > .col-md-8 > .xrm-editable-html {
  background: var(--pp-gradient-soft) !important;
  border-color: var(--pp-border) !important;
}

html[data-theme="dark"] .row:has(.profile-info) .tab.clearfix {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .row:has(.profile-info) > .col-lg-8 > fieldset,
html[data-theme="dark"] .row:has(.profile-info) > .col-md-8 > fieldset {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border: none !important;
}
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-lg-8 > div[id*="MarketingOptions"],
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-md-8 > div[id*="MarketingOptions"],
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-lg-8 > fieldset + div,
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-md-8 > fieldset + div {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-lg-8 > div:has(> .actions),
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-md-8 > div:has(> .actions),
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-lg-8 > fieldset + div + div:has(input[value="Update"]),
html[data-theme="dark"] #mainContent .row:has(.profile-info) > .col-md-8 > fieldset + div + div:has(input[value="Update"]) {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}

html[data-theme="dark"] .row:has(.profile-info) .card,
html[data-theme="dark"] .row:has(.profile-info) .card{
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .card-header {
  background: var(--pp-gradient-soft) !important;
  background-color: var(--pp-surface-raised) !important;
  border-bottom-color: var(--pp-border) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .card-body {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .row:has(.profile-info) .form-control,
html[data-theme="dark"] .row:has(.profile-info) input.text,
html[data-theme="dark"] .row:has(.profile-info) input[type="text"],
html[data-theme="dark"] .row:has(.profile-info) input[type="email"],
html[data-theme="dark"] .row:has(.profile-info) input[type="password"],
html[data-theme="dark"] .row:has(.profile-info) select,
html[data-theme="dark"] .row:has(.profile-info) textarea {
  background: var(--pp-surface-raised) !important;
  background-color: var(--pp-surface-raised) !important;
  border-color: var(--pp-border-hover) !important;
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .form-control:focus {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 4px var(--pp-primary-light), var(--pp-shadow) !important;
  background: var(--pp-surface) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .form-control:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) input.text:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) input[type="text"]:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) input[type="email"]:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) input[type="tel"]:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) input[type="url"]:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) input[type="password"]:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) select:hover:not(:focus),
html[data-theme="dark"] .row:has(.profile-info) textarea:hover:not(:focus) {
  border-color: var(--pp-primary) !important;
  background: var(--pp-surface-raised) !important;
  box-shadow: 0 0 0 3px var(--pp-primary-light) !important;
}

html[data-theme="dark"] .row:has(.profile-info) .field-label {
  color: var(--pp-text-muted) !important;
}
html[data-theme="dark"] .row:has(.profile-info) td.cell:focus-within .field-label {
  color: var(--pp-primary) !important;
}
html[data-theme="dark"] .row:has(.profile-info) fieldset legend {
  color: var(--pp-text) !important;
}

html[data-theme="dark"] .row:has(.profile-info) .btn-secondary {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--pp-border-hover) !important;
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .btn-secondary:hover {
  background: var(--pp-primary-light) !important;
  background-color: var(--pp-primary-light) !important;
  border-color: var(--pp-primary) !important;
  color: var(--pp-primary) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .btn-primary,
html[data-theme="dark"] .row:has(.profile-info) input[type="button"] {
  background: var(--pp-gradient) !important;
  background-color: var(--pp-primary) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .row:has(.profile-info) .btn-primary:hover,
html[data-theme="dark"] .row:has(.profile-info) input[type="button"]:hover {
  background: var(--pp-gradient) !important;
  background-color: var(--pp-primary-hover) !important;
}

html[data-theme="dark"] .row:has(.profile-info) .btn-danger {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(248,113,113,0.3) !important;
  color: var(--pp-danger) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .btn-danger:hover {
  background: var(--pp-danger) !important;
  background-color: var(--pp-danger) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .row:has(.profile-info) .input-group-btn .btn {
  background: var(--pp-surface-raised) !important;
  background-color: var(--pp-surface-raised) !important;
  border-color: var(--pp-border-hover) !important;
  color: var(--pp-text-muted) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .input-group-btn .btn:hover {
  background: var(--pp-primary-light) !important;
  color: var(--pp-primary) !important;
}

html[data-theme="dark"] .row:has(.profile-info) select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

html[data-theme="dark"] .row:has(.profile-info) .form-check label {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border-hover) !important;
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .form-check label:hover {
  border-color: var(--pp-primary) !important;
  background: var(--pp-primary-light) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .form-check:has(input:checked) label {
  background: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .row:has(.profile-info) .alert-info {
  background: rgba(96,165,250,0.06) !important;
  border-color: rgba(96,165,250,0.15) !important;
  border-left-color: #60a5fa !important;
  color: #60a5fa !important;
}
html[data-theme="dark"] .row:has(.profile-info) .alert-success {
  background: rgba(16,185,129,0.06) !important;
  border-color: rgba(16,185,129,0.15) !important;
  border-left-color: #10b981 !important;
  color: #10b981 !important;
}
html[data-theme="dark"] .row:has(.profile-info) .alert-danger {
  background: rgba(248,113,113,0.06) !important;
  border-color: rgba(248,113,113,0.15) !important;
  border-left-color: #f87171 !important;
  color: #f87171 !important;
}

html[data-theme="dark"] .row:has(.profile-info) .card-title,
html[data-theme="dark"] .row:has(.profile-info) .card-header h3 {
  color: var(--pp-text) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .help-block,
html[data-theme="dark"] .row:has(.profile-info) .text-muted {
  color: var(--pp-text-soft) !important;
}

html[data-theme="dark"] .row:has(.profile-info) > .col-lg-8 .page-copy strong,
html[data-theme="dark"] .row:has(.profile-info) > .col-md-8 .page-copy strong,
html[data-theme="dark"] .row:has(.profile-info) > .col-lg-8 > .xrm-editable-html strong,
html[data-theme="dark"] .row:has(.profile-info) > .col-md-8 > .xrm-editable-html strong {
  color: var(--pp-primary) !important;
}

html[data-theme="dark"] .card.profile-info .userFullName::after,
html[data-theme="dark"] .well.profile-info .userFullName::after {
  color: var(--pp-accent) !important;
  background: var(--pp-accent-light) !important;
}

/* ══════════════════════════════════════════════════════════════
   PROFILE PAGE — Design Tokens (Obsidian Refresh palette)
   Scoped to .row:has(.profile-info) so tokens cascade to all
   profile + manage page components without leaking to other portal pages.card Manage pages use body:has(.atq-manage-sentinel) — tokens cascade to both.card ══════════════════════════════════════════════════════════════ */
.row:has(.profile-info),
body:has(.atq-manage-sentinel) {
  --pp-primary: #4f7cff;
  --pp-primary-hover: #3b66f5;
  --pp-primary-light: rgba(79,124,255,0.12);
  --pp-primary-glow: rgba(79,124,255,0.35);
  --pp-accent: #0ea5e9;
  --pp-accent-light: rgba(14,165,233,0.12);
  --pp-text: #0f172a;
  --pp-text-muted: #5b6474;
  --pp-text-soft: #8b96a8;
  --pp-border: #e2e6ef;
  --pp-border-hover: #cfd6e6;
  --pp-bg: #f6f7fb;
  --pp-surface: #ffffff;
  --pp-surface-raised: #f1f4f9;
  --pp-surface-glass: rgba(255,255,255,0.9);
  --pp-shadow: 0 12px 30px rgba(15,23,42,0.08);
  --pp-shadow-lg: 0 24px 60px rgba(15,23,42,0.12);
  --pp-shadow-glow: 0 0 24px rgba(79,124,255,0.2);
  --pp-gradient: linear-gradient(135deg, #4f7cff 0%, #0ea5e9 100%);
  --pp-gradient-soft: linear-gradient(135deg, rgba(79,124,255,0.08) 0%, rgba(14,165,233,0.08) 100%);
  --pp-radius:         20px;
  --pp-radius-sm:      12px;
  --pp-radius-xs:      8px;
  --pp-font:           'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pp-ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --pp-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --pp-success:        #059669;
  --pp-danger:         #dc2626;
}
html[data-theme="dark"] .row:has(.profile-info),
html[data-theme="dark"] body:has(.atq-manage-sentinel) {
  --pp-primary: #8ab4ff;
  --pp-primary-hover: #6c9dff;
  --pp-primary-light: rgba(138,180,255,0.18);
  --pp-primary-glow: rgba(138,180,255,0.28);
  --pp-accent: #22d3ee;
  --pp-accent-light: rgba(34,211,238,0.14);
  --pp-text: #e7edf7;
  --pp-text-muted: #9aa6b8;
  --pp-text-soft: #7f8aa0;
  --pp-border: #223046;
  --pp-border-hover: #2f3f5c;
  --pp-bg: #0b0f16;
  --pp-surface: #141a24;
  --pp-surface-raised: #101722;
  --pp-surface-glass: rgba(20,26,36,0.94);
  --pp-shadow: 0 18px 44px rgba(0,0,0,0.5);
  --pp-shadow-lg: 0 28px 70px rgba(0,0,0,0.55);
  --pp-shadow-glow: 0 0 28px rgba(138,180,255,0.18);
  --pp-gradient: linear-gradient(135deg, #8ab4ff 0%, #22d3ee 100%);
  --pp-gradient-soft: linear-gradient(135deg, rgba(138,180,255,0.12) 0%, rgba(34,211,238,0.12) 100%);
  --pp-success:        #10b981;
  --pp-danger:         #f87171;
}

/* Layout base */
.row:has(.profile-info) {
  background: var(--pp-bg) !important;
  border-radius: 28px !important;
  padding: 28px !important;
  box-shadow: var(--pp-shadow-lg) !important;
}
html[data-theme="dark"] .row:has(.profile-info) {
  /* Frosted glass — lets the animated orbs behind it bleed through as a 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;
  position: relative !important;
  z-index: 1 !important;
}

/* Sidebar card */
.row:has(.profile-info) .card.profile-info,
.row:has(.profile-info) .well.profile-info {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--pp-shadow) !important;
  padding: 16px !important;
  margin-top: 100px !important;
}
.row:has(.profile-info) .card.profile-info img,
.row:has(.profile-info) .well.profile-info img {
  width: 88px !important;
  height: 88px !important;
  margin-top: 0 !important;
  box-shadow: 0 0 0 3px var(--pp-primary), 0 0 0 7px var(--pp-surface) !important;
}
.row:has(.profile-info) .card.profile-info .userFullName,
.row:has(.profile-info) .well.profile-info .userFullName,
.row:has(.profile-info) > [class*="col-"] > .userFullName {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  font-size: 18px !important;
}

/* Hero */
.row:has(.profile-info) .atq-profile-hero {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--pp-shadow-lg) !important;
}
.row:has(.profile-info) .atq-profile-hero::before {
  background: linear-gradient(90deg, rgba(79,124,255,0.35), rgba(14,165,233,0.18)) !important;
}
html[data-theme="dark"] .row:has(.profile-info) .atq-profile-hero::before {
  background: linear-gradient(90deg, rgba(138,180,255,0.28), rgba(34,211,238,0.2)) !important;
}
.row:has(.profile-info) .atq-profile-title {
  color: var(--pp-text) !important;
}
.row:has(.profile-info) .atq-profile-lead {
  color: var(--pp-text-muted) !important;
}
.row:has(.profile-info) .atq-profile-meta-item {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text-muted) !important;
}

/* Hero actions */
.row:has(.profile-info) .atq-profile-action {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text) !important;
}
.row:has(.profile-info) .atq-profile-action:first-child {
  background: var(--pp-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .row:has(.profile-info) .atq-profile-action:first-child {
  color: #ffffff !important;
}

/* Status cards */
.row:has(.profile-info) .atq-profile-status-item {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  box-shadow: none !important;
}

/* Form card */
.row:has(.profile-info) > .col-lg-8 > fieldset,
.row:has(.profile-info) > .col-md-8 > fieldset {
  background: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: var(--pp-shadow) !important;
}
.row:has(.profile-info) > .col-lg-8 > fieldset + div,
.row:has(.profile-info) > .col-md-8 > fieldset + div,
.row:has(.profile-info) > .col-lg-8 > div[id*="MarketingOptions"],
.row:has(.profile-info) > .col-md-8 > div[id*="MarketingOptions"] {
  background: var(--pp-surface) !important;
  border-left-color: var(--pp-border) !important;
  border-right-color: var(--pp-border) !important;
}
.row:has(.profile-info) > .col-lg-8 > div:has(> .actions),
.row:has(.profile-info) > .col-md-8 > div:has(> .actions) {
  background: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
  border-radius: 0 0 20px 20px !important;
}

/* Inputs */
.row:has(.profile-info) .form-control,
.row:has(.profile-info) input.text,
.row:has(.profile-info) input[type="text"],
.row:has(.profile-info) input[type="email"],
.row:has(.profile-info) input[type="tel"],
.row:has(.profile-info) input[type="url"],
.row:has(.profile-info) input[type="password"],
.row:has(.profile-info) select,
.row:has(.profile-info) textarea {
  background: var(--pp-surface-raised) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text) !important;
}
.row:has(.profile-info) .field-label {
  color: var(--pp-text-soft) !important;
}

/* Checkbox pills */
.row:has(.profile-info) .form-check label {
  padding: 8px 14px 8px 12px !important;
  gap: 6px !important;
  line-height: 1.2 !important;
}
.row:has(.profile-info) .form-check input[type="checkbox"] {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Remove table outline around profile fields */
.row:has(.profile-info) table.section,
.row:has(.profile-info) table.section * {
  border: none !important;
  box-shadow: none !important;
}
.row:has(.profile-info) .section,
.row:has(.profile-info) .section table,
.row:has(.profile-info) .section tr,
.row:has(.profile-info) .section td,
.row:has(.profile-info) .section .cell {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 991px) {
  .row:has(.profile-info) {
    padding: 18px !important;
  }
  .row:has(.profile-info) > .col-lg-4,
  .row:has(.profile-info) > .col-md-4,
  .row:has(.profile-info) > .col-lg-8,
  .row:has(.profile-info) > .col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
  }
}