/* =============================================================
   Top Nav -- token layer (--tnav-*)
   Reskin scoped to the global top navigation. Maps to the canonical
   brand tokens in brand-tokens.css; re-points in body.dark-mode only.
   ============================================================= */
:root {
    --tnav-surface:          rgba(252, 253, 254, 0.92); /* floating bar bg (browse pages) */
    --tnav-surface-solid:    #FCFDFE;                    /* opaque bar bg (reader dock + mobile) */
    --tnav-border:           rgba(15, 40, 70, 0.08);     /* hairline bar border */
    --tnav-ink:              #1B2733;                    /* primary nav text */
    --tnav-ink-muted:        rgba(34, 34, 34, 0.62);     /* inactive tab / icon */
    --tnav-ink-strong:       var(--brand-charcoal, #222222);
    --tnav-accent:           var(--brand-primary, #00B4FF);
    --tnav-accent-deep:      var(--brand-secondary, #0174B1);
    --tnav-accent-tint:      rgba(0, 180, 255, 0.12);    /* active pill bg */
    --tnav-accent-tint-soft: rgba(0, 180, 255, 0.08);    /* hover bg */
    --tnav-cta:              var(--brand-cta, #FFAA00);
    --tnav-cta-ink:          var(--brand-charcoal, #222222);
    --tnav-chip-bg:          #FFFFFF;
    --tnav-chip-border:      rgba(15, 40, 70, 0.12);
    --tnav-shadow:           0 6px 20px rgba(20, 45, 85, 0.08);
    --tnav-radius:           20px;                        /* refined from full pill */
    --tnav-ctl:              40px;                        /* control button size */
    --tnav-menu-surface:     #FFFFFF;
    --tnav-menu-ink:         #333333;
    --tnav-menu-ink-muted:   #666666;
    --tnav-divider:          #EEEEEE;
    --tnav-label-ink:        #888888;
    --tnav-danger:           #DC3545;
    --tnav-danger-hover:     #C82333;
    --tnav-admin:            #7C3AED;
    --tnav-admin-hover:      #6D28D9;
}

body.dark-mode {
    --tnav-surface:          rgba(28, 28, 32, 0.92);
    --tnav-surface-solid:    #1C1C20;
    --tnav-border:           rgba(255, 255, 255, 0.08);
    --tnav-ink:              #ECECEC;
    --tnav-ink-muted:        rgba(236, 236, 236, 0.62);
    --tnav-ink-strong:       #F5F5F5;
    --tnav-accent:           var(--brand-primary-light, #4DB8FF);
    --tnav-accent-deep:      #5CC4FF;
    --tnav-accent-tint:      rgba(0, 180, 255, 0.20);
    --tnav-accent-tint-soft: rgba(0, 180, 255, 0.14);
    --tnav-chip-bg:          #26262C;
    --tnav-chip-border:      rgba(255, 255, 255, 0.12);
    --tnav-shadow:           0 6px 22px rgba(0, 0, 0, 0.40);
    --tnav-menu-surface:     #1E1E1E;
    --tnav-menu-ink:         #E0E0E0;
    --tnav-menu-ink-muted:   #9CA3AF;
    --tnav-divider:          rgba(255, 255, 255, 0.10);
    --tnav-label-ink:        #6B7280;
    --tnav-danger:           #F87171;
    --tnav-danger-hover:     #FCA5A5;
    --tnav-admin:            #A78BFA;
    --tnav-admin-hover:      #C4B5FD;
}

/* --- Top Nav (shared frame) --- */
/* Shared top-nav safe-area clearance. env(safe-area-inset-top) covers notched
   iOS; --android-nav-inset-top is forwarded by the Android host because Android
   WebView reports env() as 0 in an edge-to-edge WebView. Defined once and reused
   by the fixed top nav and by everything positioned below it (hero offsets, the
   profile/notification dropdowns) so the inset is accounted for in one place.
   Resolves to 0 on web/desktop. */
:root {
    --topnav-inset-top: max(env(safe-area-inset-top), var(--android-nav-inset-top, 0px));
}

.unqbd-topnav-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    background: transparent;
    width: 100%;
    margin-bottom: 0;
    /* Clear the status bar at EVERY width. Previously this lived only in the
       max-width:600px rule below, so Android tablets/foldables/landscape (>600px)
       left the fixed nav under the status bar and its taps got swallowed again. */
    padding-top: var(--topnav-inset-top);
}

.unqbd-topnav-container {
    max-width: 1300px;
    margin: 1rem auto 0;  /* Top spacing for desktop/tablet floating effect */
    background: var(--tnav-surface);
    border: 1px solid var(--tnav-border);
    border-radius: var(--tnav-radius);
    box-shadow: var(--tnav-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.8rem;
    gap: 1.5rem;
    backdrop-filter: blur(8px); /* Subtle blur for depth without compromising clarity */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
}

/* Ensure hero can sit at the very top of the viewport (nav overlays it) */
.page-index,
.page-index-shell,
.min-vh-100 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.unqbd-topnav-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 160px;
}

.unqbd-topnav-logo img {
    height: 52px;
    width: auto;
    display: block;
}

.unqbd-topnav-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Sign in is a plain text link; Start Free below is the loud CTA. */
.unqbd-topnav-signin {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--tnav-ink-strong);
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    opacity: 0.82;
    transition: opacity .15s ease, background .15s ease;
}
.unqbd-topnav-signin:hover,
.unqbd-topnav-signin:focus {
    color: var(--tnav-ink-strong);
    opacity: 1;
    background: var(--tnav-accent-tint-soft);
}

/* Primary Start Free button -- matches the hero's orange CTA style. */
.unqbd-topnav-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--tnav-cta-ink);
    background: var(--tnav-cta);
    padding: 0.62rem 1.1rem;
    border-radius: 0.625rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 14px -6px rgba(255, 170, 0, 0.6);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.unqbd-topnav-start:hover,
.unqbd-topnav-start:focus {
    color: var(--tnav-cta-ink);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 20px -8px rgba(255, 170, 0, 0.65);
}

/* Dark mode refinements for guest nav utilities */
body.dark-mode .unqbd-topnav-container {
    background: var(--tnav-surface);
    border: 1px solid var(--tnav-border);
}

body.dark-mode .unqbd-topnav-logo img {
    filter: brightness(1.05) contrast(1.05);
}

/* Dark mode mobile adjustments */
@media (max-width: 600px) {
    body.dark-mode .unqbd-topnav-sticky {
        background-color: var(--tnav-surface-solid);
    }

    body.dark-mode .unqbd-topnav-container {
        background: var(--tnav-surface-solid);
        border: none;
        border-bottom: 1px solid var(--tnav-border);
    }
}

@media (max-width: 900px) {
    /* Tablet: slight reduction but keep floating style with top spacing */
    .unqbd-topnav-container {
        max-width: 96vw;
        margin-top: 0.75rem;  /* Keep some top spacing on tablet */
        padding: 0.65rem 1.2rem;
        gap: 0.75rem;
        border-radius: 18px;
    }

    .unqbd-topnav-logo {
        min-width: 100px;
        flex-shrink: 1;
    }

    .unqbd-topnav-logo img {
        height: 44px;
    }

    /* The .topnav-main-tabs gap / .topnav-main-tab padding trim used to live here. It has to
       sit AFTER the base rules (see the comment near the tablet block below "Responsive: hide
       tabs on mobile") because a media query carries no extra specificity -- at equal
       specificity the later rule in source order wins, media block or not. Left here, this
       override was silently beaten by the base .topnav-main-tab padding declared further down
       the file and was completely inert. Do not move it back. */

    .unqbd-topnav-signin {
        font-size: 0.95rem;
        padding: 0.35rem 0.5rem;
    }
    .unqbd-topnav-start {
        font-size: 0.9rem;
        padding: 0.55rem 0.9rem;
    }
}

@media (max-width: 600px) {
    /* Modern mobile app experience - edge-to-edge with safe area support */
    .unqbd-topnav-sticky {
        /* Status-bar clearance (padding-top) is now applied globally on
           .unqbd-topnav-sticky above. Keep the bar fully opaque on mobile so the
           safe-area zone matches the nav bar exactly. */
        background-color: var(--tnav-surface-solid);
    }

    .unqbd-topnav-container {
        /* Remove rounded corners for full-width mobile app feel */
        border-radius: 0;
        /* Remove margin and make edge-to-edge */
        margin: 0;
        max-width: 100%;
        /* Trim the top padding so the bar hugs just under the status bar -- the
           safe-area clearance above already accounts for the status bar, so the
           default 0.75rem on top of it read as too much empty space. Side padding
           keeps the safe-area insets; bottom stays for balance against the border. */
        padding: 0.3rem max(1rem, env(safe-area-inset-right)) 0.7rem max(1rem, env(safe-area-inset-left));
        gap: 0.5rem;
        /* Replace shadow with subtle bottom border for cleaner mobile look */
        box-shadow: none;
        border: none;
        border-bottom: 1px solid var(--tnav-border);
        /* Opaque so body text never ghosts through on mobile */
        background: var(--tnav-surface-solid);
    }

    .unqbd-topnav-logo {
        min-width: 80px;
    }

    .unqbd-topnav-logo img {
        height: 40px;
        max-width: 100px;
    }

    .unqbd-topnav-signin {
        font-size: 0.9rem;
        padding: 0.35rem 0.4rem;
        border-radius: 0.4rem;
    }
    .unqbd-topnav-start {
        font-size: 0.85rem;
        padding: 0.5rem 0.85rem;
    }
}

/* --- Reader: dock + solidify ---
   On the reading page the floating translucent bar lets body text ghost
   through it and slide through the gap above it (distracting while reading).
   Scoped via :has() so it needs no markup/JS change and degrades to the
   default floating bar on the rare engine without :has() support. The bar
   geometry is preserved, so the reader's own sticky chapter-nav offset
   (book-reader.css .book-view-chapter-nav.is-stuck { top: 85px }) stays valid.
   Mobile (<=600px) is already edge-to-edge + opaque above, so target >600px. */
@media (min-width: 601px) {
    body:has(.book-view-page) .unqbd-topnav-sticky {
        background: var(--tnav-surface-solid);
        box-shadow: 0 1px 0 var(--tnav-border), 0 2px 12px rgba(20, 45, 85, 0.06);
    }

    body:has(.book-view-page) .unqbd-topnav-container {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-color: transparent;
    }

    body.dark-mode:has(.book-view-page) .unqbd-topnav-sticky {
        box-shadow: 0 1px 0 var(--tnav-border), 0 2px 14px rgba(0, 0, 0, 0.45);
    }

    /* --- Reader: auto-hide on scroll (polish on top of the dock) ---
       The reader scroll handler (initChapterNavSticky in shared.js) toggles
       .tnav-hidden to slide the bar away while reading and reveal it on scroll-up.
       The stuck chapter-nav offset rises in lockstep (book-reader.css). Scoped >600px
       to match the dock; the handler also guards menus/focus and reduced motion. */
    body:has(.book-view-page) .unqbd-topnav-sticky {
        transition: transform 0.25s ease;
    }

    body:has(.book-view-page) .unqbd-topnav-sticky.tnav-hidden {
        transform: translateY(-100%);
    }

    /* A hidden bar is still tabbable; keep it on-screen whenever focus is inside it so a
       keyboard user never lands on an off-screen control (the JS focusin handler also
       clears the hidden state, but this guarantees visibility independent of JS timing). */
    body:has(.book-view-page) .unqbd-topnav-sticky.tnav-hidden:focus-within {
        transform: none;
    }
}

/* Reduced-motion: never animate or hide the bar. The handler already skips adding
   .tnav-hidden, but drop the transform/transition here too as a second guard. */
@media (prefers-reduced-motion: reduce) {
    body:has(.book-view-page) .unqbd-topnav-sticky {
        transition: none;
    }

    body:has(.book-view-page) .unqbd-topnav-sticky.tnav-hidden {
        transform: none;
    }
}

/* --- Top Nav (member) - Main Tabs --- */
.topnav-main-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* The flex CONTAINER has to be allowed to shrink too, or per-tab min-width: 0
       never gets the chance to apply and the row pushes the auth cluster out. */
    min-width: 0;
}

.topnav-main-tab {
    /* Also used as an <a> in the guest nav (crawlable Books / Audiobooks links), so it
       must reset the default link underline; display/align keep the padded pill identical
       whether the element is a <button> (member) or an <a> (guest). */
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.85rem;
    color: var(--tnav-ink-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Single-word labels mean min-content == max-content, so without these the row
       cannot give ground and overflow lands on the auth cluster instead of a label.
       Clipping degrades gracefully; bursting the container does not. See
       TopNavOverflowCssGuardTests.
       Note this does NOT degrade the way the bottom bar does. text-overflow: ellipsis is
       declared below, but .topnav-main-tab is display: inline-flex, so its text becomes an
       anonymous flex item -- the ellipsis glyph is unlikely to paint. overflow: hidden is
       what actually saves it, by hard-clipping the label instead of letting it push the
       container wider. The safety property (no burst) holds either way; only the visible
       failure mode differs (hard clip here, a real "..." on .bottom-nav-item span, which is
       a block-level element and does render the glyph). */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topnav-main-tab:hover {
    background-color: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

.topnav-main-tab:focus-visible {
    outline: 2px solid var(--tnav-accent-deep);
    outline-offset: 2px;
}

/* The guest Browse / Audiobooks tabs ride the shared .topnav-main-tabs, which hides at
   <=768px (a taller two-row bar would push the fixed nav over the landing hero, and the
   member nav falls back to its bottom nav at that width). Phone-width visitors reach the
   same catalog via the footer Browse links instead, so no override is needed here. */

/* Active tab -- Option A: soft sky pill.
   To switch to Option B (bookmark underline), comment this rule and
   uncomment the ".topnav-main-tab.active" block marked OPTION B below. */
.topnav-main-tab.active {
    background: var(--tnav-accent-tint);
    color: var(--tnav-accent-deep);
    font-weight: 600;
}

/* OPTION B -- bookmark underline (deep-blue label + CTA-orange rule).
.topnav-main-tab.active {
    position: relative;
    background: transparent;
    color: var(--tnav-accent-deep);
    font-weight: 600;
}
.topnav-main-tab.active::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.15rem;
    height: 3px;
    border-radius: 3px;
    background: var(--tnav-cta);
}
*/

/* Profile/logout link style (legacy) */
.unqbd-topnav-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 2rem;
    padding: 0.5rem 1.2rem;
    background: transparent;
    color: var(--tnav-ink-muted);
    border: 1px solid var(--tnav-chip-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.unqbd-topnav-profile:hover,
.unqbd-topnav-profile:focus {
    background-color: var(--tnav-accent-tint-soft);
    border-color: var(--tnav-accent);
    color: var(--tnav-ink-strong);
}

/* Dark mode for member nav */
body.dark-mode .topnav-main-tab {
    color: var(--tnav-ink-muted);
}

body.dark-mode .topnav-main-tab:hover {
    background-color: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

body.dark-mode .topnav-main-tab.active {
    background: var(--tnav-accent-tint);
    color: var(--tnav-accent);
}

/* Responsive: hide tabs on mobile, show condensed menu */
@media (max-width: 768px) {
    .topnav-main-tabs {
        display: none;
    }
}

/* Tablet: recover tab-row width lost to the base padding/gap above (see
   TopNavOverflowCssGuardTests.TabletBlock_TrimsTabPaddingAndGap_ToFitFiveTabs).
   This block MUST come after .topnav-main-tabs / .topnav-main-tab / .topnav-main-tab.active
   above -- a media query adds NO extra specificity over a plain selector, so at equal
   specificity the LATER rule in source order wins regardless of which one is inside an
   @media block. The first attempt at this fix lived up in the line-196 tablet block, before
   those base rules, and was completely inert for exactly this reason: the base rule always
   won. Do not move this back above them.
   Five tabs at the base 1rem side padding overflow the 96vw container from 769px (where
   this file stops hiding the row) up to about 925px. At 0.5rem horizontal padding the
   measured shortfall at 769px was only about 0.6px -- technically enough, but too tight to
   trust across browsers/zoom levels -- so trim to 0.4rem for real headroom.
   Breakpoint is 950px, NOT the container's own 900px: this TRIM BLOCK is itself scoped to
   max-width: 950px, and it is the one that owns .topnav-main-tab's padding override -- the
   line-196 block never touches .topnav-main-tab at all. Cap this block at 900px instead and
   its own padding override would revert right there, straight back to the base 1rem, and the
   row would be back to its natural width of about 457.3px, which does not fit the container
   again until roughly 950px. Measured in a real browser: 769-900px clean with this trim,
   901-~945px clipped (no ellipsis glyph -- see the note on .topnav-main-tab above; overflow
   just hard-clips) with the old 900px cutoff, 950px+ clean either way. Keep this at 950 even though the
   line-196 container/logo/signin block above stays at 900 -- they are recovering from two
   different things and just happen to have shared a cutoff before. */
@media (max-width: 950px) {
    .topnav-main-tabs {
        gap: 0.375rem;
    }

    .topnav-main-tab {
        padding: 0.5rem 0.4rem;
    }
}

@media (max-width: 600px) {
    /* Hide profile text on mobile, keep icon only */
    .unqbd-topnav-profile {
        font-size: 0.9rem;
        padding: 0.5rem;
        border-radius: 50%;
        min-width: 42px;
        min-height: 42px;
        justify-content: center;
    }

    .unqbd-topnav-profile span {
        display: none;
    }

    .unqbd-topnav-profile i {
        font-size: 1.3rem;
    }
}

/* --- Top Nav Icon Buttons (unified control cluster) --- */
.topnav-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: var(--tnav-ctl);
    height: var(--tnav-ctl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tnav-ink-muted);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.topnav-icon-btn:hover {
    background-color: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

body.dark-mode .topnav-icon-btn {
    color: var(--tnav-ink-muted);
}

body.dark-mode .topnav-icon-btn:hover {
    background-color: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

/* Theme toggle -- match the icon-button cluster when inside the nav */
.topnav-theme .theme-toggle-button {
    width: var(--tnav-ctl);
    height: var(--tnav-ctl);
    padding: 0;
    border-radius: 50%;
    color: var(--tnav-ink-muted);
}

.topnav-theme .theme-toggle-button:hover {
    background: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
    opacity: 1;
}

body.dark-mode .topnav-theme .theme-toggle-button {
    color: var(--tnav-ink-muted);
}

body.dark-mode .topnav-theme .theme-toggle-button:hover {
    background: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

/* --- Profile Dropdown --- */
.profile-dropdown-container {
    position: relative;
}

.profile-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--tnav-chip-bg);
    border: 1px solid var(--tnav-chip-border);
    border-radius: 2rem;
    padding: 0.3rem 0.55rem 0.3rem 0.35rem;
    cursor: pointer;
    color: var(--tnav-ink-muted);
    font-size: 1.25rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.profile-dropdown-trigger:hover {
    border-color: var(--tnav-accent);
    background: var(--tnav-accent-tint-soft);
}

.profile-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.profile-chevron.open {
    transform: rotate(180deg);
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--tnav-menu-surface);
    border: 1px solid var(--tnav-border);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    z-index: 1010;
    animation: dropdownFadeIn 0.15s ease-out;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-menu-section {
    padding: 0.25rem 0;
}

.profile-menu-divider {
    height: 1px;
    background: var(--tnav-divider);
    margin: 0.5rem 0.75rem;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    color: var(--tnav-menu-ink);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.profile-menu-item:hover {
    background-color: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

.profile-menu-item i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    color: var(--tnav-menu-ink-muted);
}

.profile-menu-item:hover i {
    color: var(--tnav-accent);
}

.profile-menu-item-logout {
    color: var(--tnav-danger);
}

.profile-menu-item-logout i {
    color: var(--tnav-danger);
}

.profile-menu-item-logout:hover {
    background-color: rgba(220, 53, 69, 0.08);
    color: var(--tnav-danger-hover);
}

.profile-menu-item-logout:hover i {
    color: var(--tnav-danger-hover);
}

/* Dark mode for profile dropdown */
body.dark-mode .profile-dropdown-trigger {
    color: var(--tnav-ink-muted);
    background: var(--tnav-chip-bg);
    border-color: var(--tnav-chip-border);
}

body.dark-mode .profile-dropdown-trigger:hover {
    background-color: var(--tnav-accent-tint-soft);
    border-color: var(--tnav-accent);
}

body.dark-mode .profile-dropdown-menu {
    background: var(--tnav-menu-surface);
    border: 1px solid var(--tnav-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .profile-menu-divider {
    background: var(--tnav-divider);
}

body.dark-mode .profile-menu-item {
    color: var(--tnav-menu-ink);
}

body.dark-mode .profile-menu-item i {
    color: var(--tnav-menu-ink-muted);
}

body.dark-mode .profile-menu-item:hover {
    background-color: var(--tnav-accent-tint-soft);
    color: var(--tnav-accent);
}

body.dark-mode .profile-menu-item:hover i {
    color: var(--tnav-accent);
}

body.dark-mode .profile-menu-item-logout {
    color: var(--tnav-danger);
}

body.dark-mode .profile-menu-item-logout i {
    color: var(--tnav-danger);
}

body.dark-mode .profile-menu-item-logout:hover {
    background-color: rgba(248, 113, 113, 0.12);
    color: var(--tnav-danger-hover);
}

body.dark-mode .profile-menu-item-logout:hover i {
    color: var(--tnav-danger-hover);
}

/* Responsive adjustments for profile dropdown */
@media (max-width: 600px) {
    .profile-dropdown-trigger {
        padding: 0.4rem 0.6rem;
        font-size: 1.1rem;
    }

    .profile-chevron {
        display: none;
    }

    .profile-dropdown-menu {
        position: fixed;
        top: calc(var(--topnav-inset-top) + 64px);
        right: 0;
        left: 0;
        bottom: auto;
        min-width: 100%;
        max-height: calc(100vh - var(--topnav-inset-top) - 100px);
        border-radius: 0 0 1rem 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 1rem;
    }
}

/* When backdrop-filter is supported, the nav creates a containing block
   for fixed elements, so top: 100% correctly positions below the nav */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    @media (max-width: 600px) {
        .profile-dropdown-menu {
            top: 100%;
            max-height: calc(100vh - 140px);
            padding-bottom: 1rem;
        }
    }
}

/* Profile menu section labels */
.profile-menu-label {
    padding: 0.5rem 1rem 0.25rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tnav-label-ink);
}

body.dark-mode .profile-menu-label {
    color: var(--tnav-label-ink);
}

/* Admin menu item styling */
.profile-menu-item-admin {
    color: var(--tnav-admin);
}

.profile-menu-item-admin i {
    color: var(--tnav-admin);
}

.profile-menu-item-admin:hover {
    background-color: rgba(124, 58, 237, 0.08);
    color: var(--tnav-admin-hover);
}

.profile-menu-item-admin:hover i {
    color: var(--tnav-admin-hover);
}

body.dark-mode .profile-menu-item-admin {
    color: var(--tnav-admin);
}

body.dark-mode .profile-menu-item-admin i {
    color: var(--tnav-admin);
}

body.dark-mode .profile-menu-item-admin:hover {
    background-color: rgba(167, 139, 250, 0.12);
    color: var(--tnav-admin-hover);
}

body.dark-mode .profile-menu-item-admin:hover i {
    color: var(--tnav-admin-hover);
}

/* Profile avatar image in dropdown trigger */
.profile-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-primary, #00b4ff);
}

.profile-dropdown-trigger .profile-avatar-img {
    margin-right: 0.25rem;
}

body.dark-mode .profile-avatar-img {
    border-color: var(--brand-primary-light, #4DB8FF);
}