/* Screen LMS Hotfix 244
   Final mobile shell override in a new asset so iOS Safari cannot reuse the
   earlier cumulative stylesheet while authenticated markup has already moved
   to the new utility-bar structure. */

.mobile-utility-label {
  display: none !important;
}

@media (max-width: 1100px) {
  :root {
    --hf244-mobile-gutter: 14px;
  }

  body {
    background: #f5f8fc !important;
  }

  /* Keep the whole application shell on the same responsive breakpoint as
     the compact header.  The legacy shell only collapsed below 900px, which
     left 901-1100px layouts with both a flex sidebar and the desktop main
     margin.  That reserved the navigation width twice and pushed the header
     and page content off-screen. */
  .shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* One compact application bar: product identity plus icon-only menu. */
  .sidebar,
  aside.sidebar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    flex: none !important;
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid #e1e8f1 !important;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  }

  #main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
  .sidebar .brand {
    min-height: 64px !important;
    padding: 9px 68px 9px 14px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
  }
  .sidebar .brand .screen-lms-sidebar-mark,
  .sidebar .brand .mark,
  .sidebar .brand .brand-mark,
  .sidebar .brand > span:first-child,
  .sidebar .brand > div:first-child {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
  }
  .sidebar .screen-lms-brand-copy,
  .sidebar .screen-lms-brand-copy strong,
  .sidebar .screen-lms-brand-copy span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .sidebar .screen-lms-brand-copy strong {
    font-size: .98rem !important;
  }
  .mobile-menu-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 1003 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }
  .mobile-menu-toggle .mobile-menu-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .mobile-menu-toggle .mobile-menu-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  /* The drawer remains compact and independently scrollable when open. */
  .sidebar.mobile-open #mainSidebarMenu,
  .sidebar.mobile-open .sidebar-scroll,
  .sidebar.mobile-open .lms-sidebar-scroll {
    max-height: min(62dvh, calc(100dvh - 150px)) !important;
    padding: 8px 12px 10px !important;
    overflow: auto !important;
    border-top: 1px solid #e6edf5 !important;
    background: #fbfdff !important;
  }
  .sidebar.mobile-open .side-nav,
  .sidebar.mobile-open nav.side-nav {
    gap: 8px !important;
    padding-bottom: 4px !important;
  }
  .sidebar.mobile-open .side-nav a,
  .sidebar.mobile-open .nav-details a,
  .sidebar.mobile-open .nav-details summary,
  .sidebar.mobile-open .logout-link {
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    gap: 9px !important;
    border-radius: 11px !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  /* Search first, followed by one coherent account utility row. */
  #main-content > header {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px var(--hf244-mobile-gutter) 12px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
    border-bottom: 1px solid #e5ebf3 !important;
  }
  #main-content > header .header-brand-line {
    display: none !important;
  }
  #main-content > header .global-page-search {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #main-content > header .global-page-search-box {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border: 1px solid #d6e1ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .045) !important;
  }
  #main-content > header .global-page-search input {
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
  }
  #main-content > header .top-links {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
  }
  #main-content > header .top-links > a:not(.top-upgrade-link),
  #main-content > header .top-notification-widget,
  #main-content > header .mobile-header-logout-form,
  #main-content > header .top-profile-widget {
    position: static !important;
    inset: auto !important;
    order: initial !important;
    grid-column: auto !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #main-content > header .mobile-header-logout-form {
    display: block !important;
  }
  #main-content > header .top-links > a:not(.top-upgrade-link),
  #main-content > header .top-notification-button,
  #main-content > header .top-profile-widget,
  #main-content > header .mobile-header-logout-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 6px 3px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  #main-content > header .top-links > a:not(.top-upgrade-link):hover,
  #main-content > header .top-links > a:not(.top-upgrade-link):focus-visible,
  #main-content > header .top-notification-button:hover,
  #main-content > header .top-notification-button:focus-visible,
  #main-content > header .mobile-header-logout-button:hover,
  #main-content > header .mobile-header-logout-button:focus-visible {
    background: #eef5ff !important;
    color: #1d4ed8 !important;
    outline: none !important;
  }
  #main-content > header .mobile-header-logout-button:hover,
  #main-content > header .mobile-header-logout-button:focus-visible {
    background: #fff1f2 !important;
    color: #be123c !important;
  }
  #main-content > header .top-links .nav-icon,
  #main-content > header .top-notification-button .nav-icon,
  #main-content > header .mobile-header-logout-button .nav-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
  #main-content > header .top-links > a:not(.top-profile-widget):not(.top-upgrade-link) > span:not(.nav-attention-badge),
  #main-content > header .mobile-header-logout-button > span,
  #main-content > header .mobile-utility-label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    font-size: .6rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
  }
  #main-content > header .top-profile-widget .top-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: .68rem !important;
  }
  #main-content > header .top-profile-widget .top-profile-text,
  #main-content > header .top-profile-widget .top-progress {
    display: none !important;
  }
  #main-content > header .top-upgrade-link {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
  #main-content > header .top-notification-dropdown {
    position: fixed !important;
    top: 145px !important;
    left: var(--hf244-mobile-gutter) !important;
    right: var(--hf244-mobile-gutter) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 160px) !important;
    overflow: auto !important;
  }
  #main-content > header .global-page-results {
    position: fixed !important;
    top: 72px !important;
    left: var(--hf244-mobile-gutter) !important;
    right: var(--hf244-mobile-gutter) !important;
    width: auto !important;
    max-height: calc(100dvh - 92px) !important;
  }

  /* Compact mobile content controls instead of full-width stacked cards. */
  #main-content > .content {
    padding: 18px var(--hf244-mobile-gutter) 82px !important;
  }
  #main-content > .content .clutter-toolbar,
  #main-content > .content > .clutter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
  }
  #main-content > .content .clutter-toolbar .btn {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    font-size: .76rem !important;
    line-height: 1.15 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04) !important;
  }

  /* Higher specificity than the authenticated chat styles rendered later. */
  body .screen-chat-launcher {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 12px 30px rgba(29, 78, 216, .28) !important;
  }
  body .screen-chat-launcher::before {
    content: "\1F4AC";
    font-size: 1.16rem !important;
    line-height: 1 !important;
  }
  body .screen-chat-launcher .dot,
  body .screen-chat-launcher .live-label {
    display: none !important;
  }
  body.mobile-nav-open .screen-chat-launcher {
    display: none !important;
  }
}

