/* =========================================================================
   Site Header — v2 redesign
   -------------------------------------------------------------------------
   Loaded AFTER style.css (and before/after any page-specific stylesheet —
   order relative to those doesn't matter, nothing else in this project
   touches .site-header). Every header/nav rule lives here now, so this
   one file is the single source of truth for the header on every page,
   desktop through mobile.
   ========================================================================= */

:root {
    --header-h: 72px;
    --header-h-mobile: 64px;
}

* { box-sizing: border-box; }

/* ---- Base header shell -------------------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.site-header::before,
.site-header::after { content: none !important; }

body { padding-top: var(--header-h); }

/* Fully opaque while the mobile off-canvas menu is open, so the dark
   backdrop never bleeds through a translucent bar. */
.site-header.nav-open {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
}

/* ---- Logo ---------------------------------------------------------------- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* The source artwork is a near-square mark with the briefcase sitting
   high on the right, so at the old 32px (~1.7x the wordmark's cap
   height) it read as oversized and top-heavy next to the text. 27px
   (~1.4x) brings it back into proportion while staying crisp. */
.logo-img { height: 27px; width: auto; flex-shrink: 0; display: block; }
.logo-text-accent { color: var(--brand); }

/* ---- Desktop primary nav -------------------------------------------------
   .main-nav holds both the link list and .nav-actions. On desktop it's a
   plain inline flex row; the mobile off-canvas transform is added back in
   the breakpoint below. */

.main-nav {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.main-nav-head,
.main-nav-close { display: none; }

.main-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto 0 clamp(20px, 4vw, 56px);
    font-weight: 600;
    font-size: .93rem;
}

.main-nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    color: var(--text-soft);
    white-space: nowrap;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

.main-nav-links a svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--muted);
    transition: color .15s var(--ease);
    flex-shrink: 0;
}

.main-nav-links a:hover { background: var(--paper-alt); color: var(--ink); }
.main-nav-links a:hover svg { color: var(--brand); }

.main-nav-links a.is-active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.main-nav-links a.is-active svg { color: var(--brand); }

.nav-link-chevron { display: none; }

/* ---- Right-hand action cluster ------------------------------------------- */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-actions .btn svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }

/* Install-app: a quiet icon-only pill on desktop (it's a "coming soon"
   feature, not a primary action, so it shouldn't compete visually with
   Login/Register) — expands to a full labelled row inside the mobile
   panel via the breakpoint below. */
.nav-install-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    min-height: 0;
    border-radius: 13px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.nav-install-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.nav-install-label { display: none; }
.nav-install-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    padding: 1px 4px;
    border-radius: var(--radius-pill);
    background: var(--warn);
    color: #fff;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1.5;
    border: 2px solid var(--paper);
    white-space: nowrap;
}
.nav-install-btn[hidden] { display: none; }

.nav-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: .93rem;
    color: var(--ink);
    white-space: nowrap;
    border-radius: var(--radius-pill);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-login svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.nav-login:hover { background: var(--paper-alt); color: var(--brand); }

.site-header .btn {
    min-height: 40px;
    padding: 0 20px;
    font-size: .8rem;
}

.site-header .btn-outline {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
}
.site-header .btn-outline:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.site-header .btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .45);
}
.site-header .btn-primary:hover { box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .55); transform: translateY(-1px); }

/* Desktop notification / messages bells */
.nav-notif { position: relative; display: flex; align-items: center; }

.nav-notif-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.nav-notif-btn svg { width: 18px; height: 18px; stroke-width: 2; }
.nav-notif-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.nav-notif-btn:active { transform: scale(.94); }
.nav-notif-btn[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.nav-chat-label { display: none; }

/* ---- Notification / messages dropdown ------------------------------------ */

.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: min(340px, 88vw);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: 8px;
    max-height: min(420px, 70vh);
    flex-direction: column;
}
.notif-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: var(--white);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}
.notif-dropdown.is-open { display: flex; }

.notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.notif-dropdown-head span { font-size: .85rem; font-weight: 700; color: var(--ink); }
.notif-dropdown-head a { font-size: .75rem; font-weight: 600; color: var(--brand); }
.notif-dropdown-head a:hover { text-decoration: underline; }

.notif-dropdown-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.notif-empty { margin: 0; padding: 20px 10px; font-size: .85rem; color: var(--muted); text-align: center; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-s);
    color: inherit;
    transition: background-color .15s var(--ease);
}
.notif-item:hover { background: var(--paper-alt); }
.notif-item.is-unread { background: var(--brand-soft); }
.notif-item.is-unread:hover { background: var(--brand-soft-2); }

.notif-item-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-item-icon svg { width: 17px; height: 17px; stroke-width: 2.2; }

