/* Midnight mobile top search + premium search modal
   marker: nx-mobsearch-20260914d */

/* Desktop/tablet pill: SVG search glyph (same family as bell) */
.topbar .top-search-bar .top-search-container .topnav-search-icon,
#main-top-nav-bar .top-search-bar .top-search-container .topnav-search-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
.topbar .top-search-bar .top-search-container .topnav-search-icon::before,
.topbar .top-search-bar .top-search-container .topnav-search-icon::after,
#main-top-nav-bar .top-search-bar .top-search-container .topnav-search-icon::before,
#main-top-nav-bar .top-search-bar .top-search-container .topnav-search-icon::after {
  content: none !important;
  display: none !important;
}
.topbar .top-search-bar .top-search-container .topnav-search-icon > svg,
#main-top-nav-bar .top-search-bar .top-search-container .topnav-search-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Search modal — plain midnight palette (#121212 / platinum), not glass #272c33
   -------------------------------------------------------------------------- */
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal.search-modal .modal-content {
  background: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(197, 205, 216, 0.06),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04) !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal.search-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #121212 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px 16px 0 0 !important;
  /* 16px inset all sides — field must sit inside the card */
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Kill Bootstrap .row negative gutters that pull the field out of the card */
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field .form-group,
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field .form-group.row {
  display: block !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field .col-12,
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field .x-search-field-container,
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header #global-search-form {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-body.search-modal-container {
  background: #121212 !important;
  color: rgba(245, 248, 255, 0.88) !important;
  padding: 16px 16px 20px !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal #global-search-field,
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field .form-control {
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #1a1a1a !important;
  color: rgba(245, 248, 255, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal #global-search-field:focus,
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field .form-control:focus {
  border-color: rgba(197, 205, 216, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(197, 205, 216, 0.18) !important;
  background: #141414 !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .x-search-field i.sl-icon-magnifier {
  color: rgba(197, 205, 216, 0.72) !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-header .close,
:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal.search-modal .modal-header button.close {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  /* theme sets absolute right:20px — that leaves the field full-bleed left */
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(245, 248, 255, 0.72) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-modal-message .x-holder-start {
  text-align: center !important;
  padding: 48px 12px 56px !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-modal-message .x-holder-start img {
  max-width: 140px !important;
  opacity: 0.85 !important;
  margin-bottom: 18px !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-modal-message .x-holder-start h5 {
  color: rgba(245, 248, 255, 0.92) !important;
  opacity: 1 !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-modal-message .x-holder-start h6 {
  color: rgba(198, 206, 220, 0.72) !important;
  opacity: 1 !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-categories .x-each-category {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(245, 248, 255, 0.9) !important;
  border-radius: 12px !important;
}

:is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-categories .x-each-category:hover {
  background: rgba(197, 205, 216, 0.1) !important;
  border-color: rgba(197, 205, 216, 0.28) !important;
}

/* --------------------------------------------------------------------------
   Mobile only: search lives in #right-topnav-navbar (same nav-link as bell/chat)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nx-topnav-mobile-search-item {
    display: none !important;
  }
}

/* Tablet + phone: settings icon next to notifications (desktop uses #topnav-settings-link ≥1024) */
@media (max-width: 1023.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nx-topnav-mobile-settings-item {
    display: list-item !important;
    visibility: visible !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Icon chrome (was phone-only — tablet had empty hit target) */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    font-size: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    color: inherit !important;
    position: relative !important;
    box-sizing: content-box !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon::before,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon::after {
    content: none !important;
    display: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon > svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    shape-rendering: geometricPrecision !important;
  }
}

@media (min-width: 1024px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nx-topnav-mobile-settings-item {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  /* Hide left pill/search cluster — right-nav link is the only search control */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-navbar .navbar-nav > .nav-item.top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #main-top-nav-bar .top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #main-top-nav-bar .top-search-bar.top-search-bar--with-eye {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nx-topnav-mobile-search-item,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nx-topnav-mobile-settings-item {
    display: list-item !important;
    visibility: visible !important;
  }

  /* Same 1em SVG chrome as notifications / messages */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-search-link .topnav-search-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    font-size: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    color: inherit !important;
    position: relative !important;
    box-sizing: content-box !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-search-link .topnav-search-icon::before,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-search-link .topnav-search-icon::after,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon::before,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon::after {
    content: none !important;
    display: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-search-link .topnav-search-icon > svg,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #topnav-mobile-settings-link .topnav-settings-icon > svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    shape-rendering: geometricPrecision !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #main-top-nav-bar > ul.navbar-top-right {
    margin-left: auto !important;
  }

  /* Avatar-only account control: 36px face, ≥44px hit */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-navbar .navbar-nav > .nav-item.u-pro > a.nav-link.profile-pic {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    max-width: 2.75rem !important;
    max-height: 2.75rem !important;
    padding: 0 !important;
    margin: 0 0.12rem !important;
    gap: 0 !important;
    border-radius: 50% !important;
    border: 1px solid transparent !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-navbar .navbar-nav > .nav-item.u-pro > a.nav-link.profile-pic img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-navbar .navbar-nav > .nav-item.u-pro > a.nav-link.profile-pic:hover,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-navbar .navbar-nav > .nav-item.u-pro > a.nav-link.profile-pic:focus,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    .topbar .top-navbar .navbar-nav > .nav-item.u-pro.show > a.nav-link.profile-pic {
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  /* Search modal: even insets on phone */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal.search-modal {
    padding: 16px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal #searchModalContainer.modal-dialog,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-dialog {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal.search-modal .modal-content {
    max-height: calc(100vh - 32px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal.search-modal .modal-header {
    padding: 16px !important;
    gap: 12px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .modal-body.search-modal-container {
    padding: 16px !important;
    max-height: calc(100vh - 128px) !important;
    overflow-y: auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur)) #searchModal .search-modal-message .x-holder-start {
    padding: 36px 8px 48px !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet 768–1023: 70px topbar band
   Phone ≤767: heights come from phone blocks below (56px) — do NOT set 70 here
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar {
    position: relative !important;
    overflow: visible !important;
    min-height: 70px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar {
    align-items: stretch !important;
    min-height: 70px !important;
    height: 70px !important;
    width: 100% !important;
  }

  /* Kill partial seam on collapse only — it stopped at the logo column */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel .topbar #main-top-nav-bar {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    align-self: stretch !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar .navbar-header {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .logo-small {
    max-height: 36px !important;
    max-width: 40px !important;
    min-height: 36px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Tablet search: same pill width as desktop (16–22rem), do not flex-grow to full bar */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #main-top-nav-bar .top-search-bar {
    flex: 0 1 22rem !important;
    width: auto !important;
    max-width: 22rem !important;
    min-width: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-search-bar .top-search-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #main-top-nav-bar .top-search-bar .top-search-container {
    min-width: 14rem !important;
    max-width: 22rem !important;
    width: 100% !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-search-bar .top-search-container input,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #top-search-form.form-control,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #main-top-nav-bar #top-search-form.form-control {
    max-width: 100% !important;
  }

  /* Settings tablet only: compact search ≈ placeholder width (phone ≤767 untouched) */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings .topbar .top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings #main-top-nav-bar .top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings .topbar .top-search-bar.top-search-bar--with-eye {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 9rem !important;
    min-width: 0 !important;
  }
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings .topbar .top-search-bar .top-search-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings #main-top-nav-bar .top-search-bar .top-search-container {
    flex: 0 0 auto !important;
    width: 7.25rem !important;
    min-width: 7.25rem !important;
    max-width: 7.25rem !important;
  }
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings .topbar #top-search-form.form-control,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings #main-top-nav-bar #top-search-form.form-control {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1023.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar {
    position: relative !important;
    overflow: visible !important;
  }

  /* Topnav hairline only when drawer closed — open sheet keeps its own full-width edge */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.show-sidebar) .topbar::after,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.show-sidebar) .nx-midnight-right-panel > .topbar::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    pointer-events: none !important;
    z-index: 8 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.show-sidebar .topbar::after,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.show-sidebar .nx-midnight-right-panel > .topbar::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: transparent !important;
  }
}

/* --------------------------------------------------------------------------
   Phone: premium account sheet (app-ready)
   - Solid sheet above dimmed content (never glass-through-scrim)
   - Scrim only on page content, not on the sheet
   - Page scroll locked while open
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel {
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar.nx-modern-topnav,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar {
    z-index: 2000 !important;
    position: relative !important;
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .page-wrapper,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .page-wrapper {
    z-index: 1 !important;
    position: relative !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-nav.navbar-top-right {
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar .navbar-nav > .nav-item.u-pro,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar .navbar-nav > .nav-item.u-pro.show {
    position: static !important;
    z-index: 2010 !important;
  }

  /* Kill old panel / page-wrapper scrims that darkened the sheet itself */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:has(.nav-item.u-pro.show) .nx-midnight-right-panel::after,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.nx-account-sheet-open .nx-midnight-right-panel::after,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.nx-account-sheet-open .nx-midnight-right-panel > .page-wrapper::before,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:has(.nav-item.u-pro.show) .nx-midnight-right-panel > .page-wrapper::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  /* Light body-level scrim — BELOW portaled sheet */
  #nx-account-sheet-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.38);
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  #nx-account-sheet-scrim.is-open {
    display: block;
  }

  /* Portaled host + sheet — brightest layer */
  #nx-account-sheet-host {
    position: fixed;
    inset: 0;
    z-index: 10060;
    pointer-events: none;
  }

  #nx-account-sheet-host > .dropdown-menu,
  #nx-account-sheet-host > .dropdown-menu.show {
    position: fixed !important;
    top: calc(70px + env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(72dvh, calc(100dvh - 70px - env(safe-area-inset-top, 0px) - 28px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 10061 !important;
    pointer-events: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: #161616 !important;
    background-color: #161616 !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  #nx-account-sheet-host ul.dropdown-user {
    list-style: none !important;
    list-style-type: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 8px !important;
    background: #161616 !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li::marker,
  #nx-account-sheet-host ul.dropdown-user > li::before,
  #nx-account-sheet-host ul.dropdown-user > li::after {
    content: none !important;
    display: none !important;
  }

  #nx-account-sheet-host ul.dropdown-user .dw-user-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 4px 18px 16px !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-img,
  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-img img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }

  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-text h4 {
    margin: 0 0 4px !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }

  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-text p,
  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-text .text-muted {
    margin: 0 0 10px !important;
    font-size: 0.8125rem !important;
    color: rgba(245, 248, 255, 0.7) !important;
  }

  #nx-account-sheet-host ul.dropdown-user .dw-user-box .u-text .btn {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  #nx-account-sheet-host ul.dropdown-user li.divider {
    display: block !important;
    width: auto !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 8px 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    list-style: none !important;
  }

  #nx-account-sheet-host ul.dropdown-user li.divider::before,
  #nx-account-sheet-host ul.dropdown-user li.divider::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
  }

  /* Standard mobile row: 48px hit target, fixed icon rail */
  #nx-account-sheet-host ul.dropdown-user > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: normal !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li > a:active {
    background: rgba(255, 255, 255, 0.07) !important;
  }

  /* One icon slot — kill absolute/float leftovers that left “ghost” glyphs on the left edge */
  #nx-account-sheet-host ul.dropdown-user > li > a > i,
  #nx-account-sheet-host ul.dropdown-user > li > a > span,
  #nx-account-sheet-host ul.dropdown-user > li > a > .ti,
  #nx-account-sheet-host ul.dropdown-user > li > a > .fa,
  #nx-account-sheet-host ul.dropdown-user > li > a > [class*="topnav-"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 1.375rem !important;
    width: 1.375rem !important;
    min-width: 1.375rem !important;
    max-width: 1.375rem !important;
    height: 1.375rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    color: rgba(197, 205, 216, 0.92) !important;
    overflow: visible !important;
    transform: none !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li > a > i::before,
  #nx-account-sheet-host ul.dropdown-user > li > a > span::before,
  #nx-account-sheet-host ul.dropdown-user > li > a [class^="ti-"]::before,
  #nx-account-sheet-host ul.dropdown-user > li > a [class*=" ti-"]::before,
  #nx-account-sheet-host ul.dropdown-user > li > a .fa::before {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li > a svg,
  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-notifications-icon > svg,
  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-my-timesheets-icon > svg {
    display: block !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    min-width: 1.2rem !important;
    min-height: 1.2rem !important;
    max-width: 1.2rem !important;
    max-height: 1.2rem !important;
    margin: 0 !important;
    flex: none !important;
    fill: currentColor !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-notifications-icon,
  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-my-timesheets-icon {
    display: inline-flex !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    font-size: 1.2rem !important;
  }

  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-notifications-icon::before,
  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-my-timesheets-icon::before,
  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-notifications-icon::after,
  #nx-account-sheet-host ul.dropdown-user > li > a .topnav-my-timesheets-icon::after {
    content: none !important;
    display: none !important;
  }

  /* Scroll lock while account sheet open */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    html.nx-account-sheet-open,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.nx-account-sheet-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.nx-account-sheet-open .nx-midnight-right-panel > .page-wrapper {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* In-topbar profile dropdown is never painted on phone (see ban below) */

  /* Phone: NEVER show profile menu under avatar (tiny corner card).
     Only the portaled #nx-account-sheet-host sheet may be visible. */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nav-item.u-pro > .dropdown-menu,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nav-item.u-pro.show > .dropdown-menu,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.u-pro > .dropdown-menu.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  #nx-account-sheet-host > .dropdown-menu,
  #nx-account-sheet-host > .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    max-height: min(72dvh, calc(100dvh - 70px - env(safe-area-inset-top, 0px) - 28px)) !important;
    clip: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* HARD: never show account sheet leftovers under modals / media */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.modal-open #nx-account-sheet-host,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.modal-open #nx-account-sheet-scrim,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.nx-media-offcanvas-open #nx-account-sheet-host,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.nx-media-offcanvas-open #nx-account-sheet-scrim,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.modal-open .nav-item.u-pro > .dropdown-menu,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.modal-open .nav-item.u-pro.show > .dropdown-menu,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.nx-media-offcanvas-open .nav-item.u-pro > .dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* Keep topnav bright while sheet is open (transparent topbar was showing scrim through) */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.nx-account-sheet-open .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin.nx-account-sheet-open .nx-midnight-right-panel > .topbar {
    background: #121212 !important;
    background-color: #121212 !important;
    z-index: 10040 !important;
  }

  /* Modals above account sheet; media manager above commonModal */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .modal-backdrop {
    z-index: 10070 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .modal,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #searchModal,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #actionsModal,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #plainModal,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #dynamicModal {
    z-index: 10080 !important;
  }

  /* Media manager opens FROM avatar/commonModal — must sit above it */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvasBackdrop,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvasBackdrop.show {
    z-index: 10090 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas.show {
    z-index: 10100 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas .tt-media-select {
    z-index: 10105 !important;
    width: calc(100% - 32px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    left: 50% !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .noty_layout_topRight,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .noty_layout_center,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .noty_bar {
    z-index: 10120 !important;
  }

  /* Common modal — phone insets, full usable width, scroll body */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal.modal {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-dialog,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal #commonModalContainer,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-dialog.modal-sm,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-dialog.modal-lg,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-dialog.modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: #121212 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal #commonModalHeader,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-header {
    flex: 0 0 auto !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal #commonModalBody,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal #commonModalFooter,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModal .modal-footer {
    flex: 0 0 auto !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 8px !important;
  }

  /* Avatar modal content breathing room on phone */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModalBody .splash-image {
    margin: 0 auto 12px !important;
    max-width: 160px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModalBody .splash-image img {
    max-width: 100% !important;
    height: auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModalBody .choose-media:not(.avatar):not(.nx-choose-media),
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #commonModalBody [data-legacy-profile="avatar"]:not(.avatar) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Media sheet height + padding on phone */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas.show {
    height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
    max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas .offcanvas-header {
    padding: 14px 16px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas .offcanvas-body {
    padding: 14px 16px 5.5rem !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    #nxMediaOffcanvas .tt-media-wrap {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    grid-gap: 0.75rem !important;
  }

  /* Kill Bootstrap tooltips on touch phones */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .tooltip {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Phone topnav: one row, one color (#121212), no logo-column “black holes”
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar.nx-modern-topnav,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar .navbar-header,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .sidenav-menu-item.logo,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .navbar-brand,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .header-overlay {
    background: #121212 !important;
    background-color: #121212 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar {
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar .navbar-header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 6px 0 8px !important;
    gap: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar .navbar-header {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 40px !important;
    padding: 0 2px 0 4px !important;
    margin: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .logo-small {
    max-height: 36px !important;
    max-width: 40px !important;
    width: auto !important;
    height: auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .logo-large {
    display: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2px 0 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar > ul.navbar-nav.mr-auto {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar > ul.navbar-top-right {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar > ul.navbar-top-right > .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nx-aur-corner-decor {
    display: none !important;
  }

  /* page content matches topbar — no band shift under header */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel.nx-settings-right-panel {
    background: #121212 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .page-wrapper,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #settings-wrapper.page-wrapper {
    padding-top: 56px !important;
  }
}
/* --------------------------------------------------------------------------
   LAST: phone topbar height lock — hairline = true bottom of #main-top-nav-bar
   (was: .topbar 56px + collapse 70px → strip floated above the bar edge)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .nx-midnight-right-panel > .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-collapse.header-overlay,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar.navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .navbar-header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar {
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar > ul.navbar-nav {
    align-items: center !important;
  }

  /* Hairline glued to shared bottom edge */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.show-sidebar) .topbar::after,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.show-sidebar) .nx-midnight-right-panel > .topbar::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 1px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    pointer-events: none !important;
    z-index: 8 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .page-wrapper,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #settings-wrapper.page-wrapper {
    padding-top: 56px !important;
  }
}
/* Phone premium: 44px hits, CRM logo keep 36px + centerline with avatar (no shrink) */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar {
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .sidenav-menu-item.logo,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .navbar-brand,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar > ul.navbar-nav,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar > ul.navbar-top-right,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.u-pro {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container {
    max-width: 48px !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-logo-container .sidenav-menu-item.logo.m-t-0 {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* CRM: keep wing PNG at original 36px optical — never below */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container .logo-small {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    max-width: 40px !important;
    max-height: 36px !important;
    object-fit: contain !important;
  }

  /* Settings topnav logo (if shown): same optical band, still centered */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.settings .topbar #topnav-logo-container .logo-small {
    width: auto !important;
    height: auto !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  /* Premium hit ≥44px; glyph ~22–24 inside */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-link:not(.profile-pic) {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    font-size: 1.375rem !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-link:not(.profile-pic) .topnav-search-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-link:not(.profile-pic) .topnav-settings-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-link:not(.profile-pic) > i,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-link:not(.profile-pic) > svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
    font-size: 1.375rem !important;
    line-height: 1 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.u-pro > a.nav-link.profile-pic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    max-width: 2.75rem !important;
    max-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.u-pro > a.nav-link.profile-pic img {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    max-width: 2.25rem !important;
    max-height: 2.25rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
}
/* CRM phone: beat custom.css :not(.settings) height:70px on logo column (Settings already 56) */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar .top-navbar .navbar-header,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings).nx-midnight-premium-shell .topbar #topnav-logo-container {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container .sidenav-menu-item.logo,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    height: auto !important;
    line-height: 0 !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container .logo-small {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }
}
/* FINAL CRM phone: nav must be 56 (was stuck at 70) — logo + avatar same midline to hairline */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .nx-midnight-right-panel > .topbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar .top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar .navbar.top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #main-top-nav-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar .navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar .navbar-header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar .top-navbar {
    display: flex !important;
    align-items: center !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .topbar #topnav-logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 4px 0 8px !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .page-wrapper {
    padding-top: 56px !important;
  }
}