/* ============================================================
   TRAKANALYTICA DATA LAB — HEADER STYLES
   Scope: topbar + navbar (loaded globally via header.php)
   ============================================================ */

/* ===== TOPBAR ===== */
.topbar {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
    border-bottom: none;
    padding: 9px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.topbar-inner span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.topbar a {
    color: #e9d5ff;
    font-weight: 600;
}
.topbar a:hover { color: #ffffff; }

/* ===== NAVBAR ===== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    transition: var(--transition);
}
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: var(--border-medium);
    box-shadow: 0 4px 24px rgba(109,40,217,0.08);
}
.nav-container {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.nav-logo img {
    height: 56px;
    width: auto;
    object-fit: contain;
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
    margin-left: 0;
}
.nav-menu-close-row { display: none; }
.nav-item > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
}
.nav-item > a:hover,
.nav-item.active > a {
    color: var(--text-primary);
    background: var(--accent-glow-soft);
}
.nav-item.active > a { color: var(--accent-secondary); }

/* Dropdown */
.nav-item.has-dropdown { position: relative; }
/* Invisible bridge fills the gap so mouse doesn't leave the hover zone */
.nav-item.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 16px;
    background: transparent;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 340px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 8px;
    padding-top: 12px;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    z-index: 100;
}
/* Dropdown — desktop hover-expand only. Scoped to min-width so it can never
   leak onto the drawer nav: iOS/Android trigger :hover on tap, and without
   this guard that would layer a translateX() shift on top of the drawer's
   own static full-width dropdown, shoving it sideways over the page. */
@media (min-width: 1441px) {
    .nav-item.has-dropdown:hover .dropdown-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.dropdown-item:hover { background: var(--accent-glow-soft); }
.dropdown-item strong { display: block; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 2px; }
.dropdown-item span { font-size: 0.78rem; color: var(--text-muted); }
.dropdown-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dropdown-icon.health { background: var(--health-glow); color: var(--health); }
.dropdown-icon.economic { background: var(--economic-glow); color: var(--economic); }
.dropdown-icon.survey { background: var(--survey-glow); color: var(--survey); }
.dropdown-icon.training { background: var(--training-glow); color: var(--training); }
.dropdown-icon.all { background: linear-gradient(135deg,#ede9fe,#ddd6fe); color: #6d28d9; }
.dropdown-item-all strong { color: #6d28d9 !important; }
.dropdown-item-all:hover { background: rgba(109,40,217,.06); }
.dropdown-divider { height: 1px; background: var(--border-subtle, #f0f0f0); margin: 4px 2px; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== RESPONSIVE — HEADER =====
   The full inline menu needs ~1500px to lay out its 7 items without
   crowding or wrapping, so the off-canvas / hamburger nav kicks in for
   any screen narrower than that (covers virtually all laptops and
   tablets, not just phones) and only true wide-monitor widths get the
   horizontal bar. Everything below shares one breakpoint so the
   hamburger, drawer, logo size and auth buttons switch over together. */
@media (max-width: 1440px) {
    .nav-menu {
        position: fixed;
        top: 0; right: -100%;
        width: 100%;
        max-width: none;
        height: 100vh;
        background: white;
        border-left: none;
        border-top: 1px solid var(--border-subtle, #eee);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 24px 40px;
        gap: 4px;
        transition: var(--transition-slow);
        z-index: 999;
        overflow-y: auto;
        box-shadow: none;
    }
    /* JS sets inline top/height on open, measured live from the navbar's
       real rendered height — this default only applies before that runs. */
    .nav-menu.open { right: 0; }
    /* Close (×) button pinned to the top of the drawer itself, so it's
       obviously part of the panel instead of relying on the hamburger
       icon back in the top bar, which is easy to miss once the drawer
       is covering the screen. */
    .nav-menu-close-row {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-bottom: 12px;
    }
    .nav-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1.5px solid var(--border-medium, #ddd);
        background: #fff;
        color: var(--text-primary);
        cursor: pointer;
        transition: var(--transition);
    }
    .nav-menu-close:hover { background: var(--accent-glow-soft); border-color: #6d28d9; }
    .nav-item { width: 100%; }
    .nav-item > a {
        width: 100%;
        justify-content: space-between;
        padding: 13px 14px;
        border-left: 3px solid transparent;
        border-radius: 8px;
    }
    .nav-item.active > a {
        border-left-color: #6d28d9;
        background: var(--accent-glow-soft);
        border-radius: 0 8px 8px 0;
    }
    .dropdown-menu {
        position: static;
        transform: none;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        background: var(--accent-glow-soft);
        border-radius: var(--radius-sm);
        margin-top: 4px;
        display: none;
    }
    .nav-item.has-dropdown.dropdown-open .dropdown-menu { display: block; }
    .nav-item.has-dropdown.dropdown-open > a svg { transform: rotate(180deg); }
    .nav-item > a svg { transition: var(--transition); }

    .hamburger { display: flex !important; }
    .nav-container { padding-top: 14px; padding-bottom: 14px; gap: 16px; }
    .nav-logo img { height: 48px; }

    /* .nav-menu becomes position:fixed above (off-canvas drawer), which pulls
       it out of the flex flow — nothing is left to fill the middle space
       between the logo and these buttons, so push this group to the right
       edge explicitly instead of relying on the (now absent) flex:1 sibling. */
    .nav-actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }
    /* Hide the logged-in user dropdown pill; user can open hamburger instead */
    .nav-user-menu { display: none; }
    /* But always show Sign In / Register for logged-out users */
    .nav-actions .btn-sm {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .topbar-inner span:first-child { display: none; }
}

@media (max-width: 480px) {
    .topbar { display: none; }
    .nav-logo img { height: 42px; }
    .nav-container { gap: 12px; }
}