/* Mobile sidebar toggle */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    background: var(--fs-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--fs-glass-border);
    border-radius: var(--fs-radius-md);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--fs-text-primary);
    transition: all var(--fs-transition-fast);
}
.sidebar-toggle:hover { background: var(--fs-bg-hover); }

.sidebar-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.sidebar-overlay.active { display: block; }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 8px 8px;
    border-radius: var(--fs-radius-md);
    background: var(--fs-bg-hover);
}
.sidebar-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--fs-gradient-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.sidebar-user-info {
    min-width: 0;
}
.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-email {
    font-size: 0.7rem;
    color: var(--fs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .sidebar-toggle { display: block; }
    .sidebar {
        position: fixed;
        left: -280px;
        z-index: 1000;
        transition: left 0.3s ease;
    }
    .sidebar.open { left: 0; }
    .main-content { margin-left: 0 !important; padding-top: 56px; }
    .app-layout { grid-template-columns: 1fr !important; }
}

/* Credits pill in sidebar */
.sidebar-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 12px 0;
    padding: 7px 12px;
    background: linear-gradient(135deg,rgba(99,102,241,.12),rgba(124,58,237,.12));
    border: 1px solid rgba(99,102,241,.2);
    border-radius: var(--fs-radius-md);
    text-decoration: none;
    transition: background .15s;
}
.sidebar-credits:hover { background: linear-gradient(135deg,rgba(99,102,241,.2),rgba(124,58,237,.2)); }
.sidebar-credits-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fs-accent);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.sidebar-credits-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--fs-text-primary);
}

/* ── When a modal is open, prevent sidebar from stealing clicks ── */
/* Only target modals that are explicitly shown via .open class.
   The JS MutationObserver in app.js handles the general case via
   getComputedStyle, which is more reliable across browsers and avoids
   false positives from modals hidden by CSS (e.g. archive.css). */
body:has(.modal-overlay.open) .sidebar {
    pointer-events: none;
}
.modal-overlay .modal-card,
.modal-overlay .modal {
    pointer-events: auto;
}