/* ==========================================================================
   nav.css — sidebar rail, mobile topbar, settings/theme popovers, tooltip
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sidebar shell
   -------------------------------------------------------------------------- */

#sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-alt);
}

/* --------------------------------------------------------------------------
   Sidebar header
   -------------------------------------------------------------------------- */

#sidebar-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 160px;
    text-decoration: none;
}

#sidebar-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

#sidebar-brand-name {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#btn-sidebar {
    margin-left: auto;
    flex-shrink: 0;
    width: auto;
}

/* --------------------------------------------------------------------------
   Sidebar body
   -------------------------------------------------------------------------- */

#sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-nav {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-3);
    padding: 0 8px 6px;
    overflow: hidden;
    max-width: 200px;
    transition: opacity 0.15s ease 0.12s, max-width 0.2s ease 0.12s;
}

/* Collapsible label — used on brand name, nav-link labels, section labels,
   footer chip labels. Hides with max-width animation when sidebar collapses. */
.sidebar-label {
    overflow: hidden;
    max-width: 200px;
    white-space: nowrap;
    transition: opacity 0.15s ease 0.12s, max-width 0.2s ease 0.12s;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 8px;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-link svg {
    flex-shrink: 0;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface-hi);
}

.nav-link.active {
    color: var(--primary);
    background: var(--primary-wash);
}

.nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--red);
    color: #fff;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Sidebar footer
   -------------------------------------------------------------------------- */

#sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Base chip — icon + collapsible label, used for footer items and the
   collapse toggle button */
.sidebar-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 8px;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.sidebar-chip svg {
    flex-shrink: 0;
}

.sidebar-chip:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-hi);
}

/* User identity chip */
.sidebar-user {
    text-decoration: none;
}

.sidebar-user__avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* Wallet balance chip */
.sidebar-wallet {
    text-decoration: none;
}

.sidebar-wallet__amount {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Collapsed state (desktop, icons only)
   -------------------------------------------------------------------------- */

body[data-sidebar="collapsed"] #sidebar {
    width: var(--sidebar-collapsed-width);
}

body[data-sidebar="collapsed"] .sidebar-label,
body[data-sidebar="collapsed"] .nav-label {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
    transition: opacity 0.05s ease, max-width 0.05s ease;
}

body[data-sidebar="collapsed"] .nav-link,
body[data-sidebar="collapsed"] .sidebar-chip {
    padding-left: 8px;
    padding-right: 5px;
}

body[data-sidebar="collapsed"] .sidebar-wallet__amount {
    display: none;
}

/* --------------------------------------------------------------------------
   Hidden state (mobile, off-screen)
   -------------------------------------------------------------------------- */

body[data-sidebar="hidden"] #sidebar {
    transform: translateX(-100%);
}

/* --------------------------------------------------------------------------
   Transitions (scoped per media query to avoid conflicts)
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
    #sidebar { transition: width 0.2s ease; }
}

@media (max-width: 699px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--sidebar-width);
        z-index: var(--z-nav);
        transition: transform 0.2s ease;
    }

    #workspace { width: 100%; }

    /* Ensure labels are visible when sidebar slides in on mobile */
    body[data-sidebar="expanded"] .sidebar-label,
    body[data-sidebar="expanded"] .nav-label {
        opacity: 1;
        max-width: 200px;
        pointer-events: auto;
    }

    /* Touch-friendly tap targets */
    .nav-link,
    .sidebar-chip { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Backdrop (mobile overlay dim)
   -------------------------------------------------------------------------- */

#sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-nav) - 1);
}

#sidebar-backdrop.visible { display: block; }

/* --------------------------------------------------------------------------
   Mobile topbar (hamburger + logo + messages badge)
   Visible only on mobile (< 700px)
   -------------------------------------------------------------------------- */

#mobile-topbar {
    display: none;
}

@media (max-width: 699px) {
    #mobile-topbar {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        height: var(--mobile-topbar-height);
        padding: 0 var(--space-4);
        background: var(--bg-alt);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: calc(var(--z-nav) - 2);
        flex-shrink: 0;
    }
}

#btn-mobile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

#btn-mobile-menu:hover { color: var(--text); }

.mobile-logo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.mobile-logo img {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.mobile-messages-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-2);
    text-decoration: none;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.mobile-messages-btn:hover { color: var(--primary); }

.mobile-messages-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--red);
    color: #fff;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Tooltip (shown for collapsed sidebar items)
   -------------------------------------------------------------------------- */

#tooltip {
    position: fixed;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    pointer-events: none;
    white-space: nowrap;
    z-index: var(--z-toast);
    transform: translateY(-50%);
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Settings & theme popovers
   -------------------------------------------------------------------------- */

.popover {
    position: fixed;
    width: 200px;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.popover-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.popover-item:hover {
    background: var(--primary-wash);
    color: var(--text);
}

.popover-item--danger:hover {
    background: var(--red-wash);
    color: var(--red);
}

.popover-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-1) 0;
}

.popover-options {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
}

.popover-opt {
    flex: 1;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-2);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.popover-opt:hover {
    border-color: var(--border-hi);
    color: var(--text);
}

.popover-opt.active {
    background: var(--primary-wash);
    border-color: var(--primary);
    color: var(--primary);
}