/* Screen LMS Hotfix 246
   Professional authenticated header utilities. This fresh asset also prevents
   browsers from combining current markup with a cached pre-Hotfix-244 shell. */

.top-upgrade-short-label { display: none; }

#main-content > header,
#main-content > header *,
#main-content > header *::before,
#main-content > header *::after {
  box-sizing: border-box;
}

/* Hotfix271: notification links are content cards inside .top-links. Keep the
   header's generic anchor flex rules from compressing each update into columns. */
#main-content > header #topNotificationDropdown a.notification-item,
#main-content > header #topNotificationDropdown .notification-item {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  flex: none !important;
  padding: 12px 14px !important;
  text-align: left !important;
  white-space: normal !important;
}
#main-content > header #topNotificationDropdown .notification-item > strong,
#main-content > header #topNotificationDropdown .notification-item > span,
#main-content > header #topNotificationDropdown .notification-item > em {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#main-content > header #topNotificationDropdown .notification-loading {
  display: grid !important;
  gap: 4px !important;
}

#main-content > header .top-links {
  min-width: 0;
}

#main-content > header .top-notification-widget > summary {
  list-style: none !important;
}

#main-content > header .top-notification-widget > summary::-webkit-details-marker {
  display: none !important;
}

/* The duplicate Profile label must never appear beside the full desktop name. */
#main-content > header .top-profile-widget .mobile-utility-label {
  display: none !important;
}

@media (min-width: 1101px) {
  #main-content > header {
    grid-template-columns:
      minmax(160px, 1fr)
      minmax(190px, 420px)
      minmax(356px, max-content) !important;
    gap: clamp(8px, 1vw, 18px) !important;
    padding-block: 9px !important;
  }

  /* Schedule, Updates and Profile are one deliberate utility bar. */
  #main-content > header .top-links {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: max-content !important;
    min-width: 356px !important;
    max-width: min(100%, 510px) !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .055) !important;
    white-space: nowrap !important;
  }

  #main-content > header .top-schedule-link,
  #main-content > header .top-notification-button {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  #main-content > header .top-notification-widget {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #main-content > header .top-notification-button .mobile-utility-label {
    display: inline !important;
    color: inherit !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  #main-content > header .top-schedule-link:hover,
  #main-content > header .top-schedule-link:focus-visible,
  #main-content > header .top-notification-button:hover,
  #main-content > header .top-notification-button:focus-visible {
    background: #eef5ff !important;
    color: #1d4ed8 !important;
    outline: none !important;
  }

  #main-content > header .top-schedule-link .nav-icon,
  #main-content > header .top-notification-button .nav-icon {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
  }

  #main-content > header .top-profile-widget {
    position: relative !important;
    inset: auto !important;
    order: initial !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    flex: 0 1 clamp(188px, 15vw, 232px) !important;
    gap: 9px !important;
    width: clamp(188px, 15vw, 232px) !important;
    min-width: 188px !important;
    max-width: 232px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 3px 10px 3px 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f3f7fc !important;
    color: #0f172a !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  #main-content > header .top-profile-widget:hover,
  #main-content > header .top-profile-widget:focus-visible {
    background: #eaf2fd !important;
    color: #1d4ed8 !important;
    outline: none !important;
  }

  #main-content > header .top-profile-widget .top-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
  }

  #main-content > header .top-profile-widget .top-profile-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 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;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.12 !important;
  }

  #main-content > header .top-profile-widget .top-profile-text strong {
    color: #0f172a !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
  }

  #main-content > header .top-profile-widget .top-profile-text em {
    color: #64748b !important;
    font-size: .66rem !important;
    font-style: normal !important;
    font-weight: 750 !important;
  }

  #main-content > header .top-profile-widget .top-progress {
    display: none !important;
  }

  #main-content > header .top-notification-dropdown {
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
  }
}

/* Tight laptop widths keep the same professional structure with less text. */
@media (min-width: 1101px) and (max-width: 1320px) {
  #main-content > header {
    grid-template-columns:
      minmax(136px, .8fr)
      minmax(170px, 1fr)
      minmax(334px, max-content) !important;
    gap: 8px !important;
    padding-inline: 14px !important;
  }

  #main-content > header .top-links {
    min-width: 334px !important;
  }

  #main-content > header .top-schedule-link,
  #main-content > header .top-notification-widget,
  #main-content > header .top-notification-button {
    min-width: 78px !important;
  }

  #main-content > header .top-profile-widget {
    flex-basis: 174px !important;
    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;
  }
}

/* Preserve the compact mobile utility cards even if an older stylesheet is cached. */
@media (max-width: 1100px) {
  #main-content > header .top-notification-widget,
  #main-content > header .top-notification-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  #main-content > header .top-notification-button .mobile-utility-label,
  #main-content > header .top-profile-widget .mobile-utility-label {
    display: block !important;
  }

  #main-content > header .top-profile-widget .top-profile-text,
  #main-content > header .top-profile-widget .top-progress {
    display: none !important;
  }
}

/* Commercial instructor UAT: utility count varies by plan. Wrap without overlap. */
@media not all and (max-width: 1100px) {
  #main-content > header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    max-height: none !important;
  }
  #main-content > header .header-brand-line {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }
  #main-content > header .global-page-search {
    flex: 1 1 240px !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 420px !important;
    margin: 0 !important;
  }
  #main-content > header .top-links {
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
  }
}
#main-content > header .top-upgrade-short-label { display: none !important; }
@media (max-width: 1100px) {
  #main-content > header .top-links > a.top-upgrade-link > span.top-upgrade-label { display: none !important; }
  #main-content > header .top-links > a.top-upgrade-link > span.top-upgrade-short-label {
    display: inline !important;
    color: #1d4ed8 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  #main-content > header .top-links > a.top-upgrade-link {
    width: auto !important;
    min-width: 112px !important;
    padding-inline: 10px !important;
  }
}