.notif-accent-brand   { background: var(--brand-soft);  color: var(--brand); }
.notif-accent-danger  { background: #FCE8E8; color: var(--danger); }
.notif-accent-warn    { background: #FEF3E2; color: var(--warn); }
.notif-accent-success { background: #E1F6EE; color: var(--success); }

.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-title { font-size: .83rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.notif-item-message {
    font-size: .78rem;
    color: var(--text-soft);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-item-time { font-size: .7rem; color: var(--muted); margin-top: 1px; }

.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid var(--paper);
}
.notif-badge[hidden] { display: none; }

/* ---- Mobile top-bar icon cluster (search / chat / bell / hamburger) ------ */

.mobile-header-actions {
    display: none;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.mobile-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--paper);
    border: 1.5px solid var(--brand);
    color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    box-shadow: none;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.mobile-icon-btn:active { transform: scale(.94); }
.mobile-icon-btn[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.mobile-icon-btn svg { width: 19px; height: 19px; stroke-width: 2; }

/* Hamburger now matches the other icon buttons in the cluster — same
   squircle footprint, outlined instead of filled, no blue background. */
.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--paper);
    border: 1.5px solid var(--brand);
    color: var(--brand);
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none;
    transition: border-radius .15s var(--ease), transform .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.nav-toggle:active { transform: scale(.94); }
.nav-toggle.is-open { border-radius: 50%; background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.nav-toggle svg { width: 19px; height: 19px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-open .icon-menu { display: none; }
.nav-toggle.is-open .icon-close { display: block; }

/* ---- Backdrop -------------------------------------------------------------- */

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 1;
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.nav-backdrop.is-open { display: block; opacity: 1; }


/* =========================================================================
   Mobile / tablet layout (<= 992px)
   ========================================================================= */

@media (max-width: 992px) {

    :root { --header-h: var(--header-h-mobile); }

    .header-inner { gap: 10px; }

    .mobile-header-actions { display: flex; }

    /* Desktop-only bell — the mobile bell (#notifBtn) covers it instead. */
    .nav-notif { display: none; }

    .bottom-nav { display: flex; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    body.nav-open .bottom-nav { display: none; }

    /* Off-canvas panel — opens from the RIGHT (same side as the
       hamburger/close button that triggers it, so the motion feels
       connected to the control instead of sliding in from the opposite
       edge) and starts BELOW the fixed site header so its own head
       never lands on the same row as the logo + search + close icons
       in .site-header above it. */
    .main-nav {
        position: fixed;
        top: var(--header-h-mobile);
        right: 0;
        left: auto;
        bottom: 0;
        width: min(340px, 88vw);
        height: calc(100vh - var(--header-h-mobile));
        height: calc(100dvh - var(--header-h-mobile));
        background: var(--paper);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
        transform: translateX(100%);
        transition: transform .32s var(--ease);
        box-shadow: -18px 0 44px -14px rgba(16, 24, 40, .32);
        z-index: 2;
    }
    .main-nav.is-open { transform: translateX(0); }

    /* Inner scroll region — separated from .main-nav itself so the
       rounded corners above stay crisp instead of being clipped along
       with the scrollbar. */
    .main-nav-links,
    .main-nav-head { flex-shrink: 0; }
    .main-nav { overflow-y: hidden; }
    .main-nav-links { overflow-y: auto; flex: 1; }

    /* Slim brand-gradient strip along the rounded leading edge — a
       small but deliberate signature touch instead of a plain white
       panel with a drop shadow. */
    .main-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--brand) 0%, var(--brand-light) 45%, #7C3AED 100%);
    }

    .main-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 22px;
        background: var(--paper-alt);
        border-bottom: 1px solid var(--line);
    }
    .main-nav-head-title { font-size: 1.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
    .main-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--paper);
        border: 1px solid var(--line-strong);
        color: var(--ink);
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
    }
    .main-nav-close svg { width: 16px; height: 16px; }
    .main-nav-close:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
    .main-nav-close:active { transform: scale(.92); }

    .main-nav-links {
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 14px 14px 0;
        font-size: 1rem;
    }
    .main-nav-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 10px;
        border-radius: var(--radius-s);
        justify-content: flex-start;
        font-weight: 600;
    }
    .nav-link-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--paper-alt);
        flex-shrink: 0;
        transition: background-color .15s var(--ease);
    }
    .main-nav-links a svg { width: 18px; height: 18px; }
    .nav-link-label { flex: 1; min-width: 0; }
    .main-nav-links a .nav-link-chevron {
        display: block;
        width: 16px;
        height: 16px;
        color: var(--muted);
        flex-shrink: 0;
    }
    .main-nav-links a.is-active { background: var(--brand-soft); color: var(--brand-dark); }
    .main-nav-links a.is-active .nav-link-icon { background: var(--brand); color: #fff; }
    .main-nav-links a.is-active .nav-link-icon svg { color: #fff !important; }
    .main-nav-links a.is-active .nav-link-chevron { color: var(--brand); }

    .nav-actions {
        margin: 16px 14px 20px;
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .nav-actions .btn,
    .nav-actions .nav-login,
    .nav-actions .nav-install-btn,
    .nav-actions .nav-chat-btn { width: 100%; }

    .nav-actions .btn { min-height: 48px; }
    .nav-actions .nav-login { justify-content: center; padding: 13px 0; }

    /* Full labelled rows once inside the panel — icon-only styling above
       is desktop-only. */
    .nav-install-btn {
        height: auto;
        min-height: 48px;
        border-radius: var(--radius-pill);
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 18px;
        font-weight: 600;
        font-size: .95rem;
        text-transform: none;
    }
    .nav-install-label { display: inline; }
    .nav-install-badge { position: static; margin-left: auto; border: none; }

    .nav-actions .nav-chat-btn {
        height: auto;
        border-radius: var(--radius-pill);
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 18px;
        font-weight: 600;
        font-size: .95rem;
    }
    .nav-actions .nav-chat-label { display: inline; }
    .nav-actions .nav-chat-btn .notif-badge { position: static; margin-left: auto; border: none; }
}

@media (max-width: 420px) {
    /* Keep a sliver of backdrop showing even on the smallest phones —
       a full edge-to-edge swap reads like a page change, a narrow
       drawer with the dimmed page peeking behind it reads as a
       deliberate overlay. */
    .main-nav { width: 92vw; }
}