/* ============================================================
   APP NAV — the ONE shared flat-icon top bar for every staff page.
   ------------------------------------------------------------
   Ported 1:1 from the root index.html "cargo board" nav
   (css/cargo-overview.css :40-78 base + :1152-1159 final look):
     50px bar · solid #0a5989 · JetBrains Mono · 18px stroke-1.9
     flat icons · menu centred by two flex spacers · active pill
     rgba(255,255,255,.15).

   RULES OF THE HOUSE
   1. Self-sufficient. financial.html and kpi-dashboard.html load
      NEITHER themes.css NOR navigation.css, so nothing in here may
      rely on those files or on their CSS custom properties.
   2. Namespaced `.app-nav*`. It deliberately does NOT use the class
      tokens `top-nav`, `nav-menu` or `nav-brand`: the legacy emoji
      injector in js/session-auth.js (applyRoleNavSurface) keys on
      exactly those and would overwrite this component.
   3. `.nav-user`, `.nav-user-info`, `.nav-user-avatar`,
      `.nav-user-name`, `.nav-user-role`, `.nav-user-dropdown*` ARE a
      hard contract with session-auth.js (ensureUserDropdowns /
      renderSessionBadge). They keep their canonical names and are
      re-skinned here under `.app-nav …` so pages without
      navigation.css still get a usable popover.
   4. Pages that DO load themes.css get `[data-theme="light"] a
      {color:#f97316 !important}` — hence the `!important` colour
      guards below. Specificity `.app-nav .app-nav-item` (0,2,0)
      already beats `[data-theme="light"] a` (0,1,1), the
      `!important` is what actually wins the fight.
   ============================================================ */

.app-nav,
.app-nav *,
.app-nav *::before,
.app-nav *::after { box-sizing: border-box; }

.app-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 50px;
    padding: 0 1.5rem;
    margin: 0;
    background: #0a5989;
    color: #fff;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    box-shadow: 0 2px 8px rgba(10, 89, 137, .25);
    position: sticky;
    top: 0;
    z-index: 1000;
    white-space: nowrap;
}

/* index.html keeps a sticky sub-nav (`.freeze`, top:0) directly under
   the bar — a sticky app-nav would hide it. That page mounts with
   `.app-nav--static`. */
.app-nav.app-nav--static { position: relative; z-index: 30; }

/* ---------- brand ---------- */
.app-nav-logo { display: flex; align-items: center; margin-right: 8px; flex: 0 0 auto; }
.app-nav-logo-img {
    height: 36px;
    width: auto;
    display: block;
    background: #fff;
    padding: 4px 9px;
    border-radius: 8px;
}
.app-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #eaf4fb;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    padding: 2px 9px;
    margin-right: 4px;
}
.app-nav-chip b { font-weight: 800; color: #fff; }

/* ---------- centring spacers ---------- */
.app-nav-spacer { flex: 1 1 auto; min-width: 0; }

/* menu region — sits between the two spacers, so it is centred */
.app-nav-links { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* ---------- menu entries ---------- */
.app-nav .app-nav-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    /* Owner request: the whole menu reads in caps. Slight tracking + a step
       down in size keeps the row the same visual length as mixed case. */
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    color: rgba(255, 255, 255, .78) !important;
    background: transparent;
    border: 0;
    padding: .5rem .75rem;
    border-radius: 8px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.app-nav .app-nav-item:hover,
.app-nav .app-nav-item:focus-visible {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    outline: none;
}
.app-nav .app-nav-item:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.app-nav .app-nav-item.active {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-weight: 600;
}
.app-nav .app-nav-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.app-nav .app-nav-ic svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
    display: block;
}
.app-nav .app-nav-caret { margin-left: 1px; display: inline-flex; }
.app-nav .app-nav-caret svg { width: 13px; height: 13px; stroke-width: 2.2; display: block; transition: transform .15s; }
.app-nav .app-nav-group.app-nav-open > .app-nav-item .app-nav-caret svg { transform: rotate(180deg); }

/* ---------- Interface dropdown ---------- */
.app-nav-group { position: relative; display: inline-flex; flex: 0 0 auto; }
.app-nav-group-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 208px;
    padding: 5px 0;
    background: #16304a;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    display: none;
    z-index: 1400;
    overflow: hidden;
}
.app-nav-group.app-nav-open > .app-nav-group-menu {
    display: block;
    animation: appNavDrop .15s ease;
}
/* Hover bridge: the menu is offset 6px below the trigger, so a pointer moving
   down toward it would otherwise leave the group's box and close the menu
   mid-approach. This invisible strip makes the trigger and the menu one
   continuous hover surface. */
