/*
 * ABDD Messages — Stage 4.3 global navigation
 * ABDD-STAGE-4-3
 *
 * Purpose
 * -------
 * Replace the visually awkward "horizontalized Element rail" with a desktop
 * top navigation whose geometry and interaction language match ABDD Community.
 *
 * Source of truth
 * ---------------
 * The implementation mirrors the navigation rules already used by the ABDD
 * HumHub theme (`theme/ABDD/scss/_facebook-navigation.scss`):
 * - 56px burgundy header;
 * - compact brand at the left;
 * - primary navigation centered in a wide middle lane;
 * - utility/account actions grouped as circular controls on the right;
 * - ivory foreground, restrained gold active state and underline.
 *
 * Functional boundary
 * -------------------
 * This file does not replace Element controls and does not create new routes.
 * Space/Home, Threads, Quick Settings and User Menu remain native Element
 * components with their native event handlers. Only their desktop layout and
 * presentation are changed.
 *
 * Stage 5 will define tablet/mobile navigation separately. Do not infer those
 * layouts from the desktop rules below.
 */

@media (min-width: 1181px) {
  /* ================================================================
     GLOBAL HEADER GRID
     HumHub ABDD uses a 30 / 40 / 30 rhythm. Keep the same visual balance
     without physically moving React-owned DOM nodes.
     ================================================================ */
  body.abdd-messages .abdd-global-nav {
    display: grid !important;
    grid-template-columns:
      minmax(220px, 30%)
      minmax(420px, 40%)
      minmax(220px, 30%) !important;
    grid-template-rows: var(--abdd-header-height) !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 18px !important;

    background: var(--abdd-burgundy) !important;
    border-bottom: 1px solid rgba(184, 154, 103, 0.35) !important;
    box-shadow: 0 2px 6px rgba(41, 38, 37, 0.14) !important;
  }

  /* ================================================================
     LEFT — ABDD BRAND
     The previous long two-line wordmark consumed too much visual weight.
     Community itself leads with the monogram; Messages follows that grammar.
     The application name remains available in the anchor title/aria label.
     ================================================================ */
  body.abdd-messages .abdd-global-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    flex: none !important;
    gap: 0 !important;
  }

  body.abdd-messages .abdd-global-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-color: var(--abdd-gold) !important;
    color: var(--abdd-gold) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.abdd-messages .abdd-global-brand-copy {
    display: none !important;
  }

  body.abdd-messages .abdd-global-brand:hover .abdd-global-brand-mark,
  body.abdd-messages .abdd-global-brand:focus-visible .abdd-global-brand-mark {
    background: rgba(244, 239, 231, 0.1) !important;
    border-color: var(--abdd-gold-light) !important;
  }

  body.abdd-messages .abdd-global-brand:focus-visible {
    outline: 2px solid var(--abdd-gold-light) !important;
    outline-offset: 2px !important;
    border-radius: 999px !important;
  }

  /* ================================================================
     CENTER — PRIMARY ELEMENT SPACE/HOME NAVIGATION
     Native Element items become ABDD-style navigation tabs: broad hit area,
     rectangular hover state and a restrained gold active underline.
     ================================================================ */
  body.abdd-messages .abdd-global-nav .abdd-nav-primary,
  body.abdd-messages .abdd-global-nav .mx_SpaceTreeLevel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;

    width: 100% !important;
    max-width: 700px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;

    overflow: visible !important;
    background: transparent !important;
    scrollbar-width: none !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceTreeLevel::-webkit-scrollbar {
    display: none !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceItem {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 66px !important;
    max-width: 125px !important;
    height: 100% !important;
    margin: 0 2px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceButton,
  body.abdd-messages .abdd-global-nav .mx_SpaceItem > .mx_AccessibleButton {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 4px 0 !important;
    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--abdd-ivory) !important;
    box-shadow: none !important;

    transition:
      background-color 0.15s ease,
      color 0.15s ease !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceButton:hover,
  body.abdd-messages .abdd-global-nav .mx_SpaceItem > .mx_AccessibleButton:hover {
    background: rgba(244, 239, 231, 0.1) !important;
    color: #ffffff !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceButton svg,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton [class*="Icon"] {
    color: currentColor !important;
  }

  /* Selected primary destination: same restrained gold cue as Community. */
  body.abdd-messages .abdd-global-nav .mx_SpaceItem[aria-selected="true"] .mx_SpaceButton,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton_active {
    background: rgba(184, 154, 103, 0.1) !important;
    color: var(--abdd-gold-light) !important;
    box-shadow: none !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceItem[aria-selected="true"] .mx_SpaceButton::after,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton_active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -4px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--abdd-gold) !important;
  }

  /* Create-space remains functional but is visually a utility, not a tab. */
  body.abdd-messages .abdd-global-nav .mx_SpaceItem_new {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    margin-left: 6px !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceButton_new {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 8px 4px !important;
    padding: 0 !important;
    border: 1px solid rgba(244, 239, 231, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(244, 239, 231, 0.1) !important;
  }

  body.abdd-messages .abdd-global-nav .mx_SpaceButton_new:hover {
    background: rgba(244, 239, 231, 0.18) !important;
    border-color: rgba(184, 154, 103, 0.4) !important;
  }

  /* ================================================================
     RIGHT — THREADS / SETTINGS / ACCOUNT
     CSS grid lets the three React-owned siblings share the right lane without
     moving them in the DOM. Offsets create the same compact utility cluster
     used by ABDD Community.
     ================================================================ */
  body.abdd-messages .abdd-global-nav .abdd-nav-threads,
  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton,
  body.abdd-messages .abdd-global-nav .abdd-nav-settings,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton,
  body.abdd-messages .abdd-global-nav .abdd-nav-user,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  body.abdd-messages .abdd-global-nav .abdd-nav-threads,
  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton {
    margin-right: 96px !important;
  }

  body.abdd-messages .abdd-global-nav .abdd-nav-settings,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton {
    margin-right: 48px !important;
  }

  body.abdd-messages .abdd-global-nav .abdd-nav-user,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu {
    margin-right: 0 !important;
  }

  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu > button,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu > .mx_AccessibleButton {
    border: 1px solid rgba(244, 239, 231, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(244, 239, 231, 0.1) !important;
    color: var(--abdd-ivory) !important;
    box-shadow: none !important;
  }

  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton:hover,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton:hover,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu > button:hover,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu > .mx_AccessibleButton:hover {
    background: rgba(244, 239, 231, 0.18) !important;
    border-color: rgba(184, 154, 103, 0.4) !important;
  }

  /* Keep user/avatar circular and give it the subtle gold outline used by
     Community. Element may render initials instead of an image; both cases
     remain centered by the native UserMenu component. */
  body.abdd-messages .abdd-global-nav > .mx_UserMenu,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu > button,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu > .mx_AccessibleButton,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu img,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu .mx_BaseAvatar {
    border-radius: 999px !important;
  }

  body.abdd-messages .abdd-global-nav > .mx_UserMenu {
    outline: 2px solid rgba(184, 154, 103, 0.4) !important;
    outline-offset: 1px !important;
  }

  /* Notification badge treatment follows the Community gold badge rule. */
  body.abdd-messages .abdd-global-nav .mx_SpacePanel_notificationBadge,
  body.abdd-messages .abdd-global-nav .mx_NotificationBadge {
    background: var(--abdd-gold) !important;
    color: var(--abdd-warm-black) !important;
  }

  /* Element rail-specific decoration must not leak into the horizontal shell. */
  body.abdd-messages .abdd-global-nav::before,
  body.abdd-messages .abdd-global-nav::after,
  body.abdd-messages .abdd-global-nav .mx_SpacePanel_toggleCollapse {
    display: none !important;
  }
}