/* ==========================================================================
   AceCloud portals — shared navigation bar
   Identical file at:
     /opt/poc-portal/frontend/brand/nav.css
     /opt/proposal-portal/frontend/brand/nav.css
   Loaded AFTER brand/ui.css so it wins on source order, and written with a
   leading `:root ` (specificity 0,2,0+) so it also beats the container-scoped
   rules the pages already carry (.top-actions .btn, nav .nav-right, …) and the
   runtime <style> blocks help.js appends to <head> after us.
   Behaviour (hide / auto-hide) lives in brand/nav.js.
   ==========================================================================

   One bar for every page of both portals. Before this there were four: the
   tracker's light header, the proposal list's navy <nav>, a plain <header> with
   text links on Settings/POC Data, and the builder's brand-only .topbar. The
   navy bar won because it is the one people said they liked.

   Deliberately NO DOM restructuring is required to adopt it: the bar itself is
   the flex row, the brand takes `margin-right:auto`, and an existing wrapper
   (.nav-right / .top-actions) is just re-flowed in place. That matters because
   help.js, activities.js and notifications.js all inject buttons into these
   bars by id and insert relative to siblings — moving nodes into a new wrapper
   would make `header.insertBefore(btn, spacer)` throw. */

:root .acnav {
  background: #0e2841;
  color: #fff;
  /* the logo's own four colours, as on the old proposal nav */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #009048, #1848d8, #e11d74, #f5a623) 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
  padding: 8px clamp(12px, 1.6vw, 28px);
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform .2s ease;
}

/* Brand ------------------------------------------------------------------- */

:root .acnav .acnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  /* pushes every other child to the right without needing a wrapper element */
  margin-right: auto;
  color: #fff;
  min-width: 0;
}
:root .acnav .acnav-brand img {
  height: 30px;
  width: auto;
  display: block;
}
:root .acnav .acnav-brand h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}
/* The tagline is a second line of prose in a 56px bar — it only ever pushed the
   bar taller. It stays in the markup for the login card and for screen readers
   reading the page title. */
:root .acnav .acnav-brand p {
  display: none;
}
/* Three of the old bars pushed their last item right with a `flex:1` spacer
   (.header-sp / .sp / .nav-sp). With the brand taking the free space instead,
   a second stretcher would split it and leave a hole mid-bar — so the spacers
   stay in the DOM (help.js inserts itself relative to one) but stop taking part
   in the layout. */
:root .acnav .header-sp,
:root .acnav .sp,
:root .acnav .nav-sp {
  display: none;
}

:root .acnav .acnav-ctx {
  color: #94a3b8;
  font-weight: 400;
  font-size: .9rem;
  white-space: nowrap;
}

/* Items ------------------------------------------------------------------- */

/* Whether a page groups its controls in a wrapper or hangs them straight off
   the bar, they lay out the same. */
:root .acnav .nav-right,
:root .acnav .top-actions,
:root .acnav .acnav-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

/* Every control in the bar reads as one family: buttons, links, and the anchors
   Settings/POC Data use instead of buttons. */
:root .acnav .nav-btn,
:root .acnav .btn,
:root .acnav a.btn,
:root .acnav > a,
:root .acnav .nav-right > a,
:root .acnav .top-actions > a,
:root .acnav .acnav-items > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid #2b4c6b;
  border-radius: 6px;
  background: #173a58;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
:root .acnav .nav-btn:hover,
:root .acnav .btn:hover,
:root .acnav a.btn:hover,
:root .acnav > a:hover,
:root .acnav .nav-right > a:hover,
:root .acnav .top-actions > a:hover,
:root .acnav .acnav-items > a:hover {
  background: #1f4a6f;
  border-color: #3c6890;
  color: #fff;
}
:root .acnav .nav-btn:focus-visible,
:root .acnav .btn:focus-visible,
:root .acnav a:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 1px;
}

/* The one primary action per bar (+ New POC, + New Proposal, + New Template). */
:root .acnav .btn.primary,
:root .acnav .nav-btn.btn-new,
:root .acnav .btn-new {
  background: #156082;
  border-color: #156082;
  color: #fff;
}
:root .acnav .btn.primary:hover,
:root .acnav .nav-btn.btn-new:hover,
:root .acnav .btn-new:hover {
  background: #19749d;
  border-color: #19749d;
}

/* Sign out / Log out is the quietest thing in the bar, everywhere. */
:root .acnav .btn-logout,
:root .acnav #logoutBtn,
:root .acnav a#logout,
:root .acnav .acnav-quiet {
  background: transparent;
  border-color: #334155;
  color: #94a3b8;
}
:root .acnav .btn-logout:hover,
:root .acnav #logoutBtn:hover,
:root .acnav a#logout:hover,
:root .acnav .acnav-quiet:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #64748b;
  color: #fff;
}
:root .acnav .btn.danger {
  background: transparent;
  border-color: #7f3f3f;
  color: #fca5a5;
}

/* Icon-only controls (the tracker's settings gear) stay square. */
:root .acnav .icon-btn {
  padding: 6px;
  min-width: 32px;
}
:root .acnav .icon-btn svg {
  display: block;
}

/* The signed-in user, and the dropdowns that hang off the bar ------------- */

:root .acnav .nav-user {
  color: #94a3b8;
  font-size: .82rem;
  white-space: nowrap;
}
:root .acnav .user-chip {
  color: #e2e8f0;
  font-size: 12.8px;
}
:root .acnav button.user-chip {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 8px;
}
:root .acnav button.user-chip:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #334155;
}
:root .acnav .user-chip .av {
  background: #156082;
  color: #fff;
}
:root .acnav .user-chip .role,
:root .acnav .user-chip .caret {
  color: #94a3b8;
}
/* Menus anchored to a bar control are light panels — they sit over the page, not
   over the bar, so they keep the page's palette. */
