/* ============================================================
   LUMICHESS SIDEBAR NAVIGATION
   Vertical left sidebar for all authenticated pages.
   ============================================================ */

.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 186px;
    height: 100vh;
    background: var(--lumi-bg-nav);
    border-right: 1px solid var(--lumi-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    padding: 0;
}

/* ── Logo ─────────────────────────────────────────────────── */

.nav-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Left padding matches the nav-link icon column (.nav-links padding 2 +
       .nav-link padding 12 = 14px) — wood-tile mark sits in the same column
       as the link icons. */
    padding: 24px 8px 20px 14px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 27px;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

/* Wood-tile mark — Lumichess primary brand icon (matches /home hero) */
.nav-logo__mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-right: 6px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.nav-logo__mark svg { display: block; width: 100%; height: 100%; }

.nav-logo .logo-amber { color: #D4A44B; }
.nav-logo .logo-cream { color: #E8E4DF; }
.nav-logo .logo-i {
    position: relative;
    color: #D4A44B;
}
.nav-logo .logo-diamond {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    filter: none;
    width: 27px;
    height: 27px;
    top: 2px;
    left: calc(50% + 1px);
    transform: translate(-50%, -50%);
}

/* ── Nav Links ─────────────────────────────────────────────── */

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Left padding 2 + .nav-link padding-left 12 = 14px — aligns link icons
       with the nav-logo's wood-tile mark (same 14px left offset). */
    padding: 8px 10px 8px 2px;
    flex: 1;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--lumi-text-primary);
    text-decoration: none;
    font-family: var(--lumi-font);
    font-size: 17px;
    font-weight: 500;
    padding: 11px 12px;
    border-radius: var(--lumi-radius-sm);
    transition: color var(--lumi-ease), background var(--lumi-ease);
}

.nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.nav-link__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.nav-link__icon svg {
    width: 20px;
    height: 20px;
}

/* "soon" variant — coming-soon nav items rendered with a small amber badge,
   muted text colour, and no pointer interaction. */
.nav-link--soon {
    color: var(--lumi-text-muted, rgba(245, 230, 200, 0.55));
    cursor: default;
}
.nav-link--soon:hover,
.nav-link--soon:focus {
    background: transparent;
    color: var(--lumi-text-muted, rgba(245, 230, 200, 0.55));
}
.nav-link__soon {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(212, 164, 75, 0.14);
    color: #D4A44B;
    line-height: 1;
}

/* Hide Learn nav link until Learn module ships. Remove this rule to re-enable. */
.nav-link[href="/learn.html"],
.nav-link[href="/learn"],
.nav-tab[data-nav="lessons"] {
    display: none !important;
}

/* ── User Section (bottom) ────────────────────────────────── */

.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 16px;
    border-top: 1px solid var(--lumi-border);
}

/* Unified pill: Profile (signed-in) + Sign in (guest) */
.nav-user__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--lumi-border);
    color: var(--lumi-text-primary);
    font-family: var(--lumi-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--lumi-ease), border-color var(--lumi-ease), color var(--lumi-ease);
}
.nav-user__pill:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 164, 75, 0.35);
}