.app-nav-group-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
@keyframes appNavDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.app-nav .app-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: 9px 14px;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .86) !important;
    background: transparent;
    border: 0;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.app-nav .app-nav-dropdown-item:hover,
.app-nav .app-nav-dropdown-item:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    outline: none;
}
.app-nav .app-nav-dropdown-item.active { background: rgba(255, 255, 255, .16); color: #fff !important; font-weight: 600; }
.app-nav .app-nav-dropdown-item .app-nav-ic svg { width: 16px; height: 16px; }

/* ---------- LIVE chip ---------- */
.app-nav-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 10.5px;
    letter-spacing: 1px;
    color: #bfe6cf;
    margin-right: 8px;
}
.app-nav-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, .6);
    animation: appNavPulse 2s infinite;
}
@keyframes appNavPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, .6); }
    70%  { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .app-nav-live-dot { animation: none; }
    .app-nav-group.app-nav-open > .app-nav-group-menu { animation: none; }
}

/* ---------- theme toggle ---------- */
/* NOTE: deliberately NOT `.theme-toggle` / `.theme-toggle-nav` /
   `.nav-theme-toggle` — ThemeManager.upgradeToggleMarkup() replaces the
   innerHTML of those and would delete the sun/moon SVGs. */
.app-nav .app-nav-theme-toggle {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    transition: background .15s;
}
.app-nav .app-nav-theme-toggle:hover { background: rgba(255, 255, 255, .22); }
.app-nav .app-nav-theme-toggle svg { width: 16px; height: 16px; stroke-width: 2; display: block; }
/* Icon reflects the CURRENT theme — same convention as the index bar it
   replaces (cargo-overview.css :1142-1144): dark → moon, light → sun.
   Default (no data-theme attribute yet) matches ThemeManager's 'dark'. */
.app-nav .app-nav-theme-toggle .app-nav-sun { display: none; }
.app-nav .app-nav-theme-toggle .app-nav-moon { display: block; }
[data-theme="light"] .app-nav .app-nav-theme-toggle .app-nav-moon { display: none; }
[data-theme="light"] .app-nav .app-nav-theme-toggle .app-nav-sun { display: block; }