/* Wide laptop and desktop header: fixed regions that cannot overlap. */
@media (min-width: 1101px) {
  #main-content > header {
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) minmax(210px, 460px) minmax(320px, max-content) !important;
    align-items: center !important;
    gap: clamp(12px, 1.25vw, 22px) !important;
    min-width: 0 !important;
    padding: 10px clamp(18px, 2.2vw, 34px) !important;
    overflow: visible !important;
  }
  #main-content > header .header-brand-line {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  #main-content > header .header-screen-lms-logo {
    flex: 1 1 auto !important;
    min-width: 108px !important;
    max-width: 250px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  #main-content > header .timezone-status-chip {
    flex: 0 1 185px !important;
    min-width: 0 !important;
    max-width: 185px !important;
  }
  #main-content > header .global-page-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 460px !important;
    margin: 0 !important;
    justify-self: center !important;
  }
  #main-content > header .global-page-search-box {
    width: 100% !important;
    min-width: 0 !important;
  }
  #main-content > header .top-links {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 320px !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  #main-content > header .top-links > a:not(.top-profile-widget):not(.top-upgrade-link),
  #main-content > header .top-notification-widget,
  #main-content > header .top-notification-button {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 42px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }
  #main-content > header .top-notification-widget {
    padding: 0 !important;
  }
  #main-content > header .top-notification-button .mobile-utility-label {
    display: inline !important;
    color: inherit !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
  }
  #main-content > header .top-profile-widget .mobile-utility-label {
    display: none !important;
  }
  #main-content > header .top-profile-widget {
    position: relative !important;
    inset: auto !important;
    order: initial !important;
    flex: 0 1 clamp(205px, 17vw, 270px) !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    width: clamp(205px, 17vw, 270px) !important;
    min-width: 205px !important;
    max-width: 270px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 5px 11px 5px 6px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }
  #main-content > header .top-profile-widget .top-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  #main-content > header .top-profile-widget .top-profile-text {
    display: grid !important;
    min-width: 0 !important;
  }
  #main-content > header .top-profile-widget .top-profile-text strong,
  #main-content > header .top-profile-widget .top-profile-text em {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #main-content > header .mobile-header-logout-form {
    display: none !important;
  }
  #main-content > header .top-notification-dropdown {
    right: 0 !important;
    left: auto !important;
  }
}