/* CRM phone: nav → logo container → img | same midline as avatar
   + do NOT force-show .hidden-mobile / idle timer
   marker: nx-mobtopalign-20260914d */
@media (max-width: 767.98px) {
  /* 1) NAV row */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar > nav.navbar.top-navbar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) .nx-midnight-right-panel > header.topbar > nav.top-navbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
  }

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

  /* 2) LOGO CONTAINER */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #topnav-logo-container.navbar-header,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #topnav-logo-container {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: 48px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 6px 0 10px !important;
    border: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 3) WRAPPER */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #topnav-logo-container > .sidenav-menu-item.logo,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #topnav-logo-container > .sidenav-menu-item.logo.m-t-0,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #topnav-logo-container .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* 4) IMG */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #topnav-logo-container img.logo-small {
    display: block !important;
    width: auto !important;
    height: 36px !important;
    max-height: 36px !important;
    max-width: 40px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
  }

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

  /* RIGHT collapse band */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #main-top-nav-bar.navbar-collapse,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #main-top-nav-bar {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    align-self: center !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    border: 0 !important;
  }

  /* Only flex the UL — never force every .nav-item visible (broke .hidden-mobile) */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #main-top-nav-bar > ul.navbar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: normal !important;
  }

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

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin:not(.settings) header.topbar #main-top-nav-bar .nav-item.u-pro > a.profile-pic img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important;
  }

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

/* Phone + tablet: keep only search / settings / notif / messages / avatar (+ timer if running) */
@media (max-width: 1023.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.hidden-mobile,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #main-top-nav-bar .nav-item.hidden-mobile,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-calculator-trigger,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-quick-access-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-record-time-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-language-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-fullscreen-trigger,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nx-operator-status-topnav-item,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.search-box,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container.hidden,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container.hidden-forced {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Active timer only: compact chip, never overlaps neighbors */
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden):not(.hidden-forced) {
    display: list-item !important;
    visibility: visible !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 2px !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    flex: 0 0 auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    width: auto !important;
    min-width: 2.75rem !important;
    max-width: 5.5rem !important;
    height: 2.75rem !important;
    padding: 0 0.35rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) .timer-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) .topnav-my-timesheets-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) .topnav-my-timesheets-icon > svg {
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) .my-timer-time-topnav,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) .font-18 {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 3.25rem !important;
  }
}

/* Phone + tablet: settings next to notifications; phone also shows mobile search */
@media (max-width: 1023.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin #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;
  }
}

/* Phone: desktop search pill off; mobile search icon on */
@media (max-width: 767.98px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nav-item.top-search-bar,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .top-search-bar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    pointer-events: none !important;
  }

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

/* Desktop midnight too: no calculator / starred(+) / extras crowding the right cluster */
@media (min-width: 1024px) {
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-calculator-trigger,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar li.nav-item:has(#topnav-calculator-trigger),
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-quick-access-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar li.nav-item:has(#topnav-quick-access-icon),
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-record-time-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar li.nav-item:has(#topnav-record-time-icon),
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-language-icon,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar #topnav-fullscreen-trigger,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .nx-operator-status-topnav-item,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container.hidden,
  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container.hidden-forced {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden):not(.hidden-forced) {
    display: list-item !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    width: auto !important;
    max-width: 6rem !important;
    padding: 0 0.4rem !important;
    overflow: hidden !important;
  }

  :is(html[data-bs-theme="midnight"], html.midnight:not(.AUR):not(.aur))
    body.loggedin .topbar .my-timer-container:not(.hidden) .my-timer-time-topnav {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
}