/* ==========================================================================
   Side Navigation Component
   ========================================================================== */

.side-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: var(--nav-width);
    height: 100vh;
    padding: var(--spacing-md) 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.side-nav .brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    justify-content: center;
    /* Centered by default for app layout */
}

.side-nav .nav-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: var(--spacing-md);
    margin: 0;
}

.side-nav .nav-item a {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    /* Reduced padding for icon-only default */
    justify-content: center;
    /* Centered by default */
    color: var(--color-text-light);
    text-decoration: none;
    transition: all 0.2s;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-circle);
    aspect-ratio: 1/1;
}

/* Create Button in Nav */
.nav-create {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm);
}

.nav-create-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-circle);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.nav-create-btn:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.nav-create-btn i {
    font-size: var(--font-size-lg);
}

/* Create button tooltip - same as timer */
.nav-create-btn .nav-label {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-background);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-input);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
    margin-left: var(--spacing-sm);
    pointer-events: none;
}

@media (min-width: 768px) {
    .nav-create-btn:hover .nav-label {
        display: block;
    }
}

/* Tracker Quick-Add Buttons */
.nav-tracker-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0;
}

@media (min-width: 768px) {
    .nav-tracker-actions {
        flex-direction: column;
        padding-top: var(--spacing-sm);
    }
}

.nav-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-circle);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    font-size: var(--font-size-sm);
}

.nav-icon-btn:hover,
.nav-icon-btn.active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.nav-editor-switchers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
}

/* Icon button tooltip - matches nav-create-btn */
.nav-icon-btn {
    position: relative;
}

.nav-icon-btn .nav-label {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-background);
    color: var(--color-text);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-input);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    font-size: var(--font-size-xs);
    font-weight: 500;
    z-index: 1000;
    margin-left: var(--spacing-sm);
    pointer-events: none;
}

@media (min-width: 768px) {
    .nav-icon-btn:hover .nav-label {
        display: block;
    }
}

/* Session Timer in Nav */
.nav-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-sm);
    margin-top: auto;
    margin-bottom: auto;
}

.nav-timer .timer-btn-main {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-circle);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.nav-timer .timer-btn-main:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Tooltip - delayed hide using opacity/visibility */
.nav-timer .timer-btn-main .nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease 0.5s, visibility 0.15s ease 0.5s;
}

/* Show tooltip on hover - instant show */
.nav-timer:hover .timer-btn-main .nav-label {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.nav-timer .timer-btn-main .nav-label .timer-time {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
}

/* Inline reset button in tooltip */
.nav-timer .timer-reset-inline {
    width: 18px;
    height: 18px;
    border-radius: var(--border-radius-circle);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: var(--spacing-xs);
    opacity: 0.6;
}

.nav-timer .timer-reset-inline:hover {
    opacity: 1;
    color: var(--color-danger);
}

.nav-timer .timer-reset-inline i {
    font-size: 10px;
}

.nav-timer .timer-btn-main.running {
    background: var(--color-warning-light, oklch(from var(--color-warning) 0.95 c h));
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.nav-timer .timer-btn-main i {
    font-size: var(--font-size-lg);
}

/* Hide floating timer display on desktop only - keep it on mobile */
@media (min-width: 769px) {
    .nav-timer .timer-value {
        display: none !important;
    }
}

.side-nav .nav-item.active a {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}

.side-nav .nav-item a:hover {
    color: var(--color-text);
    background: oklch(from var(--color-primary-light) l c h / 0.5);
}

.side-nav .nav-item i {
    font-size: var(--font-size-md);
    width: var(--font-size-md);
    text-align: center;
    color: inherit;
    margin: 0;
}

.side-nav .nav-item span {
    text-transform: uppercase;
    letter-spacing: 0.01rem;
}

/* Icon-only navigation with hover labels */
.nav-label {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-background);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-input);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
    margin-left: var(--spacing-sm);
    pointer-events: none;
}

.side-nav .nav-item {
    position: relative;
}

@media (min-width: 768px) {
    .side-nav .nav-item:hover .nav-label {
        display: block;
    }
}

/* ==========================================================================
   Nav Chat Button - Hidden on Desktop
   ========================================================================== */
.nav-chat-btn {
    display: none;
}

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

/* ==========================================================================
   Mobile Bottom Navigation (Responsive)
   ========================================================================== */