/* ---------- user block (contract class names) ---------- */
.app-nav .nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    flex: 0 0 auto;
    position: relative;
}
.app-nav .nav-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 8px;
    transition: background .15s;
}
.app-nav .nav-user-info:hover { background: rgba(255, 255, 255, .10); }
.app-nav .nav-user-info::after {
    content: '\25BE';
    font-size: 9px;
    color: rgba(255, 255, 255, .55);
    margin-left: 2px;
}
.app-nav .nav-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    flex: 0 0 auto;
}
.app-nav .nav-user-details { display: flex; flex-direction: column; line-height: 1.15; }
.app-nav .nav-user-name { font-size: 11px; font-weight: 700; font-family: inherit; color: #fff; }
.app-nav .nav-user-role {
    font-size: 8.5px;
    color: #a9cae0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* Popover: dark surface in BOTH themes (same call as the index nav —
   white-on-dark always reads, never white-on-white). */
.app-nav .nav-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 216px;
    background: #16304a;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    display: none;
    z-index: 1400;
    overflow: hidden;
}
.app-nav .nav-user.nav-user-open .nav-user-dropdown { display: block; animation: appNavDrop .15s ease; }
.app-nav .nav-user-dropdown-header {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(135deg, rgba(45, 125, 189, .30), transparent 65%);
}
.app-nav .nav-user-dropdown-header .dropdown-user-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
}
.app-nav .nav-user-dropdown-header .dropdown-user-role {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62) !important;
}
.app-nav .nav-user-dropdown-actions { padding: 5px 0; }
.app-nav .nav-user-dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.app-nav .nav-user-dropdown-item:hover { background: rgba(255, 255, 255, .10); color: #fff !important; }
.app-nav .nav-user-dropdown-item.nav-user-dropdown-logout:hover { background: rgba(239, 68, 68, .22); }

/* ---------- light theme ----------
   The bar itself is intentionally identical in both themes (solid
   #0a5989, exactly like the index mock-up). Only the chrome around
   it needs a nudge so it doesn't float on a white page. */
[data-theme="light"] .app-nav { box-shadow: 0 2px 10px rgba(10, 89, 137, .22); }
[data-theme="light"] .app-nav-group-menu,
[data-theme="light"] .app-nav .nav-user-dropdown {
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 18px 44px rgba(16, 45, 68, .32);
}
/* themes.css paints every <span> / <a> in light mode — re-assert ours. */
[data-theme="light"] .app-nav .app-nav-item,
[data-theme="light"] .app-nav .app-nav-dropdown-item { color: rgba(255, 255, 255, .82) !important; }
[data-theme="light"] .app-nav .app-nav-item:hover,
[data-theme="light"] .app-nav .app-nav-item.active,
[data-theme="light"] .app-nav .app-nav-dropdown-item:hover,
[data-theme="light"] .app-nav .app-nav-dropdown-item.active { color: #fff !important; }
[data-theme="light"] .app-nav .nav-user-name,
[data-theme="light"] .app-nav-chip b { color: #fff !important; }
[data-theme="light"] .app-nav .nav-user-role { color: #a9cae0 !important; }
[data-theme="light"] .app-nav-live { color: #bfe6cf !important; }
[data-theme="light"] .app-nav-chip { color: #eaf4fb !important; }

/* ---------- light-theme armour ----------
   themes.css paints EVERY bare <button> in light mode:
     [data-theme="light"] button { background:#fff !important;
                                   color:#102033 !important;
                                   border:1px solid #b9cedb !important }
   …which turned the "Interface" group trigger and the theme toggle into
   white boxes on the blue bar. Same !important, higher specificity
   (.app-nav .x = 0,2,0 beats [data-theme="light"] button = 0,1,1). */
.app-nav .app-nav-item,
.app-nav .app-nav-dropdown-item,
.app-nav .nav-user-dropdown-item {
    background: transparent !important;
    border: 0 !important;
}
.app-nav .app-nav-item:hover,
.app-nav .app-nav-item:focus-visible,
.app-nav .app-nav-item.active,
.app-nav .app-nav-dropdown-item:hover,
.app-nav .app-nav-dropdown-item:focus-visible,
.app-nav .app-nav-dropdown-item.active,
.app-nav .nav-user-dropdown-item:hover {
    background: rgba(255, 255, 255, .15) !important;
    border: 0 !important;
}
.app-nav .nav-user-dropdown-item.nav-user-dropdown-logout:hover {
    background: rgba(239, 68, 68, .22) !important;
}
.app-nav .app-nav-theme-toggle {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    color: #fff !important;
}
.app-nav .app-nav-theme-toggle:hover {
    background: rgba(255, 255, 255, .22) !important;
    border-color: rgba(255, 255, 255, .35) !important;
}
/* the popover surfaces themselves must stay dark in light mode */
.app-nav .app-nav-group-menu,
.app-nav .nav-user-dropdown { background: #16304a !important; }

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
    .app-nav { padding: 0 1rem; }
    .app-nav .app-nav-item { padding: .5rem .6rem; font-size: .78rem; gap: .4rem; }
}
@media (max-width: 1180px) {
    .app-nav-chip,
    .app-nav-live { display: none; }
}
@media (max-width: 980px) {
    .app-nav { overflow-x: auto; overflow-y: visible; }
    .app-nav-spacer { flex: 0 0 6px; }
    .app-nav .nav-user-details { display: none; }
}

/* ---------- suppressed contexts ---------- */
/* create-order.html runs inside the orders/portal iframe modal with
   ?embedded=1 → body.embedded. No chrome in there. */
body.embedded .app-nav { display: none !important; }

/* create-order.html is ALSO reachable full-page from the customer portal
   (portal.html → create-order.html?portal=ship_supply). The page marks a
   customer-bound session with body.portal-order-mode — a customer must not
   see the staff bar. Staff opening the same wizard for support do NOT get
   that class, so they keep the nav. */
body.portal-order-mode .app-nav { display: none !important; }

@media print {
    .app-nav { display: none !important; }
}