/* ==========================================================================
   Unified top app bar (desktop, >= 992px).

   Merges the old white top bar (logo + theme toggle + profile) INTO the
   horizontal navbar so there is a single bar:

       [ logo ]  ----------  [ nav, centered ]  ----------  [ toggle | profile ]

   The old `.main-header` top bar is hidden on desktop (its logo/actions now
   live here). On mobile (< 992px) the navbar is already hidden by mobile.css
   and `.main-header` stays as the compact burger+logo bar feeding the drawer
   (MobileNav) — so this file is desktop-only and never touches the mobile UX.

   Layout uses equal-width left/right zones (`flex: 1`) so the centered nav is
   truly centered regardless of the logo / actions widths. `!important` is used
   on the structural overrides to beat the heavy vendored SPRUHA navbar rules,
   consistent with the rest of this project's CSS layer.
   ========================================================================== */

@media (min-width: 992px) {
  /* Retire the old top bar — everything it held is now in the navbar. */
  .main-header {
    display: none !important;
  }

  /* Lift the whole bar above page content so its dropdowns paint on top. */
  .kk-appbar-wrap {
    position: relative;
    z-index: 1030;
  }

  /* The navbar row becomes the full-width three-zone app bar.
     `overflow: visible` is REQUIRED: the template sets
     `.horizontalmenu .hor-menu .main-container-1 { overflow: hidden }`, which
     otherwise clips every dropdown that opens below the bar (profile + nav). */
  .kk-appbar,
  .kk-appbar .kk-appbar-row.container {
    overflow: visible !important;
  }
  .kk-appbar .kk-appbar-row.container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    max-width: 100% !important;
    min-height: 62px;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* --- Left zone: logo --- */
  .kk-appbar-logo {
    flex: 1 1 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }
  .kk-appbar-logo img {
    height: 38px;
    width: auto;
    display: block;
    /* The brand mark is red on transparent (built for white backgrounds), so it
       clashes on the navy light-mode bar. Recolor it to a clean white monochrome
       mark here; dark mode keeps the original red (it reads well on near-black). */
    filter: brightness(0) invert(1);
  }
  body.dark-theme .kk-appbar-logo img {
    filter: none;
  }

  /* --- Center zone: navigation --- */
  .kk-appbar-nav {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .kk-appbar-nav .menu-nav.nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px;
  }
  /* Leftover vertical-menu section label, if present. */
  .kk-appbar-nav .nav-header {
    display: none !important;
  }
  /* Compact the links so all 10 items fit comfortably down to 992px. */
  .kk-appbar-nav .menu-nav.nav > .nav-item {
    margin: 0 !important;
    /* hor-menu sets nav-item position:static; restore relative so each
       dropdown anchors under its own item instead of the whole bar. */
    position: relative !important;
  }
  .kk-appbar-nav .menu-nav.nav > .nav-item > .nav-link {
    padding: 8px 12px !important;
    white-space: nowrap;
    border-radius: 8px;
  }

  /* --- Right zone: actions --- */
  .kk-appbar-actions {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }

  .kk-appbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .kk-appbar-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
  }
  .kk-appbar-toggle:active {
    transform: translateY(0);
  }

  /* Profile chip — reuses `.main-profile-menu .main-img-user` so the dark-mode
     teal override in dark.css applies automatically. */
  .kk-appbar-profile {
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  .kk-appbar-avatar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    background: linear-gradient(135deg, #5b6cff 0%, #8a5bff 100%);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .kk-appbar-profile:hover .kk-appbar-avatar {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }

  /* Same open animation for EVERY navbar dropdown — the profile menu and the
     Setup / Carpool / Reports menus all pop in identically. The keyframe plays
     when the menu flips from display:none to block (i.e. when `.show` is set). */
  .kk-appbar .dropdown-menu {
    animation: kk-appbar-pop 0.16s ease;
  }

  /* Right-aligned dropdown under the avatar. */
  .kk-appbar-profile > .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 12px);
    margin: 0;
    min-width: 210px;
    display: none;
    z-index: 1100;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  }
  .kk-appbar-profile > .dropdown-menu.show {
    display: block;
  }

  @keyframes kk-appbar-pop {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}