/* ═══════════════════════════════════════════════════════════════
   atQor ITSM Portal — Custom Stylesheet
   ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ─────────────────
   §1  Legacy / Global .............. line ~10   (dropdowns, content_form)
   §2  Modal / Dialog System ........ line ~40   (ccModalIn animation)
   §3  Dark Mode — Global ........... line ~230  (nuclear strategy + re-apply)
   §4  Profile Page — Animations .... line ~580  (keyframes)
   §5  Profile Page — Layout ........ line ~620  (body bg, row, sidebar, hero)
   §6  Profile Page — Form Card ..... line ~1000 (fieldset, controls, buttons)
   §7  Profile Page — Dark Mode ..... line ~1545 (overrides for nuclear DM)
   §8  Profile Page — Tokens ........ line ~1775 (Obsidian Refresh palette)
   §9  Profile Page — Refinements ... line ~1840 (sidebar, hero, form tweaks)
   §10 Manage Pages ................. line ~2005 (SetPassword/ChangeEmail/ChangeLogin)
   ═══════════════════════════════════════════════════════════════ */

#content_form {
    margin-bottom: 5px;
}

.open>.dropdown-menu{
    background-color: var(--portalThemeColor4, #ffffff);
}
.open>.dropdown-menu>li>a{
    color: var(--portalThemeOnColor9, #1276CE);
}


.show .dropdown-menu > li > a:hover,.show .dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:hover{
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: none;

}
.dropdown-menu>.active>a{
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: none;

}
.show .dropdown-menu>.active>a:focus,.show .dropdown-menu>.active>a:focus,.open .dropdown-menu>.active>a:focus{
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: none;


/* ── BS5 Migration: suppress default anchor underline on nav elements ── */
.navbar-nav a,
.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.dropdown-menu a,
.dropdown-menu .dropdown-item {
  text-decoration: none !important;
}

/* ── BS5 Migration: suppress default anchor underline on nav elements ── */
.navbar-nav a,
.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.dropdown-menu a,
.dropdown-menu .dropdown-item {
  text-decoration: none !important;
}
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODERN MODAL / DIALOG — GLOBAL (both themes)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop — frosted glass ── */
.modal-backdrop.in, .modal-backdrop.show {
  opacity: 0.55 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Dialog positioning ── */
.modal-dialog {
  margin-top: 12vh !important;
}

/* ── Content card ── */
.modal-content {
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  animation: ccModalIn 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes ccModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.modal-header {
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  padding: 20px 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.modal-header .modal-title,
.modal-header h4 {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}
.modal-header .btn-close {
  font-size: 22px !important;
  opacity: 0.5 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.15s, background 0.15s !important;
  line-height: 1 !important;
  order: 2 !important;
}
.modal-header .close:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,0.06) !important;
}

/* ── Body ── */
.modal-body {
  padding: 20px 24px !important;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

/* ── Footer ── */
.modal-footer {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding: 14px 24px 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
.modal-footer .btn {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  border-radius: 10px !important;
  min-width: 80px !important;
  transition: all 0.15s cubic-bezier(0.16,1,0.3,1) !important;
  letter-spacing: 0 !important;
}
.modal-footer .btn-secondary {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  color: #3f3f46 !important;
}
.modal-footer .btn-secondary:hover {
  background: #e4e4e7 !important;
  border-color: #d4d4d8 !important;
  color: #18181b !important;
}
.modal-footer .btn-primary {
  background: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(124,58,237,0.3) !important;
}
.modal-footer .btn-primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  box-shadow: 0 2px 8px rgba(124,58,237,0.4) !important;
}
/* Danger variant (e.g. delete/cancel confirmation) */
.modal-footer .btn-danger {
  background: #ef4444 !important;
  border: 1px solid #ef4444 !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(239,68,68,0.3) !important;
}
.modal-footer .btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.4) !important;
}
/* Success variant */
.modal-footer .btn-success {
  background: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(16,185,129,0.3) !important;
}
.modal-footer .btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODERN MODAL — DARK MODE
   ══════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .modal-backdrop.in, .modal-backdrop.show {
  opacity: 0.7 !important;
  background-color: #000 !important;
}
html[data-theme="dark"] .modal-content {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(167,139,250,0.08) !important;
}
html[data-theme="dark"] .modal-header {
  border-bottom-color: #2a2a2a !important;
}
html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal-header h4 {
  color: #f5f5f5 !important;
}
html[data-theme="dark"] .modal-header .btn-close {
  color: #a3a3a3 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .modal-header .close:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .modal-body {
  color: #d4d4d4 !important;
}
html[data-theme="dark"] .modal-footer {
  border-top-color: #2a2a2a !important;
}
html[data-theme="dark"] .modal-footer .btn-secondary {
  background: #262626 !important;
  border-color: #404040 !important;
  color: #d4d4d4 !important;
}
html[data-theme="dark"] .modal-footer .btn-secondary:hover {
  background: #333333 !important;
  border-color: #525252 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .modal-footer .btn-primary {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}
html[data-theme="dark"] .modal-footer .btn-primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE — GLOBAL OVERRIDES (Custom.css)
   ══════════════════════════════════════════════════════════════════════════════
   This section counteracts every white-background rule in portalbasictheme.css
   and D365 React components (Fluent UI / Griffel CSS-in-JS).card Uses html[data-theme="dark"] prefix for maximum specificity.card ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. portalbasictheme.css exact counterparts ──────────────────────────── */
html[data-theme="dark"] body { background-color: #0a0a0a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] legend { color: #d4d4d4 !important; }
html[data-theme="dark"] .breadcrumb { background-color: transparent !important; }
html[data-theme="dark"] .breadcrumb > li a { color: #60a5fa !important; }
html[data-theme="dark"] .breadcrumb > .active { color: #d4d4d4 !important; }
html[data-theme="dark"] .btn-secondary { color: #d4d4d4 !important; background-color: #262626 !important; border-color: #404040 !important; }
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:active,
html[data-theme="dark"] .btn-secondary.active,
html[data-theme="dark"] .btn-secondary:focus { color: #ffffff !important; background-color: #333333 !important; border-color: #525252 !important; }
html[data-theme="dark"] .btn-primary { color: #0a0a0a !important; background-color: #a78bfa !important; border-color: #a78bfa !important; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary:focus { color: #0a0a0a !important; background-color: #8b5cf6 !important; border-color: #8b5cf6 !important; }
html[data-theme="dark"] .btn-success { color: #0a0a0a !important; background-color: #10b981 !important; border-color: #10b981 !important; }
html[data-theme="dark"] .btn-danger { color: #0a0a0a !important; background-color: #ef4444 !important; border-color: #ef4444 !important; }
html[data-theme="dark"] .btn { background-color: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .btn:hover { background-color: #333333 !important; border-color: #525252 !important; color: #ffffff !important; }
html[data-theme="dark"] .crmEntityFormView,
html[data-theme="dark"] .entitylist,
html[data-theme="dark"] .popover-content { background-color: #0a0a0a !important; color: #d4d4d4 !important; border-color: #333333 !important; }
html[data-theme="dark"] .modal-content { background-color: #1a1a1a !important; color: #d4d4d4 !important; border-color: #333333 !important; }
html[data-theme="dark"] .card> .card-body { background-color: #1a1a1a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .card> .card-header { background-color: #141414 !important; color: #d4d4d4 !important; border-color: #333333 !important; }
html[data-theme="dark"] .form-control:not(.case-deflection) { background-color: #262626 !important; color: #ffffff !important; border-color: #404040 !important; }
html[data-theme="dark"] input:not(.ms-SearchBox-field):not([role="searchbox"]):not([id^="SearchBox"]):not(.kb-search-input):not(.case-deflection) { background-color: #262626 !important; color: #ffffff !important; }
html[data-theme="dark"] .bootstrap-datetimepicker-widget { background-color: #1a1a1a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1f1f1f !important; }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #262626 !important; }
html[data-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: #262626 !important; color: #ffffff !important; }
html[data-theme="dark"] .table-hover > tbody > tr:hover > td * { color: #ffffff !important; }
html[data-theme="dark"] .table > tbody > tr:hover { background-color: #262626 !important; }
html[data-theme="dark"] .table > tbody > tr:hover > td { background-color: #262626 !important; color: #ffffff !important; }
html[data-theme="dark"] .table > tbody > tr:hover > td * { color: #ffffff !important; }
html[data-theme="dark"] .table > thead > tr.info > td,
html[data-theme="dark"] .table > thead > tr.info > th,
html[data-theme="dark"] .table > tbody > tr.info > td,
html[data-theme="dark"] .table > tbody > tr.info > th { background-color: #1a1a1a !important; }
html[data-theme="dark"] ::placeholder { color: #666666 !important; }
html[data-theme="dark"] .help-block { color: #a3a3a3 !important; }
html[data-theme="dark"] .msos-selection-container,
html[data-theme="dark"] .msos-container,
html[data-theme="dark"] .msos-caret-container,
html[data-theme="dark"] .msos-action-buttons:hover { color: #d4d4d4 !important; background: #262626 !important; }
html[data-theme="dark"] .msos-option-selected,
html[data-theme="dark"] .msos-selected-display-item,
html[data-theme="dark"] .msos-quick-delete,
html[data-theme="dark"] .msos-quick-delete:hover { background: #333333 !important; }
html[data-theme="dark"] .msos-label,
html[data-theme="dark"] .msos-quick-delete { color: #d4d4d4 !important; }
html[data-theme="dark"] .nav-tabs > li > a:hover,
html[data-theme="dark"] .nav-tabs > li > a:focus { background-color: #1a1a1a !important; color: #818cf8 !important; }
html[data-theme="dark"] .nav .open .dropdown-menu { background-color: #262626 !important; }
html[data-theme="dark"] .nav .open .dropdown-menu > li > a { color: #818cf8 !important; }
html[data-theme="dark"] .nav .open .dropdown-menu > li > a:hover { background-color: #333333 !important; color: #ffffff !important; }
html[data-theme="dark"] .nav > li > a:hover,
html[data-theme="dark"] .nav > li > a:focus { background-color: #1a1a1a !important; }
html[data-theme="dark"] .search-results .highlight { color: #ffffff !important; }
html[data-theme="dark"] a { color: #818cf8 !important; }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus { color: #a78bfa !important; }

/* ── 2. Nuclear panel / card / container overrides ───────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel-primary,
html[data-theme="dark"] .panel-info,
html[data-theme="dark"] .panel-success,
html[data-theme="dark"] .panel-warning,
html[data-theme="dark"] .panel-danger { background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer { background: #1a1a1a !important; background-color: #1a1a1a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .card-header { background: #141414 !important; background-color: #141414 !important; color: #d4d4d4 !important; border-color: #333333 !important; }
html[data-theme="dark"] .card { background: #1a1a1a !important; background-color: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .card-body { background: #1a1a1a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .card-header { background: #141414 !important; color: #d4d4d4 !important; border-color: #333333 !important; }
html[data-theme="dark"] .card-footer { background: #1a1a1a !important; color: #737373 !important; border-color: #333333 !important; }

/* ── 3. Entity list / Entity grid ────────────────────────────────────────── */
html[data-theme="dark"] #content_form { background-color: #0a0a0a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] [id^="EntityList"] { background-color: #0a0a0a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .entity-grid { background-color: #0a0a0a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .entity-grid .view-grid,
html[data-theme="dark"] .view-grid { background-color: #1a1a1a !important; border-color: #333333 !important; border-radius: 12px !important; overflow: hidden !important; }
html[data-theme="dark"] .entity-grid .view-grid > table,
html[data-theme="dark"] .view-grid > table,
html[data-theme="dark"] .entity-grid table.table { color: #d4d4d4 !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .entity-grid table thead,
html[data-theme="dark"] .view-grid table thead { background-color: #141414 !important; }
html[data-theme="dark"] .entity-grid table thead tr th,
html[data-theme="dark"] .view-grid table thead tr th,
html[data-theme="dark"] .entity-grid table > thead > tr > th { background-color: #141414 !important; border-color: #333333 !important; border-bottom-color: #333333 !important; color: #a3a3a3 !important; }
html[data-theme="dark"] .entity-grid table thead th a,
html[data-theme="dark"] .view-grid table thead th a { color: #a3a3a3 !important; text-decoration: none !important; }
html[data-theme="dark"] .entity-grid table thead th a:hover,
html[data-theme="dark"] .view-grid table thead th a:hover { color: #ffffff !important; }
html[data-theme="dark"] .entity-grid table thead th .sort-icon,
html[data-theme="dark"] .entity-grid table thead th .bi { color: #737373 !important; }
html[data-theme="dark"] .entity-grid table tbody tr,
html[data-theme="dark"] .view-grid table tbody tr { background-color: #1a1a1a !important; }
html[data-theme="dark"] .entity-grid table tbody tr:nth-child(even),
html[data-theme="dark"] .view-grid table tbody tr:nth-child(even) { background-color: #1a1a1a !important; }
html[data-theme="dark"] .entity-grid table tbody tr:nth-child(odd),
html[data-theme="dark"] .view-grid table tbody tr:nth-child(odd) { background-color: #1f1f1f !important; }
html[data-theme="dark"] .entity-grid table tbody tr:hover,
html[data-theme="dark"] .view-grid table tbody tr:hover { background-color: #262626 !important; }
html[data-theme="dark"] .entity-grid table tbody tr:hover td,
html[data-theme="dark"] .view-grid table tbody tr:hover td { background-color: #262626 !important; color: #ffffff !important; }
html[data-theme="dark"] .entity-grid table tbody tr:hover td *,
html[data-theme="dark"] .view-grid table tbody tr:hover td * { color: #ffffff !important; }
html[data-theme="dark"] .entity-grid table tbody tr td,
html[data-theme="dark"] .view-grid table tbody tr td,
html[data-theme="dark"] .entity-grid table > tbody > tr > td { border-color: #2a2a2a !important; border-top-color: #2a2a2a !important; color: #e5e5e5 !important; background-color: transparent !important; }
html[data-theme="dark"] .entity-grid table tbody tr:hover td,
html[data-theme="dark"] .view-grid table tbody tr:hover td { color: #ffffff !important; background-color: #262626 !important; }
html[data-theme="dark"] .entity-grid table tbody td span,
html[data-theme="dark"] .view-grid table tbody td span { color: #e5e5e5 !important; }
html[data-theme="dark"] .entity-grid table tbody tr:hover td span,
html[data-theme="dark"] .view-grid table tbody tr:hover td span { color: #ffffff !important; }
html[data-theme="dark"] .entity-grid table tbody td a,
html[data-theme="dark"] .view-grid table tbody td a { color: #60a5fa !important; }
html[data-theme="dark"] .entity-grid table tbody td a:hover,
html[data-theme="dark"] .view-grid table tbody td a:hover { color: #93bbfd !important; }
html[data-theme="dark"] .entity-grid .view-toolbar,
html[data-theme="dark"] .view-toolbar,
html[data-theme="dark"] .entity-grid-toolbar { background: transparent !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .entity-grid .view-toolbar .btn-secondary,
html[data-theme="dark"] .view-toolbar .btn-secondary,
html[data-theme="dark"] .entity-grid .view-toolbar .btn,
html[data-theme="dark"] .view-toolbar .btn { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .entity-grid .view-toolbar .btn:hover,
html[data-theme="dark"] .view-toolbar .btn:hover { background: #333333 !important; border-color: #525252 !important; color: #ffffff !important; }
html[data-theme="dark"] .entity-grid .view-toolbar .btn-group .btn,
html[data-theme="dark"] .view-toolbar .btn-group .btn { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .entity-grid .view-toolbar .btn-group .btn:hover { background: #333333 !important; color: #ffffff !important; }
html[data-theme="dark"] .entity-grid .entity-grid-search input,
html[data-theme="dark"] .entity-grid-search input,
html[data-theme="dark"] .entity-grid .entity-grid-search .form-control { background: #262626 !important; border-color: #333333 !important; color: #ffffff !important; }
html[data-theme="dark"] .entity-grid-search input::placeholder { color: #525252 !important; }
html[data-theme="dark"] .entity-grid-search .input-group-btn .btn { background: #262626 !important; border-color: #333333 !important; color: #a3a3a3 !important; }
html[data-theme="dark"] .entity-grid-search .input-group-btn .btn:hover { color: #a78bfa !important; }
html[data-theme="dark"] .entity-grid .view-pagination,
html[data-theme="dark"] .view-pagination { background: transparent !important; }
html[data-theme="dark"] .entity-grid .view-empty,
html[data-theme="dark"] .view-empty { color: #737373 !important; background: transparent !important; }
html[data-theme="dark"] .entity-grid td .dropdown .btn,
html[data-theme="dark"] .entity-grid .grid-actions .btn { background: transparent !important; border: none !important; color: #737373 !important; }
html[data-theme="dark"] .entity-grid td .dropdown .btn:hover,
html[data-theme="dark"] .entity-grid .grid-actions .btn:hover { color: #a78bfa !important; }
html[data-theme="dark"] .entity-grid .view-select,
html[data-theme="dark"] .view-toolbar .view-select { color: #d4d4d4 !important; }
html[data-theme="dark"] .entity-grid .view-select .btn,
html[data-theme="dark"] .view-toolbar .view-select .btn { background: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; }

/* ── 4. NUCLEAR: Force EVERY element in the content area transparent ──── */
/* .wrapper-body is the outer content wrapper from Layout 1 Column.card This catches ALL React/Griffel/Fluent UI components regardless
   of class name, DOM nesting, or whether they're inside .entitylist
   or a sibling of it (like the AI Insights panel). */
html[data-theme="dark"] .wrapper-body div:not([class*="kb-cd-hero"]):not([class*="kb-cd-hero__"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-hero__"]),
html[data-theme="dark"] .wrapper-body section:not([class*="kb-cd-hero"]):not([class*="kb-cd-body"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-layout"]),
html[data-theme="dark"] .wrapper-body article,
html[data-theme="dark"] .wrapper-body aside,
html[data-theme="dark"] .wrapper-body figure,
html[data-theme="dark"] #mainContent div:not([class*="kb-cd-hero"]):not([class*="kb-cd-hero__"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-hero__"]),
html[data-theme="dark"] #mainContent section:not([class*="kb-cd-hero"]):not([class*="kb-cd-body"]):not([class*="kb-ad-hero"]):not([class*="kb-ad-layout"]),
html[data-theme="dark"] #mainContent span:not(.atq-status-badge):not(.label) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Also catch React Portals — body-level children that aren't header/footer/nav */
html[data-theme="dark"] body > div:not([class*="navbar"]):not([class*="footer"]):not([id*="cookie"]):not([class*="modal-backdrop"]) {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="dark"] body > div:not([class*="navbar"]):not([class*="footer"]) > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── 5. Re-apply dark surfaces that NEED a background ────────────────── */
/* These rules have higher specificity than §4 because they add classes */

/* Profile page — Marketing Options & Actions divs (use 2x ID to beat §4 nuclear) */
html[data-theme="dark"] #mainContent #ContentContainer_MainContent_MainContent_ContentBottom_MarketingOptionsPanel {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
}
/* Actions wrapper has no ID, so use double-ID + descendant path */
html[data-theme="dark"] #mainContent .col-lg-8 > div:last-of-type:has(.actions) {
  background: var(--pp-surface) !important;
  background-color: var(--pp-surface) !important;
}

html[data-theme="dark"] .wrapper-body .view-grid,
html[data-theme="dark"] #mainContent .view-grid { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body .entity-grid-search input,
html[data-theme="dark"] .wrapper-body .entity-grid-search .btn { background: #262626 !important; }
html[data-theme="dark"] .wrapper-body .atq-grid-card { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body .atq-col-picker-panel { background: #262626 !important; background-color: #262626 !important; }
html[data-theme="dark"] .wrapper-body .dropdown-menu { background: #262626 !important; background-color: #262626 !important; }
html[data-theme="dark"] .wrapper-body .modal-content { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body .tooltip-inner { background: #333333 !important; }
html[data-theme="dark"] .wrapper-body .popover { background: #1a1a1a !important; }

/* Fluent UI components inside wrapper-body — need real backgrounds after §4 nuke */
html[data-theme="dark"] .wrapper-body [role="grid"],
html[data-theme="dark"] #mainContent [role="grid"] { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body .ms-DetailsRow,
html[data-theme="dark"] .wrapper-body [role="row"]:not(:hover) { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body .ms-DetailsHeader,
html[data-theme="dark"] .wrapper-body [role="columnheader"] { background: #111111 !important; background-color: #111111 !important; }
html[data-theme="dark"] .wrapper-body .ms-SearchBox,
html[data-theme="dark"] .wrapper-body [role="search"]:not(.kb-search-bar),
html[data-theme="dark"] .wrapper-body div[class*="ms-SearchBox"] { background: #1a1a1a !important; background-color: #1a1a1a !important; border: 1px solid #333 !important; border-radius: 4px !important; }
/* SearchBox input should be transparent (wrapper provides bg) */
html[data-theme="dark"] .wrapper-body .ms-SearchBox input,
html[data-theme="dark"] .wrapper-body .ms-SearchBox-field,
html[data-theme="dark"] .wrapper-body input[id^="SearchBox"],
html[data-theme="dark"] .wrapper-body input[role="searchbox"] { background: transparent !important; background-color: transparent !important; border: none !important; }

/* Fluent UI Callout / Dropdown panel (React Portal — body-level, outside wrapper-body) */
/* Fluent Dropdown trigger */
html[data-theme="dark"] .wrapper-body .ms-Dropdown,
html[data-theme="dark"] .wrapper-body div[class*="ms-Dropdown"]:not(.ms-Dropdown-callout) { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; }

html[data-theme="dark"] .ms-Callout,
html[data-theme="dark"] .ms-Callout-main,
html[data-theme="dark"] .ms-Dropdown-callout,
html[data-theme="dark"] .ms-Panel-main,
html[data-theme="dark"] .ms-Layer > div { background: #1e1e1e !important; background-color: #1e1e1e !important; border-color: #333 !important; }
html[data-theme="dark"] .ms-Callout *,
html[data-theme="dark"] .ms-Dropdown-callout * { color: #d4d4d4 !important; }
html[data-theme="dark"] [role="option"],
html[data-theme="dark"] .ms-Dropdown-item { background: transparent !important; color: #d4d4d4 !important; }
html[data-theme="dark"] [role="option"]:hover,
html[data-theme="dark"] .ms-Dropdown-item:hover { background: #262626 !important; background-color: #262626 !important; color: #fff !important; }
html[data-theme="dark"] [role="option"][aria-selected="true"] { background: rgba(167,139,250,0.15) !important; color: #a78bfa !important; }

/* Buttons inside wrapper-body need visible background */
html[data-theme="dark"] .wrapper-body .btn { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .btn:hover { background: #333333 !important; background-color: #333333 !important; color: #ffffff !important; }
html[data-theme="dark"] .wrapper-body .btn-primary { background: #7c3aed !important; background-color: #7c3aed !important; border-color: #7c3aed !important; color: #ffffff !important; }
html[data-theme="dark"] .wrapper-body .btn-primary:hover { background: #6d28d9 !important; background-color: #6d28d9 !important; }

/* Form fields — need visible dark background, not transparent */
html[data-theme="dark"] .wrapper-body .form-control:not(.case-deflection) { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #ffffff !important; }
html[data-theme="dark"] .wrapper-body textarea { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #ffffff !important; }
html[data-theme="dark"] .wrapper-body select { background: #262626 !important; background-color: #262626 !important; border-color: #404040 !important; color: #ffffff !important; }
html[data-theme="dark"] .wrapper-body input:not(.ms-SearchBox-field):not([role="searchbox"]):not([id^="SearchBox"]):not(.kb-search-input):not(.case-deflection) { background: #262626 !important; background-color: #262626 !important; color: #ffffff !important; }

/* Tables — rows and cells need visible backgrounds */
html[data-theme="dark"] .wrapper-body table { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body table thead th { background: #141414 !important; background-color: #141414 !important; color: #a3a3a3 !important; }
html[data-theme="dark"] .wrapper-body table tbody tr { background: #1a1a1a !important; background-color: #1a1a1a !important; }
html[data-theme="dark"] .wrapper-body table tbody tr:nth-child(odd) { background: #1f1f1f !important; background-color: #1f1f1f !important; }
html[data-theme="dark"] .wrapper-body table tbody tr:hover { background: #262626 !important; background-color: #262626 !important; }
html[data-theme="dark"] .wrapper-body table tbody tr:hover td { background: inherit !important; background-color: inherit !important; color: #ffffff !important; }
html[data-theme="dark"] .wrapper-body table tbody td { color: #e5e5e5 !important; border-color: #2a2a2a !important; }
html[data-theme="dark"] .wrapper-body table tbody td a { color: #818cf8 !important; }
html[data-theme="dark"] .wrapper-body table tbody td a:hover { color: #a78bfa !important; }

/* Case detail / Edit case — entity form containers */
html[data-theme="dark"] .wrapper-body .crmEntityFormView { background: #0a0a0a !important; background-color: #0a0a0a !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .tab-content { background: transparent !important; }
html[data-theme="dark"] .wrapper-body .tab-pane { background: transparent !important; }
html[data-theme="dark"] .wrapper-body .section { background: transparent !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .cell { background: transparent !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .info { color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .control { color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .row { color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .text-muted { color: #737373 !important; }
html[data-theme="dark"] .wrapper-body .alert { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .alert-info { background: rgba(96,165,250,0.1) !important; border-color: rgba(96,165,250,0.3) !important; color: #60a5fa !important; }
html[data-theme="dark"] .wrapper-body .alert-warning { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.3) !important; color: #f59e0b !important; }
html[data-theme="dark"] .wrapper-body .alert-danger { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important; color: #ef4444 !important; }
html[data-theme="dark"] .wrapper-body .alert-success { background: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.3) !important; color: #10b981 !important; }

/* Timeline / notes / activity cards on case detail pages */
html[data-theme="dark"] .wrapper-body .notes { background: transparent !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .note { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .activity-card,
html[data-theme="dark"] .wrapper-body .timeline-item { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .wrapper-body .ec-email-card { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }

/* ── 5b. Contact Us page — re-apply dark surfaces after §4 nuclear ──── */
/*    CSS fallback only. Primary dark-mode enforcement is via JS inline
      styles (page-scoped JS) which use element.style.setProperty with
      !important — inline !important beats ALL selector-based rules.   */
html[data-theme="dark"] #mainContent .atqc-hero {
  background: linear-gradient(180deg, #0a0f1e 0%, #111827 50%, #0f172a 100%) !important;
}
html[data-theme="dark"] #mainContent .atqc-stats {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
}
html[data-theme="dark"] #mainContent .atqc-channels {
  background: #111111 !important;
  background-color: #111111 !important;
}
html[data-theme="dark"] #mainContent .atqc-channel {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
}
html[data-theme="dark"] #mainContent .atqc-form-section {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
}
html[data-theme="dark"] #mainContent .atqc-form-wrapper {
  background: #1e1e1e !important;
  background-color: #1e1e1e !important;
  border-color: #444444 !important;
}

/* ── 6. Label badges ─────────────────────────────────────────────────── */
html[data-theme="dark"] .bg-info { background: rgba(96,165,250,0.15) !important; color: #60a5fa !important; }
html[data-theme="dark"] .bg-success { background: rgba(16,185,129,0.15) !important; color: #10b981 !important; }
html[data-theme="dark"] .bg-warning { background: rgba(245,158,11,0.15) !important; color: #f59e0b !important; }
html[data-theme="dark"] .label-danger { background: rgba(239,68,68,0.15) !important; color: #ef4444 !important; }
html[data-theme="dark"] .bg-primary { background: rgba(167,139,250,0.15) !important; color: #a78bfa !important; }

/* ── 7. List group (generic) ─────────────────────────────────────────── */
html[data-theme="dark"] .list-group-item { background: #1a1a1a !important; border-color: #333333 !important; color: #d4d4d4 !important; }
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] a.list-group-item:hover { background: #262626 !important; color: #ffffff !important; }

/* ── 8. Dropdown menus (global) ──────────────────────────────────────── */
html[data-theme="dark"] .dropdown-menu { background-color: #262626 !important; border-color: #404040 !important; }
html[data-theme="dark"] .dropdown-menu > li > a { color: #d4d4d4 !important; }
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #333333 !important; color: #ffffff !important; }
html[data-theme="dark"] .dropdown-menu > .active > a { background-color: #7c3aed !important; color: #ffffff !important; }
html[data-theme="dark"] .dropdown-menu .dropdown-divider { background-color: #404040 !important; }

/* ── 9. Generic text / SVG / border colours ──────────────────────────── */
html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.atq-status-badge):not(.label),
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #e5e5e5 !important; }
html[data-theme="dark"] hr { border-color: #333333 !important; }
html[data-theme="dark"] .table,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td { border-color: #2a2a2a !important; }
html[data-theme="dark"] svg:not(.atq-status-badge svg) { color: #a3a3a3 !important; }



/* ═══════════════════════════════════════════════════════════════
   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;
  }
}

/* ═══════════════════════════════════════════════════════════════
   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;
  }
}


/* ═══════════════════════════════════════════════════════════════
   §11 SHARED DESIGN TOKENS — Unified palette for case pages
   Used by: Edit Case, Case Details, Create Case, My Support
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --atq-primary:       #2563eb;
  --atq-primary-dark:  #1e40af;
  --atq-primary-light: #eff6ff;
  --atq-accent:        #2563eb;
  --atq-text:          #0f172a;
  --atq-text-secondary:#334155;
  --atq-text-muted:    #64748b;
  --atq-border:        #e2e8f0;
  --atq-border-light:  #f1f5f9;
  --atq-bg:            #f8fafc;
  --atq-surface:       #ffffff;
  --atq-surface-raised:#f8fafc;
  --atq-success:       #059669;
  --atq-success-dim:   rgba(5, 150, 105, 0.08);
  --atq-danger:        #dc2626;
  --atq-warning:       #d97706;
  --atq-info:          #0284c7;

  /* ── Radii ── */
  --atq-radius:        12px;
  --atq-radius-lg:     16px;
  --atq-radius-sm:     8px;

  /* ── Shadows ── */
  --atq-shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --atq-shadow-md:     0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --atq-shadow-lg:     0 4px 16px rgba(0,0,0,0.08);

  /* ── Typography & Motion ── */
  --atq-font:          'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --atq-ease:          cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Focus / Readonly ── */
  --atq-focus-ring:    rgba(37, 99, 235, 0.12);
  --atq-focus-bg:      #ffffff;
  --atq-readonly-bg:   #f1f5f9;
}

html[data-theme="dark"] {
  --atq-primary:       #a78bfa;
  --atq-primary-dark:  #8b5cf6;
  --atq-primary-light: rgba(167, 139, 250, 0.12);
  --atq-accent:        #60a5fa;
  --atq-text:          #ffffff;
  --atq-text-secondary:#d4d4d4;
  --atq-text-muted:    #a3a3a3;
  --atq-border:        #333333;
  --atq-border-light:  #2a2a2a;
  --atq-bg:            #0a0a0a;
  --atq-surface:       #1a1a1a;
  --atq-surface-raised:#262626;
  --atq-success:       #10b981;
  --atq-success-dim:   rgba(16, 185, 129, 0.15);
  --atq-danger:        #ef4444;
  --atq-warning:       #f59e0b;
  --atq-shadow:        0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --atq-shadow-md:     0 4px 12px rgba(0,0,0,0.4);
  --atq-shadow-lg:     0 4px 16px rgba(0,0,0,0.4);
  --atq-focus-ring:    rgba(167, 139, 250, 0.2);
  --atq-focus-bg:      #2d2d2d;
  --atq-readonly-bg:   rgba(255,255,255,0.05);
}


/* ═══════════════════════════════════════════════════════════════
   §12 SHARED EMAIL TIMELINE COMPONENT — .atq-tl-*
   Used by: Edit Case, Case Details
   Single source: replaces duplicate in each page CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.atq-timeline-section {
  background: var(--atq-surface);
  border: 1px solid var(--atq-border);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--atq-shadow);
  font-family: var(--atq-font);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Header ── */
.atq-tl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--atq-primary);
  margin-bottom: 20px;
}
.atq-tl-header-left { display: flex; align-items: center; gap: 10px; }
.atq-tl-header-icon { color: var(--atq-primary); }
.atq-tl-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--atq-text);
  margin: 0;
  letter-spacing: -0.3px;
}
.atq-tl-count {
  font-size: 12px;
  color: var(--atq-text-muted);
  background: var(--atq-bg);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid var(--atq-border);
}

/* ── List ── */
.atq-tl-list { position: relative; }

.atq-tl-item {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ── Timeline marker (dot + line) ── */
.atq-tl-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
  padding-top: 14px;
}
.atq-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--atq-primary);
  border: 2px solid var(--atq-primary-light);
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--atq-primary);
}
.atq-tl-incoming .atq-tl-dot {
  background: var(--atq-success);
  border-color: #dcfce7;
  box-shadow: 0 0 0 2px var(--atq-success);
}
.atq-tl-line {
  width: 2px;
  flex-grow: 1;
  background: var(--atq-border);
  margin-top: 4px;
  min-height: 16px;
}

/* ── Timeline card ── */
.atq-tl-card {
  flex-grow: 1;
  background: var(--atq-surface-raised);
  border: 1px solid var(--atq-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s var(--atq-ease), border-color 0.2s var(--atq-ease);
}
.atq-tl-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-color: #cbd5e1;
}
.atq-tl-outgoing .atq-tl-card { border-left: 3px solid var(--atq-primary); }
.atq-tl-incoming .atq-tl-card { border-left: 3px solid var(--atq-success); }

/* ── Card meta row ── */
.atq-tl-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 5px;
}
.atq-tl-meta-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.atq-tl-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--atq-primary);
  background: var(--atq-primary-light);
  padding: 2px 8px;
  border-radius: 5px;
}
.atq-tl-type-badge svg { flex-shrink: 0; }
.atq-tl-status-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--atq-text-muted);
  background: var(--atq-readonly-bg);
  padding: 2px 8px;
  border-radius: 4px;
}
.atq-tl-dir-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
}
.atq-tl-dir-out { color: var(--atq-primary); background: var(--atq-primary-light); }
.atq-tl-dir-in { color: var(--atq-success); background: #f0fdf4; }
html[data-theme="dark"] .atq-tl-dir-in { background: var(--atq-success-dim); }

/* ── Sender / To / Subject ── */
.atq-tl-sender, .atq-tl-to { font-size: 12px; margin-bottom: 3px; line-height: 1.4; }
.atq-tl-sender-label, .atq-tl-to-label { color: var(--atq-text-muted); font-weight: 500; margin-right: 3px; }
.atq-tl-sender-value, .atq-tl-to-value { color: var(--atq-text); font-weight: 500; }

.atq-tl-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--atq-text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.atq-tl-preview {
  font-size: 12px;
  color: var(--atq-text-muted);
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.atq-tl-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--atq-text-muted);
  font-weight: 500;
}
.atq-tl-time svg { flex-shrink: 0; opacity: 0.7; }

/* ── Expand / Collapse toggle ── */
.atq-tl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--atq-font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--atq-primary);
  background: none;
  border: none;
  padding: 4px 0 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.atq-tl-toggle:hover { color: var(--atq-primary-dark); text-decoration: underline; }
.atq-tl-toggle-icon { transition: transform 0.25s var(--atq-ease); }
.atq-tl-toggle.expanded .atq-tl-toggle-icon { transform: rotate(180deg); }

/* ── Body content (expanded) ── */
.atq-tl-body-wrap {
  margin-top: 10px;
  border-top: 1px solid var(--atq-border);
  padding-top: 10px;
}
.atq-tl-body-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--atq-text);
  max-height: 400px;
  overflow-y: auto;
  padding: 12px;
  background: var(--atq-surface);
  border-radius: var(--atq-radius-sm);
  border: 1px solid var(--atq-border);
  word-break: break-word;
}
.atq-tl-body-content * { max-width: 100% !important; }
.atq-tl-body-content img { max-width: 100% !important; height: auto !important; }
.atq-tl-body-content table { max-width: 100% !important; }

/* ── Empty state ── */
.atq-tl-empty { text-align: center; padding: 40px 20px; color: var(--atq-text-muted); }
.atq-tl-empty svg { margin-bottom: 12px; opacity: 0.5; }
.atq-tl-empty p { margin: 0; font-size: 14px; font-weight: 600; color: var(--atq-text); }
.atq-tl-empty-sub { font-size: 13px !important; font-weight: 400 !important; color: var(--atq-text-muted) !important; margin-top: 6px !important; }

/* ── Timeline dark mode — #mainContent selector beats §3 nuclear rule ── */
html[data-theme="dark"] #mainContent .atq-timeline-section {
  background: var(--atq-surface) !important;
  background-color: var(--atq-surface) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] #mainContent .atq-tl-card {
  background: var(--atq-surface-raised) !important;
  background-color: var(--atq-surface-raised) !important;
}
html[data-theme="dark"] #mainContent .atq-tl-card:hover {
  border-color: rgba(167,139,250,0.2) !important;
  box-shadow: 0 4px 20px rgba(167,139,250,0.08) !important;
}
html[data-theme="dark"] #mainContent .atq-tl-body-content {
  background: var(--atq-surface) !important;
  background-color: var(--atq-surface) !important;
}
html[data-theme="dark"] #mainContent .atq-tl-count {
  background: var(--atq-bg) !important;
  background-color: var(--atq-bg) !important;
}
html[data-theme="dark"] .atq-tl-dot { border-color: rgba(167,139,250,0.2); }
html[data-theme="dark"] .atq-tl-incoming .atq-tl-dot { border-color: rgba(16,185,129,0.2); }

/* ── Timeline responsive ── */
@media (max-width: 768px) {
  .atq-timeline-section { padding: 16px 14px; border-radius: 12px; }
  .atq-tl-card { padding: 10px 12px; }
  .atq-tl-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .atq-tl-card-meta { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════
   §13 SHARED CASE PAGE COMPONENTS
   Entitlement lock, reduced-motion
   ═══════════════════════════════════════════════════════════════ */

/* ── Entitlement read-only display ── */
#entitlementid_name[readonly] {
  background: #f0fdf4 !important;
  color: var(--atq-success) !important;
  border: 1.5px dashed #86efac !important;
  font-weight: 600 !important;
  cursor: default !important;
}
/* Hide entitlement lookup buttons — field is auto-populated */
#entitlementid_name + .input-group-btn,
#entitlementid_lookupmodal ~ .input-group-btn,
#entitlementid ~ .input-group-btn,
td[data-field="entitlementid"] .input-group-btn,
.entitlement-locked .input-group-btn {
  display: none !important;
}
/* Hide clear (X) button on entitlement lookup */
td[data-field="entitlementid"] .clearlookupfield,
.entitlement-locked .clearlookupfield {
  display: none !important;
}
/* Expand entitlement input to full width when buttons are hidden */
td[data-field="entitlementid"] .input-group,
.entitlement-locked .input-group {
  display: block !important;
}
td[data-field="entitlementid"] .input-group .form-control,
td[data-field="entitlementid"] #entitlementid_name,
.entitlement-locked .input-group .form-control,
.entitlement-locked #entitlementid_name {
  width: 100% !important;
  border-radius: var(--atq-radius-sm) !important;
}

/* ── Entitlement dark mode ── */
html[data-theme="dark"] #entitlementid_name[readonly] {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* ── Reduced motion — respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Ensure scroll-reveal elements are never stuck invisible */
  .cd-reveal,
  .atq2-reveal,
  .atqc-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   §14  FOCUS-VISIBLE — global keyboard focus rings
   Apple-inspired focus ring: 2px offset ring using the page's
   accent colour. Only appears on keyboard navigation (:focus-visible),
   never on mouse/touch clicks.card ═══════════════════════════════════════════════════════════════ */

/* ── Light mode focus ring ── */
:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.65) !important;
  outline-offset: 2px !important;
  border-radius: inherit;
}

/* Buttons + cards — slightly thicker ring for larger targets */
.btn:focus-visible,
.list-group-item:focus-visible,
.atq-profile-action:focus-visible,
.nav-tabs > li > a:focus-visible,
.nav > li > a:focus-visible,
.breadcrumb > li > a:focus-visible {
  outline-width: 2.5px !important;
  outline-offset: 3px !important;
}

/* Form inputs — inset ring matches existing :focus box-shadow convention */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
}

/* ── Dark mode focus ring — periwinkle accent ── */
html[data-theme="dark"] :focus-visible {
  outline-color: rgba(79, 124, 255, 0.7) !important;
}

html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] .form-control:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.25) !important;
  border-color: rgba(79, 124, 255, 0.5) !important;
}

/* ════════════════════════════════════════
   BS5 Migration Fix — appended by fix2.py
   ════════════════════════════════════════ */

/* Kill underline on all portal nav anchors */
.navbar a, .navbar a:hover, .navbar a:focus, .navbar a:visited,
.navbar-nav a, .navbar-nav a:hover, .navbar-nav a:focus,
.nav-link, .nav-link:hover, .nav-link:focus,
.dropdown-menu a, .dropdown-menu a:hover, .dropdown-menu a:focus,
.dropdown-item, .dropdown-item:hover, .dropdown-item:focus,
.nav a, .nav a:hover {
  text-decoration: none !important;
}

/* BS5 dropdown .show (replaces .open) */
.show > .dropdown-menu { display: block !important; }

/* BS5 modal backdrop */
.modal-backdrop.show { opacity: 0.5; }

/* Dark mode nav */
[data-theme="dark"] .navbar a,
[data-theme="dark"] .navbar a:hover,
[data-theme="dark"] .dropdown-menu a,
[data-theme="dark"] .dropdown-item {
  text-decoration: none !important;
  background: transparent;
}

/* Dark mode: prevent black box on nav hover */
[data-theme="dark"] .navbar-nav > li > a:hover,
[data-theme="dark"] .navbar-nav > li > a:focus {
  background: rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   §12  Portal-Wide Layout Fixes
   ── Actual Power Pages DOM (Layout 1 Column template):
      .wrapper-body > .container[role="main"] > .row > .col-lg-12
      > #mainContent > [page content]
   ── My Support: strip max-width from outer container chain so
      .atq-sp-page fills the viewport edge-to-edge.
      Uses direct-child (>) so inner entity form containers are
      NOT touched — only the 3 ancestors above #mainContent.
   ── Profile + Manage: orbs are on .container::before/::after with
      left:-280px / right:-260px. Clip at body level.
   ═══════════════════════════════════════════════════════════════ */

/* Strip Bootstrap container's max-width cap — ONLY the direct outer
   chain above #mainContent, scoped to My Support page only.
   .container[role="main"] is the Bootstrap container in Layout 1 Column. */
body:has(.atq-sp-page) .wrapper-body {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:has(.atq-sp-page) .wrapper-body > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:has(.atq-sp-page) .wrapper-body > .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body:has(.atq-sp-page) .wrapper-body > .container > .row > .col-lg-12,
body:has(.atq-sp-page) .wrapper-body > .container > .row > .col-md-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Hide default Power Pages page title — My Support has its own heading */
body:has(.atq-sp-page) .page-heading {
  display: none !important;
}

/* Profile + Manage — strip the outer container max-width too so the
   body gradient/background fills edge-to-edge. The inner
   .row:has(.profile-info) still self-centers at 1040px, so content
   layout is unaffected. */
body:has(.profile-info) .wrapper-body > .container,
body:has(.atq-manage-sentinel) .wrapper-body > .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Outer container strip for Create Case and Edit Case */
body:has(.cc-wizard-wrap) .wrapper-body > .container,
body:has(.ec-header) .wrapper-body > .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dark mode — clip overflowing animated orbs / gradients on ALL pages.
   overflow-x:clip (NOT hidden) clips without creating a scroll container,
   so position:sticky on sidebar and fixed nav still works. */
html[data-theme="dark"] body:has(.atq-sp-page),
html[data-theme="dark"] body:has(.profile-info),
html[data-theme="dark"] body:has(.atq-manage-sentinel),
html[data-theme="dark"] body:has(.cc-wizard-wrap),
html[data-theme="dark"] body:has(.ec-header) {
  overflow-x: clip !important;
}

/* Create Case (Step 3) — upload helper text contrast fix.
   Bootstrap's .table-info applies dark text; force readable text for
   this exact portal upload block in dark theme. */
html[data-theme="dark"] #mainContent .cc-wizard-wrap .file-cell.cell .table-info,
html[data-theme="dark"] #mainContent .cc-wizard-wrap .file-cell.cell .table-info *,
html[data-theme="dark"] #mainContent .cc-wizard-wrap .file-cell.cell #NewAttachFileLabel {
  color: #e7edf7 !important;
  -webkit-text-fill-color: #e7edf7 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Home (dark mode) — force CTA text contrast.
   This sits in Custom.css so it reliably wins over global dark anchor rules. */
html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn,
html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:visited,
html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:hover,
html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:focus,
html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:active,
[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn,
[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:visited,
[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:hover,
[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:focus,
[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn *,
[data-theme="dark"] body:has(.atq2-hero) a.atq2-hero-btn * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline,
html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:visited,
html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:hover,
html[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:focus,
[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline,
[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:visited,
[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:hover,
[data-theme="dark"] body:has(.atq2-help-section) a.atq2-btn--outline:focus {
  color: #eff6ff !important;
  -webkit-text-fill-color: #eff6ff !important;
  border-color: rgba(191, 219, 254, 0.62) !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
   §KB  KNOWLEDGE BASE — Article Detail & Category Detail
   Classes: .kb-ad-*, .kb-cd-*, .kb-trail-*, .kb-btn, .kb-reveal
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared reveal animation ─────────────────────────────────── */
.kb-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--atq-ease), transform 0.5s var(--atq-ease);
}
.kb-reveal.kb-visible,
.kb-reveal.kb-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Shared button ───────────────────────────────────────────── */
.kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--atq-radius-sm);
  font-family: var(--atq-font);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background 0.2s var(--atq-ease), transform 0.15s var(--atq-ease),
              box-shadow 0.2s var(--atq-ease);
}
.kb-btn:hover  { text-decoration: none; }
.kb-btn:active { transform: scale(0.97); }
.kb-btn--primary {
  background: var(--atq-primary);
  color: #ffffff;
}
.kb-btn--primary:hover {
  background: var(--atq-primary-dark);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35);
  transform: translateY(-1px);
}
.kb-btn--outline {
  background: transparent;
  color: var(--atq-primary);
  border: 1.5px solid var(--atq-primary);
}
.kb-btn--outline:hover {
  background: var(--atq-primary-light);
  color: var(--atq-primary-dark);
}
html[data-theme="dark"] .kb-btn--primary:hover {
  box-shadow: 0 4px 14px rgba(167,139,250,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE DETAIL — Hero
   ═══════════════════════════════════════════════════════════════ */
.kb-ad-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 40%, #2563eb 100%);
  padding: 56px 24px 52px;
  color: #ffffff;
}
html[data-theme="dark"] .kb-ad-hero {
  background: linear-gradient(135deg, #0a0a14 0%, #111827 50%, #1e293b 100%);
  border-bottom: 1px solid var(--atq-border);
}

.kb-ad-hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.18;
}
.kb-ad-hero__orb--1 {
  width: 480px; height: 480px;
  background: #93c5fd;
  top: -180px; right: -100px;
}
.kb-ad-hero__orb--2 {
  width: 320px; height: 320px;
  background: #6366f1;
  bottom: -120px; left: 8%;
}
.kb-ad-hero__dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.kb-ad-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

/* Breadcrumb trail */
.kb-ad-hero__trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--atq-ease), transform 0.4s var(--atq-ease);
}
.kb-ad-hero__trail.kb-visible {
  opacity: 1;
  transform: translateY(0);
}
.kb-trail-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.15s;
}
.kb-trail-link:hover { color: #ffffff; text-decoration: none; }
.kb-trail-sep { color: rgba(255,255,255,0.45); font-size: 1rem; }
.kb-trail-current {
  color: rgba(255,255,255,0.9);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title */
.kb-ad-hero__title {
  font-size: clamp(1.625rem, 3.5vw, 2.375rem);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  transition-delay: 60ms;
}

/* Meta row */
.kb-ad-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition-delay: 120ms;
}
.kb-ad-meta-item {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 3px 12px;
  letter-spacing: 0.01em;
}
.kb-ad-meta-sep { color: rgba(255,255,255,0.35); }

/* ═══════════════════════════════════════════════════════════════
   ARTICLE DETAIL — Layout (two-column)
   ═══════════════════════════════════════════════════════════════ */
.kb-ad-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  max-width: min(1600px, 100%);
  margin: 40px auto 64px;
  padding: 0 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .kb-ad-layout {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}

/* ── Article body ─────────────────────────────────────────────── */
.kb-ad-body {
  background: var(--atq-surface);
  border: 1px solid var(--atq-border);
  border-radius: var(--atq-radius-lg);
  padding: 40px 44px;
  box-shadow: var(--atq-shadow);
  font-family: var(--atq-font);
  min-width: 0;
}
@media (max-width: 600px) { .kb-ad-body { padding: 24px 20px; } }

/* Rich-text content scoping */
.kb-ad-body h1, .kb-ad-body h2, .kb-ad-body h3,
.kb-ad-body h4, .kb-ad-body h5, .kb-ad-body h6 {
  color: var(--atq-text);
  font-family: var(--atq-font);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.75em 0 0.6em;
}
.kb-ad-body h1 { font-size: 1.75rem; margin-top: 0; border-bottom: 2px solid var(--atq-border); padding-bottom: 0.4em; }
.kb-ad-body h2 { font-size: 1.375rem; }
.kb-ad-body h3 { font-size: 1.125rem; }
.kb-ad-body h4 { font-size: 1rem; }
.kb-ad-body > :first-child { margin-top: 0 !important; }

.kb-ad-body p {
  color: var(--atq-text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1em;
}
.kb-ad-body a {
  color: var(--atq-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.kb-ad-body a:hover {
  color: var(--atq-primary-dark);
  border-bottom-color: var(--atq-primary);
  text-decoration: none;
}
html[data-theme="dark"] .kb-ad-body a:hover { border-bottom-color: var(--atq-accent); }

.kb-ad-body ul, .kb-ad-body ol {
  margin: 0 0 1em 1.5em;
  padding: 0;
  color: var(--atq-text-secondary);
  line-height: 1.75;
}
.kb-ad-body li { margin-bottom: 0.35em; }

.kb-ad-body strong, .kb-ad-body b { color: var(--atq-text); font-weight: 600; }
.kb-ad-body em { font-style: italic; }

/* Inline code */
.kb-ad-body code {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875em;
  background: var(--atq-bg);
  color: var(--atq-primary);
  border: 1px solid var(--atq-border);
  border-radius: 4px;
  padding: 1px 6px;
}
/* Code blocks */
.kb-ad-body pre {
  background: #0f172a;
  border-radius: var(--atq-radius-sm);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 0 0 1.25em;
  border: 1px solid rgba(255,255,255,0.07);
}
.kb-ad-body pre code {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 0.85rem;
  padding: 0;
  border-radius: 0;
}
html[data-theme="dark"] .kb-ad-body pre { background: #0a0a0a; }

/* Blockquote */
.kb-ad-body blockquote {
  margin: 1.25em 0;
  padding: 12px 20px 12px 18px;
  border-left: 4px solid var(--atq-primary);
  background: var(--atq-primary-light);
  border-radius: 0 var(--atq-radius-sm) var(--atq-radius-sm) 0;
  color: var(--atq-text-secondary);
  font-style: italic;
}
html[data-theme="dark"] .kb-ad-body blockquote {
  background: rgba(167,139,250,0.08);
  border-left-color: var(--atq-primary);
}

/* Tables */
.kb-ad-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0 0 1.25em;
  overflow: hidden;
  border-radius: var(--atq-radius-sm);
  border: 1px solid var(--atq-border);
}
.kb-ad-body thead tr { background: var(--atq-bg); }
.kb-ad-body thead th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--atq-text);
  border-bottom: 2px solid var(--atq-border);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kb-ad-body tbody tr { border-bottom: 1px solid var(--atq-border-light); }
.kb-ad-body tbody tr:last-child { border-bottom: none; }
.kb-ad-body tbody tr:hover { background: var(--atq-surface-raised); }
.kb-ad-body tbody td { padding: 10px 14px; color: var(--atq-text-secondary); vertical-align: top; }
html[data-theme="dark"] .kb-ad-body thead tr { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .kb-ad-body tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Images */
.kb-ad-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--atq-radius-sm);
  border: 1px solid var(--atq-border);
  margin: 0.5em 0;
  display: block;
}

/* Horizontal rule */
.kb-ad-body hr {
  border: none;
  border-top: 1px solid var(--atq-border);
  margin: 2em 0;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.kb-ad-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 88px;
}
@media (max-width: 900px) {
  .kb-ad-sidebar { position: static; }
}

/* Feedback card */
.kb-ad-feedback {
  background: var(--atq-surface);
  border: 1px solid var(--atq-border);
  border-radius: var(--atq-radius-lg);
  padding: 24px;
  box-shadow: var(--atq-shadow);
  transition-delay: 80ms;
}
.kb-ad-feedback__prompt {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--atq-text);
  margin: 0 0 16px;
  font-family: var(--atq-font);
}
.kb-ad-feedback__actions {
  display: flex;
  gap: 10px;
}
.kb-ad-feedback__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--atq-radius-sm);
  font-family: var(--atq-font);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--atq-border);
  background: var(--atq-surface);
  color: var(--atq-text-secondary);
  transition: all 0.18s var(--atq-ease);
}
.kb-ad-feedback__btn:hover {
  border-color: var(--atq-primary);
  color: var(--atq-primary);
  background: var(--atq-primary-light);
  transform: translateY(-1px);
}
.kb-ad-feedback__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.kb-ad-feedback__thanks {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--atq-success);
}

/* CTA card */
.kb-ad-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: var(--atq-radius-lg);
  padding: 28px 24px;
  color: #ffffff;
  box-shadow: var(--atq-shadow-md);
  transition-delay: 160ms;
}
html[data-theme="dark"] .kb-ad-cta {
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 100%);
}
.kb-ad-cta__glow {
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.kb-ad-cta__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin: 0 0 8px;
  font-family: var(--atq-font);
}
.kb-ad-cta__title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  font-family: var(--atq-font);
  line-height: 1.3;
}
.kb-ad-cta__body {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  margin: 0 0 20px;
  font-family: var(--atq-font);
}
.kb-ad-cta .kb-btn--primary {
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #ffffff;
  backdrop-filter: blur(8px);
  width: 100%;
  font-size: 0.9rem;
}
.kb-ad-cta .kb-btn--primary:hover {
  background: rgba(255,255,255,0.25);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY DETAIL — Article cards grid
   ═══════════════════════════════════════════════════════════════ */
#kbCatArticles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.kb-cd-article-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--atq-surface);
  border: 1px solid var(--atq-border);
  border-radius: var(--atq-radius);
  padding: 22px 24px;
  text-decoration: none;
  box-shadow: var(--atq-shadow);
  transition: transform 0.2s var(--atq-ease), box-shadow 0.2s var(--atq-ease),
              border-color 0.2s var(--atq-ease);
}
.kb-cd-article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--atq-shadow-lg);
  border-color: var(--atq-primary);
  text-decoration: none;
}
.kb-cd-article-card__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--atq-primary);
  margin: 0;
  font-family: var(--atq-font);
}
html[data-theme="dark"] .kb-cd-article-card__num { color: var(--atq-accent); }
.kb-cd-article-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--atq-text);
  margin: 0;
  line-height: 1.4;
  font-family: var(--atq-font);
  transition: color 0.15s;
}
.kb-cd-article-card:hover .kb-cd-article-card__title { color: var(--atq-primary); }
html[data-theme="dark"] .kb-cd-article-card:hover .kb-cd-article-card__title { color: var(--atq-accent); }
.kb-cd-article-card__desc {
  font-size: 0.875rem;
  color: var(--atq-text-muted);
  margin: 0;
  line-height: 1.55;
  font-family: var(--atq-font);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-cd-empty {
  grid-column: 1/-1;
  text-align: center;
  font-size: 1rem;
  color: var(--atq-text-muted);
  padding: 40px 24px;
  font-family: var(--atq-font);
}

/* ── Dark mode overrides ─────────────────────────────────────── */
html[data-theme="dark"] .kb-ad-body {
  background: var(--atq-surface);
  border-color: var(--atq-border);
}
html[data-theme="dark"] .kb-ad-feedback {
  background: var(--atq-surface);
  border-color: var(--atq-border);
}
html[data-theme="dark"] .kb-ad-feedback__btn {
  background: var(--atq-surface);
  border-color: var(--atq-border);
  color: var(--atq-text-secondary);
}
html[data-theme="dark"] .kb-ad-feedback__btn:hover {
  border-color: var(--atq-primary);
  color: var(--atq-primary);
  background: var(--atq-primary-light);
}
html[data-theme="dark"] .kb-cd-article-card {
  background: var(--atq-surface);
  border-color: var(--atq-border);
}
html[data-theme="dark"] .kb-cd-article-card:hover { border-color: var(--atq-primary); }
html[data-theme="dark"] .kb-ad-body code {
  background: rgba(255,255,255,0.06);
  color: var(--atq-accent);
  border-color: var(--atq-border);
}
html[data-theme="dark"] .kb-ad-body blockquote { color: var(--atq-text-secondary); }

/* ── KB search bar — prevent global dark-mode input overrides ── */
html[data-theme="dark"] #kbSearchInput,
html[data-theme="dark"] .kb-search-input,
html[data-theme="dark"] input.kb-search-input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .kb-search-bar,
html[data-theme="dark"] #kbSearchBar {
  border-radius: var(--kb-radius, 16px) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Case-deflection search bar — prevent global dark-mode input overrides ── */
html[data-theme="dark"] .case-deflection .input-group input.form-control,
html[data-theme="dark"] .case-deflection input.form-control.subject,
html[data-theme="dark"] input.form-control.case-deflection {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .case-deflection .input-group {
  background: var(--sp-surface-raised, #1a1a2e) !important;
  border: 1.5px solid var(--sp-border, rgba(255,255,255,0.10)) !important;
  border-radius: var(--sp-radius-sm, 12px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §DM-AUTH — DARK MODE: Auth Pages
   ══════════════════════════════════════════════════════════════════════════════
   Overrides the nuclear dark-mode strategy that forces dark backgrounds on
   .form-control, input, .btn, .card etc.  Uses the compound selector
   html.atq-auth-page[data-theme="dark"] for maximum specificity so these
   auth-scoped rules beat the global nuclear overrides above.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Form panel background — LINE grid matching choice screen aesthetic */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-panel {
  background-color: #0c1021 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

/* Auth card */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner #mainContent,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner #ContentContainer,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner #content-container,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .content-container {
  background: #141a2e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.25), 0 16px 48px rgba(0,0,0,0.3) !important;
  color: #e2e8f0 !important;
}

/* Card header */
html.atq-auth-page[data-theme="dark"] .atq-auth-card-hdr { border-bottom-color: rgba(255,255,255,0.08) !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-card-icon {
  background: linear-gradient(135deg, rgba(37,99,235,0.2) 0%, rgba(99,102,241,0.2) 100%) !important;
  border-color: rgba(99,102,241,0.3) !important;
  color: #60a5fa !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-card-title { color: #f1f5f9 !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-card-sub { color: #94a3b8 !important; }

/* Tab bar pills */
html.atq-auth-page[data-theme="dark"] .atq-auth-tabs.nav { background: rgba(255,255,255,0.06) !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-tab-link { color: #94a3b8 !important; background: transparent !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-tab-item.active .atq-auth-tab-link,
html.atq-auth-page[data-theme="dark"] .atq-auth-tab-link.active {
  background: rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-tab-link:hover { background: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; }

/* Form labels */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .control-label,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .col-form-label,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-label { color: #cbd5e1 !important; }

/* Form controls — override nuclear Custom.css overrides */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-control {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #f1f5f9 !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
  background: rgba(255,255,255,0.08) !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-control::placeholder { color: #64748b !important; }
/* Override nuclear input override */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner input {
  background-color: rgba(255,255,255,0.06) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner input:focus {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: #3b82f6 !important;
}

/* Submit button — keep blue gradient, override nuclear purple */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .btn-primary,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1e50d0 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.35), 0 4px 12px rgba(37,99,235,0.3) !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #fff !important;
}

/* Microsoft SSO button */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .atq-ms-sso-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #f1f5f9 !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .atq-ms-sso-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(99,102,241,0.5) !important;
  color: #ffffff !important;
}
html.atq-auth-page[data-theme="dark"] .atq-ms-label { color: #f1f5f9 !important; }

/* Dividers & separators */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner [id*="ExternalLogin"],
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner [id*="externalLogin"],
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner [class*="external-login"],
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner form[action*="ExternalLogin"] {
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* Checkbox / Remember me */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .checkbox label,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-check-label { color: #94a3b8 !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .checkbox input[type="checkbox"],
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-check-input {
  accent-color: #3b82f6 !important;
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Forgot password & action links */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .actions a,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner a[href*="password"],
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner a[href*="forgot"] {
  color: #60a5fa !important;
  background: none !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .actions a:hover,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner a[href*="password"]:hover {
  color: #93c5fd !important;
  background: none !important;
}

/* Forgot-password helper note */
html.atq-auth-page[data-theme="dark"] .atq-forgot-note {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #94a3b8 !important;
}

/* Validation errors */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .alert-danger {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.25) !important;
  color: #fca5a5 !important;
}
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .has-error .form-control,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-control.is-invalid { border-color: #ef4444 !important; }

/* Redeem invitation */
/* Dark theme: redeem code preview chip */
html.atq-auth-page[data-theme="dark"][data-atq-auth-type="redeem"] .atq-auth-form-inner .alert.alert-info,
html.atq-auth-page[data-theme="dark"][data-atq-auth-type="redeem"] .atq-auth-form-inner .invitation-code,
html.atq-auth-page[data-theme="dark"][data-atq-auth-type="redeem"] .atq-auth-form-inner blockquote {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.35) !important;
}
html.atq-auth-page[data-theme="dark"][data-atq-auth-type="redeem"] .atq-auth-form-inner .alert.alert-info strong {
  color: rgba(255,255,255,0.35) !important;
}
html.atq-auth-page[data-theme="dark"][data-atq-auth-type="redeem"] .atq-auth-form-inner .alert.alert-info::after,
html.atq-auth-page[data-theme="dark"][data-atq-auth-type="redeem"] .atq-auth-form-inner blockquote::after {
  background: linear-gradient(to bottom, transparent, rgba(15,23,42,0.95)) !important;
}
html.atq-auth-page[data-theme="dark"] .atq-redeem-divider span { color: #64748b !important; }
html.atq-auth-page[data-theme="dark"] .atq-redeem-divider::before,
html.atq-auth-page[data-theme="dark"] .atq-redeem-divider::after { background: rgba(255,255,255,0.08) !important; }
html.atq-auth-page[data-theme="dark"] .atq-redeem-label { color: #94a3b8 !important; }
html.atq-auth-page[data-theme="dark"] .atq-redeem-input {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #f1f5f9 !important;
}
html.atq-auth-page[data-theme="dark"] .atq-redeem-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}

/* Back button */
html.atq-auth-page[data-theme="dark"] .atq-auth-back-btn { color: #94a3b8 !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-back-btn:hover { color: #60a5fa !important; }

/* Nuclear override neutralizers — scoped to auth form */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner a { color: #60a5fa !important; background: none !important; border: none !important; }
/* Nuclear override neutralizers — scoped to auth form, excluding SSO + submit */
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .btn:not(.atq-ms-sso-btn):not(.btn-primary) { background-color: transparent !important; border-color: transparent !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner p,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner span,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner label { color: #cbd5e1 !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .text-danger,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .field-validation-error,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .invalid-feedback { color: #fca5a5 !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .control-label .required,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .col-form-label .required,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-label .required { color: #f87171 !important; }
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .checkbox a,
html.atq-auth-page[data-theme="dark"] .atq-auth-form-inner .form-check a { color: #60a5fa !important; }

/* §DM-AUTH-NAV ── Hide navbar/footer on auth pages ────────────────────────── */
html.atq-auth-page .navbar,
html.atq-auth-page .navbar-dark,
html.atq-auth-page .navbar-expand-xl,
html.atq-auth-page .navbar-static-top,
html.atq-auth-page div[role="banner"],
html.atq-auth-page footer,
html.atq-auth-page .atq2-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}