:root .acnav .settings-menu,
:root .acnav .profile-menu {
  color: #1e293b;
}

/* help.js appends its own <style> to <head> at runtime, after this file, and its
   selector is #helpNav.hn-btn (1,1,0). On the tracker it picks the light green
   variant meant for a white toolbar; on navy that reads as an error. Reaching
   over it needs the id plus our two classes. */
:root .acnav #helpNav.hn-btn,
:root .acnav #helpNav.hn-dark {
  background: transparent;
  border: 1px solid #2b4c6b;
  border-radius: 6px;
  color: #e2e8f0;
  padding: 6px 13px;
  min-height: 32px;
  font-size: 12.8px;
  margin-left: 0;
}
:root .acnav #helpNav.hn-btn:hover,
:root .acnav #helpNav.hn-dark:hover {
  background: #1f4a6f;
  border-color: #3c6890;
  color: #fff;
}

/* ==========================================================================
   Hide / auto-hide
   Three modes, kept in localStorage under `acnav.mode` and so shared by both
   portals (same origin, different paths):
     pinned  — always visible (default, what the bar always used to do)
     auto    — slides away as you scroll down, comes back on the way up, on a
               move to the top edge of the window, or on focus inside it
     hidden  — out of the layout; a small floating handle brings it back
   ========================================================================== */

/* auto-hidden: the bar is sticky, so while the page is scrolled it is overlaying
   content. Translating it off screen therefore costs no reflow — the content
   underneath does not move. */
:root .acnav.acnav--off {
  transform: translateY(calc(-100% - 6px));
}

/* fully hidden: unlike auto, this DOES give the space back — that is the point
   of it. */
:root .acnav.acnav--gone {
  display: none;
}

/* Peeking at a hidden bar: overlay it rather than putting it back in the flow,
   so glancing at the menu never shifts the page under the pointer. */
:root .acnav.acnav--gone.acnav--peek {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
}

@media (prefers-reduced-motion: reduce) {
  :root .acnav {
    transition: none;
  }
}

/* Mode control ------------------------------------------------------------ */

:root .acnav .acnav-mode {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
}
:root .acnav .acnav-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 6px;
  border: 1px solid #2b4c6b;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
:root .acnav .acnav-mode-btn:hover,
:root .acnav .acnav-mode-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .08);
  border-color: #3c6890;
  color: #fff;
}
:root .acnav .acnav-mode-btn svg {
  display: block;
}
:root .acnav .acnav-mode-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  padding: 6px;
  background: #fff;
  color: #1e293b;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  z-index: 130;
  text-align: left;
}
:root .acnav .acnav-mode-menu[hidden] {
  display: none;
}
:root .acnav .acnav-mode-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #8a9095;
  padding: 6px 10px 4px;
}
:root .acnav .acnav-mode-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
:root .acnav .acnav-mode-item:hover {
  background: #f3f4f6;
}
:root .acnav .acnav-mode-item .acnav-tick {
  flex: 0 0 12px;
  color: #156082;
  font-weight: 700;
}
:root .acnav .acnav-mode-item .acnav-why {
  display: block;
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 2px;
}
:root .acnav .acnav-mode-foot {
  padding: 6px 10px 4px;
  font-size: 11.5px;
  color: #8a9095;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

/* The handle that brings a hidden bar back. Fixed, so it is reachable wherever
   the page is scrolled to, and small enough not to cover content. */
.acnav-handle {
  position: fixed;
  top: 6px;
  right: 8px;
  z-index: 119;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #2b4c6b;
  border-radius: 999px;
  background: rgba(14, 40, 65, .92);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.acnav-handle.on {
  display: inline-flex;
}
.acnav-handle:hover,
.acnav-handle.open {
  background: #0e2841;
  border-color: #3c6890;
  color: #fff;
}
/* while it is holding a hidden bar open, it sits above that bar */
.acnav-handle.open {
  z-index: 121;
}
.acnav-handle svg {
  display: block;
}

/* Narrow screens ---------------------------------------------------------- */

/* Each page already had a mobile rule turning its button row into a 2-up grid,
   but those selectors are .top-actions / .nav-right (0,1,0) and ours are
   0,3,0 — so they no longer apply and the behaviour has to live here. */
@media (max-width: 700px) {
  :root .acnav {
    align-items: flex-start;
    padding: 10px 14px;
  }
  :root .acnav .acnav-brand {
    margin-right: 0;
    width: 100%;
  }
  :root .acnav .acnav-brand img {
    height: 26px;
  }
  :root .acnav .nav-right,
  :root .acnav .top-actions,
  :root .acnav .acnav-items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-left: 0;
  }
  :root .acnav .nav-btn,
  :root .acnav .btn,
  :root .acnav a.btn,
  :root .acnav .nav-right > a,
  :root .acnav .top-actions > a,
  :root .acnav .acnav-items > a,
  :root .acnav #helpNav.hn-btn,
  :root .acnav #helpNav.hn-dark {
    width: 100%;
    min-height: 40px;
    font-size: 12.5px;
  }
  :root .acnav .nav-user,
  :root .acnav #userChip {
    grid-column: span 2;
  }
  /* the gear and the mode button are square, not full width */
  :root .acnav .settings-wrap,
  :root .acnav .acnav-mode {
    justify-self: start;
  }
  :root .acnav .acnav-mode-menu {
    right: auto;
    left: 0;
  }
}

@media (max-width: 460px) {
  :root .acnav .nav-right,
  :root .acnav .top-actions,
  :root .acnav .acnav-items {
    grid-template-columns: 1fr;
  }
  :root .acnav .nav-user,
  :root .acnav #userChip {
    grid-column: span 1;
  }
}
