/* =====================================================================
   MistIntel — Shared Navbar  (nav.css)
   Single source of truth. Loaded by every page. Never duplicate here.
   ===================================================================== */

/* ── Reset ── */
#site-topbar, #site-topbar * { box-sizing: border-box; }

/* ── Bar ── */
#site-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 600;
    height: 56px;
    background: #0c0c1e;
    border-bottom: 1px solid #2a2a4a;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Brand ── */
#site-topbar .nav-brand {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    text-decoration: none;
    letter-spacing: .03em;
}
#site-topbar .nav-brand img {
    height: 36px;
    width: auto;
    max-width: none;
    display: block;
    flex-shrink: 0;
}
#site-topbar .nav-brand .brand-mist  { color: #ffffff; font-size: 1.05rem; font-weight: 700; }
#site-topbar .nav-brand .brand-intel { color: #4a9eff; font-size: 1.05rem; font-weight: 700; }

/* ── Site-wide nav links ── */
#site-topbar .nav-links {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}
#site-topbar .nav-links a {
    color: #888;
    font-size: .82rem;
    font-weight: 400;
    padding: .28rem .62rem;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
    line-height: 1.4;
}
#site-topbar .nav-links a:hover {
    color: #ccc;
    border-color: #3a3a5a;
}
#site-topbar .nav-links a.active {
    color: #4a9eff;
    border-color: #4a9eff;
}

/* ── Tracker-specific: view buttons (Map / Stats / Settings) ── */
#topbar-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
#topbar-nav button {
    background: transparent;
    color: #888;
    border: 1px solid #2a2a4a;
    padding: .3rem .75rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: .82rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: all .15s;
}
#topbar-nav button.active  { color: #e0e0e0; border-color: #e94560; background: #0f3460; }
#topbar-nav button:hover:not(.active) { color: #ccc; border-color: #555; }

/* ── Tracker-specific: right cluster ── */
#topbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    margin-left: auto;
}
#topbar-user {
    display: flex; align-items: center; gap: .5rem;
    background: #16213e; border-radius: 6px; padding: .25rem .55rem;
    font-size: .75rem; color: #aaa;
}
#topbar-user .user-name  { color: #e0e0e0; font-weight: 600; cursor: pointer; font-size: .75rem; }
#topbar-user .logout-btn { background: none; border: none; color: #e94560; cursor: pointer; font-size: .75rem; }
#topbar-user .logout-btn:hover { text-decoration: underline; }
#topbar-api-btn {
    background: #0f3460; color: #e0e0e0; border: 1px solid #2a2a4a;
    padding: .3rem .7rem; border-radius: 4px; cursor: pointer; font-size: .78rem;
    font-family: 'Segoe UI', system-ui, sans-serif; transition: all .15s;
}
#topbar-api-btn:hover { border-color: #e94560; background: #16213e; }
#topbar-home-btn {
    background: #0f3460; color: #e0e0e0; border: 1px solid #2a2a4a;
    padding: .3rem .7rem; border-radius: 4px; cursor: pointer; font-size: .78rem;
    font-family: 'Segoe UI', system-ui, sans-serif; transition: all .15s;
    white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
#topbar-home-btn:hover { border-color: #f0a030; background: #16213e; }

/* ── Tracker chip ── */
#tracker-chip {
    display: flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: #aaa;
    background: #12122a; border: 1px solid #2a2a4a;
    border-radius: 4px; padding: .2rem .5rem;
    white-space: nowrap; max-width: 200px; overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
#tracker-chip:hover,
#tracker-chip.open {
    border-color: #4a4a7a;
    background: #1a1a38;
}
#tracker-chip.live-chip:hover,
#tracker-chip.live-chip.open  { border-color: #44ff44aa; }
#tracker-chip.nowvw-chip:hover,
#tracker-chip.nowvw-chip.open { border-color: #f0a030aa; }
#tracker-chip.idle-chip:hover,
#tracker-chip.idle-chip.open  { border-color: #f0a030aa; }
#tracker-chip .tc-dot  { font-size: .55rem; flex-shrink: 0; }
#tracker-chip .tc-text { overflow: hidden; text-overflow: ellipsis; }