/* Profile pill: avatar + name + gear */
.nav-user__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0B35A, #A67B2B);
    color: #1a1a17;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.nav-user__name {
    flex: 1;
    min-width: 0;
    font-family: var(--lumi-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user__gear {
    width: 14px;
    height: 14px;
    color: var(--lumi-text-muted);
    flex-shrink: 0;
    transition: color var(--lumi-ease);
}
.nav-user__pill--profile:hover .nav-user__gear {
    color: var(--lumi-accent, #D4A44B);
}

/* Auth-pill visibility is controlled by an `html.lumi-auth-{guest,user}`
   class set synchronously by a pre-paint script in each hosting page
   (reads the Supabase session from localStorage before paint).

   Defensive default: guest "Sign in" pill is visible BY DEFAULT, with the
   profile pill hidden. If auth-prepaint.js doesn't run (stale cache,
   service-worker race, blocked script), the footer still shows the Sign
   in pill instead of going empty. lumi-auth-user flips both pills. */
.js-nav-auth-user  { display: none; }
.js-nav-auth-guest { display: flex; }
html.lumi-auth-user .js-nav-auth-guest { display: none; }
html.lumi-auth-user .js-nav-auth-user  { display: flex; }

/* Sign in pill: filled amber */
.nav-user__pill--signin {
    justify-content: center;
    background: var(--lumi-accent, #D4A44B);
    border-color: var(--lumi-accent, #D4A44B);
    color: #1a1a17;
}
.nav-user__pill--signin:hover {
    background: #E0B35A;
    border-color: #E0B35A;
}

/* ── Main Content Offset ──────────────────────────────────── */

.app-main {
    margin-left: 186px;
    min-height: 100vh;
}

/* ── Mobile ────────────────────────────────────────────────── */

/* ── Mobile: sidebar becomes bottom tab bar ──────────────── */
@media (max-width: 768px) {
    /* Safety net: prevent any stray overflowing element from
       producing a horizontal scrollbar that eats bottom viewport
       space and shifts the fixed nav up. */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .side-nav {
        /* !important on every positioning prop so no page CSS can
           clobber it. Some React pages (insights, profile-report)
           were breaking the fix; defensive declarations eliminate
           specificity / source-order ambiguity. */
        position: fixed !important;
        box-sizing: border-box !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        flex-direction: row !important;
        border-right: none;
        border-top: 1px solid var(--lumi-border);
        padding: 0 !important;
        /* iOS safe-area inset so the bar clears the home indicator.
           box-sizing: border-box ensures the padding counts INSIDE
           the declared height, otherwise content-box adds padding
           outside and the nav renders 34px taller than intended. */
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        height: calc(68px + env(safe-area-inset-bottom, 0)) !important;
        /* Force a new stacking context so the nav isolates from
           any ancestor's transform/filter/contain side effects. */
        isolation: isolate;
    }
    .nav-logo {
        display: none;
    }
    .nav-links {
        flex: 1;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        padding: 0;
        gap: 0;
    }
    .nav-link {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 10px 2px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 0;
        color: var(--lumi-text-muted, #8a8a85);
        text-align: center;
        line-height: 1.1;
    }
    .nav-link.active {
        background: transparent;
        color: var(--lumi-amber, #E0B35A);
    }
    .nav-link:hover {
        background: transparent;
    }
    .nav-link__icon {
        width: 28px;
        height: 28px;
    }
    .nav-link__icon svg {
        width: 26px;
        height: 26px;
    }
    .nav-user {
        display: none;
    }
    /* Content gets the full viewport width; reserve space for bottom bar.
       Use padding-bottom instead of margin-bottom so the space is
       reserved INSIDE the element — necessary for pages like
       puzzles.html (.puzzle-hub) that are their own scroll
       containers with min-height: 100vh. margin-bottom would push
       a sibling down but wouldn't clear a fixed-nav overlay on an
       internal scroller. !important because page-specific CSS
       (e.g. .hp-dash padding shorthand in homepage.css, or
       .ins-page / .pr-page 100vh + 64px padding) loads after
       nav.css and wins on equal specificity otherwise. */
    .app-main,
    .db-layout,
    .monitor-setup,
    .monitor-loading,
    .monitor-main,
    .ins-page,
    .pr-page {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
        box-sizing: border-box;
    }
    /* React pages (.ins-page / .pr-page) lock themselves to 100vh
       which forces the element to be viewport-tall and content
       below sits behind the fixed bar. Release the lock so the
       element grows with its content and the page scrolls cleanly. */
    .ins-page,
    .pr-page {
        min-height: auto !important;
    }

    /* Release internal scroll containers on mobile so the whole
       page flows as one document — no nested scroll contexts,
       no hidden content hiding behind internal scrollbars. */
    .ins-fide-results,
    .pr-game-list,
    .pr-moments {
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* Pages that lock themselves to 100vh and have their own internal
       overflow need the same bottom clearance, otherwise content sits
       behind the fixed tab bar. Release the 100vh lock and let the
       window scroll handle layout. */
    .puzzle-hub {
        min-height: auto !important;
        overflow-y: visible !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Pages not in launch scope (blocked at URL level via vercel.json
       redirects) also hidden from the mobile tab bar as a belt-and-
       suspenders measure. */
    .nav-link[href="/monitor.html"],
    .nav-link[href="/monitor"],
    .nav-link[href="/database.html"],
    .nav-link[href="/database"],
    .nav-link[href="/analysis.html"],
    .nav-link[href="/analysis"],
    .nav-link[href="/game-report.html"],
    .nav-link[href="/game-report"],
    .nav-link--soon {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .nav-link {
        font-size: 11px;
        padding: 8px 1px;
    }
    .nav-link__icon svg {
        width: 24px;
        height: 24px;
    }
}