@media (max-width: 768px) {

    /* Timer on mobile - keep icon in nav */
    .nav-timer {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .nav-timer .timer-btn-main {
        width: 32px;
        height: 32px;
    }

    /* Hide the expanded timer tooltip on mobile */
    .nav-timer .nav-label {
        display: none !important;
    }

    /* Floating timer display above nav when running */
    .nav-timer .timer-value {
        position: fixed !important;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text);
        background: var(--color-surface);
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-button);
        padding: var(--spacing-xs) var(--spacing-sm);
        box-shadow: var(--shadow-md);
        z-index: 1001;
    }

    /* Floating timer display above nav when running */
    .nav-timer .timer-value {
        position: fixed !important;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text);
        background: var(--color-surface);
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-button);
        padding: var(--spacing-xs) var(--spacing-sm);
        box-shadow: var(--shadow-md);
        z-index: 1001;
    }

    /* Reset button in floating timer */
    .timer-reset-mobile {
        background: none;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 2px;
        font-size: var(--font-size-xs);
        transition: color 0.2s ease;
    }

    .timer-reset-mobile:hover {
        color: var(--color-danger);
    }

    .side-nav .brand {
        display: none;
    }

    .side-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        width: 100vw;
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        gap: var(--spacing-sm);
        border-right: none;
        border-top: 2px solid var(--color-border);
        overflow-y: hidden;
        padding: 0 var(--spacing-sm);
        background-color: var(--color-background);
        z-index: 1000;
    }

    /* First nav-items: Studio button - stays at start */
    .side-nav .nav-items:not(.nav-bottom) {
        flex: 0 0 auto;
        width: auto;
    }

    .side-nav .nav-items:first-child {
        padding: 0;
    }

    /* Center utility buttons - all on same row */
    .side-nav .nav-create {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: 0;
    }

    /* Editor tabs stack horizontally on mobile */
    .nav-editor-switchers {
        flex-direction: row;
        padding: 0;
        margin: 0;
        gap: var(--spacing-sm);
    }

    /* On mobile: hide Settings but show nav-bottom container for chat/auth buttons */
    .side-nav .nav-items.nav-bottom:not(:has(.nav-chat-item)):not(:has(.nav-auth-item)) {
        display: none;
    }

    .side-nav .nav-item {
        padding: 0;
    }

    /* Fix mobile nav alignment - make circular like other icons */
    .side-nav .nav-item a {
        aspect-ratio: 1;
        border-radius: var(--border-radius-circle);
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
    }

    /* All buttons same size on mobile */
    .nav-create-btn,
    .nav-icon-btn {
        width: 36px;
        height: 36px;
    }

    .nav-create-btn i {
        font-size: var(--font-size-base);
    }

    /* Show nav-bottom on mobile for chat button (Settings hidden, chat shown) */
    .side-nav .nav-items.nav-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0;
    }

    /* Hide Settings on mobile but show chat and auth items */
    .side-nav .nav-bottom .nav-item:not(.nav-chat-item):not(.nav-auth-item) {
        display: none;
    }

    /* Chat item visible on mobile */
    .nav-chat-item {
        display: flex !important;
    }

    /* Chat button in nav - toggles advisor panel */
    .nav-chat-btn {
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-circle);
        border: 2px solid var(--color-primary);
        background: var(--color-primary);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        padding: 0;
        font-size: var(--font-size-base);
    }

    .nav-chat-btn:active {
        transform: scale(0.95);
    }

    /* Chat button active state when panel is open */
    body.advisor-open .nav-chat-btn {
        background: var(--color-background);
        color: var(--color-primary);
    }

    /* Icon toggle - show message by default, X when open */
    .nav-chat-btn .chat-icon-close {
        display: none;
    }

    body.advisor-open .nav-chat-btn .chat-icon-open {
        display: none;
    }

    body.advisor-open .nav-chat-btn .chat-icon-close {
        display: inline;
    }

    /* ==========================================================================
       Mobile Auth Buttons - Transform from Sidebar Icons to Bottom Bar Pills
       ========================================================================== */

    /* Mobile: Hide desktop icons, show pill text */
    .nav-auth-btn .nav-icon-desktop {
        display: none;
    }

    .nav-auth-btn .nav-text-mobile {
        display: inline-block;
        font-weight: 600;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: var(--font-size-sm);
    }

    /* Override sidebar constraints for auth buttons */
    .side-nav .nav-item.nav-auth-item a {
        aspect-ratio: auto;
        /* Allow non-square */
        width: auto;
        /* Natural width */
        height: 36px;
        /* Fixed height matching other mobile inputs */
        border-radius: 99px;
        /* Pill shape */
        padding: 0 var(--spacing-md);
        gap: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ensure specific styling for Primary vs Outline shows through */
    .nav-auth-btn.button.outline {
        border: 1px solid var(--color-ink-black);
        /* Enforce outline */
        background: transparent;
        color: var(--color-text);
    }

    .nav-auth-btn.button.primary {
        background: var(--color-surface);
        border: 1px solid var(--color-ink-black);
        box-shadow: 2px 2px 0 var(--color-ink-black) !important;
        color: var(--color-ink-black);
    }
}

/* Desktop Overrides for Auth Buttons (keep them looking like nav icons) */
@media (min-width: 769px) {

    /* Push bottom nav to the bottom */
    .side-nav .nav-items.nav-bottom {
        margin-top: auto;
        padding-bottom: var(--spacing-md);
    }

    /* Hide mobile text */
    .nav-auth-btn .nav-text-mobile {
        display: none;
    }

    /* Reset button styles to match sidebar icons exactly */
    .side-nav .nav-item .nav-auth-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: var(--spacing-sm) !important;
        width: 100% !important;
        /* Let container control size like other items */
        height: auto !important;
        aspect-ratio: 1/1;
        color: var(--color-text-light) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius-circle);
        transition: all 0.2s ease;
    }

    .side-nav .nav-item .nav-auth-btn:hover {
        background: oklch(from var(--color-primary-light) l c h / 0.5) !important;
        color: var(--color-text) !important;
    }

    /* Keep "Start Free" icon colored for subtle distinction */
    .side-nav .nav-item:has(a[href*="signup"]) .nav-auth-btn {
        color: var(--color-primary) !important;
    }

    .side-nav .nav-item:has(a[href*="signup"]) .nav-auth-btn:hover {
        color: var(--color-primary-dark) !important;
    }
}