/* ── Tracker popover ── */
#tracker-popover {
    position: fixed;
    z-index: 700;
    min-width: 140px;
    background: #12122a;
    border: 1px solid #3a3a6a;
    border-radius: 7px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    display: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    gap: 4px;
    flex-direction: column;
}
#tracker-popover.visible { display: flex; }
#tracker-popover .tp-btn {
    width: 100%; padding: 8px 14px; border-radius: 5px; border: none;
    font-size: .8rem; font-weight: 600; cursor: pointer;
    text-align: left; transition: opacity .15s, background .12s;
}
#tracker-popover .tp-btn:hover   { opacity: .88; }
#tracker-popover .tp-btn.danger  { background: #3d1010; color: #fca5a5; }
#tracker-popover .tp-btn.primary { background: #0f2a45; color: #93c5fd; }
#tracker-popover .tp-btn.outline { background: #1a1a30; color: #aaa; }
#tracker-popover .tp-btn.outline:hover { background: #22223a; color: #ccc; }
#tracker-popover .tp-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Hamburger (mobile only) ── */
#nav-hamburger {
    display: none;
    background: none; border: 1px solid #3a3a5a; color: #e0e0e0;
    border-radius: 4px; padding: .3rem .55rem; cursor: pointer;
    font-size: 1.15rem; line-height: 1; flex-shrink: 0;
    margin-left: auto;
}
#nav-hamburger:hover { border-color: #e94560; }

/* ── Mobile nav drawer ── */
#nav-mobile-drawer {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0;
    background: #0c0c1e; border-bottom: 1px solid #2a2a4a;
    z-index: 599; /* below topbar (600) */
    padding: .6rem 1rem;
    flex-direction: column; gap: .2rem;
}
#nav-mobile-drawer.open { display: flex; }
#nav-mobile-drawer a {
    color: #aaa; font-size: .9rem; padding: .5rem .4rem;
    border-radius: 4px; border: 1px solid transparent;
    text-decoration: none; transition: color .15s, border-color .15s;
}
#nav-mobile-drawer a:hover, #nav-mobile-drawer a.active {
    color: #e0e0e0; border-color: #3a3a5a;
}
#nav-mobile-drawer a.active { color: #4a9eff; border-color: #4a9eff; }
/* Mobile view-switch buttons inside drawer */
#nav-mobile-drawer .mob-view-btns {
    display: flex; gap: .4rem; padding-top: .5rem;
    border-top: 1px solid #2a2a4a; margin-top: .2rem;
}
#nav-mobile-drawer .mob-view-btns button {
    flex: 1; background: #12122a; color: #888;
    border: 1px solid #2a2a4a; padding: .4rem .3rem;
    border-radius: 4px; cursor: pointer; font-size: .8rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: all .15s;
}
#nav-mobile-drawer .mob-view-btns button.active {
    color: #e0e0e0; border-color: #e94560; background: #0f3460;
}

/* ── Responsive overrides ── */

/* Medium screens: shrink topbar buttons so they don't wrap or overflow */
@media (max-width: 1100px) {
    #topbar-nav button {
        padding: .25rem .45rem;
        font-size: .74rem;
    }
    #site-topbar .nav-links a {
        padding: .22rem .4rem;
        font-size: .75rem;
    }
    #topbar-api-btn, #topbar-home-btn {
        padding: .25rem .45rem;
        font-size: .72rem;
    }
    #tracker-chip { max-width: 130px; font-size: .67rem; }
}
@media (max-width: 900px) {
    #topbar-nav button {
        padding: .2rem .32rem;
        font-size: .68rem;
    }
    #site-topbar .nav-links a {
        padding: .18rem .3rem;
        font-size: .72rem;
    }
}

@media (max-width: 768px) {
    #site-topbar {
        padding: 0 .75rem;
        gap: .5rem;
        /* Prevent topbar from overflowing the viewport */
        overflow: hidden;
    }
    /* Hide ALL topbar items except brand + hamburger,
       including items injected dynamically by tracker inline script */
    #site-topbar .nav-links,
    #site-topbar .site-nav,
    #topbar-nav,
    #topbar-right,
    #tracker-chip,
    #topbar-user,
    #topbar-api-btn,
    #topbar-home-btn {
        display: none !important;
    }
    #nav-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}