/* ── APP SHELL ── */
body.app-shell {
    display: flex;
    overflow: hidden;
}

/* ── SIDEBAR ── */
#sidebar {
    width: 230px; min-width: 230px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    height: 100vh; position: relative;
    transition: width .25s ease, min-width .25s ease;
    overflow: hidden;
}
#sidebar.collapsed { width: 60px; min-width: 60px; }

.sidebar-brand {
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    min-height: 68px;
}
.brand-logo { display: flex; flex-direction: column; }
.brand-name { font-size: 19px; font-weight: 700; color: var(--accent); letter-spacing: -0.3px; white-space: nowrap; }
.sidebar-toggle {
    background: none; border: none; color: var(--text-3); cursor: pointer;
    padding: 4px; border-radius: var(--radius-sm); transition: color .15s;
    flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--text-1); }

.sidebar-nav { padding: 12px 10px; flex: 1; overflow: hidden; }
.nav-section-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--text-3); padding: 8px 8px 4px; white-space: nowrap; overflow: hidden;
}
.nav-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: var(--radius-md);
    cursor: pointer; border: 1px solid transparent;
    background: none; width: 100%; text-align: left;
    color: var(--text-2); font-size: 13px; font-weight: 400;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap; overflow: hidden;
    font-family: var(--font-sans);
    margin-bottom: 2px;
}
.nav-btn:hover { background: var(--bg-elevated); color: var(--text-1); }
.nav-btn.active {
    background: var(--accent-dim); color: var(--accent);
    border-color: var(--accent-border);
}
.nav-btn.active-purple {
    background: var(--purple-dim); color: var(--purple);
    border-color: var(--purple-border);
}
.nav-icon { font-size: 15px; width: 18px; flex-shrink: 0; text-align: center; }
.nav-label { overflow: hidden; }

.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid var(--border);
}
.user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-md);
    overflow: hidden;
}
.user-avatar {
    width: 32px; height: 32px; min-width: 32px; border-radius: 8px;
    background: var(--accent-dim); border: 1px solid var(--accent-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--accent); flex-shrink: 0;
}
.user-info { overflow: hidden; }
.user-name { font-size: 13px; font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-company { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-btn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 1px solid transparent;
    color: var(--text-3); padding: 7px 10px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-family: var(--font-sans); margin-top: 4px;
}
.logout-btn:hover { background: var(--danger-dim); border-color: var(--danger-border); color: var(--danger); }

/* ── MAIN AREA ── */
#main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.topbar {
    padding: 0 24px;
    height: 64px; min-height: 64px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.mobile-menu-btn {
    display: none; background: none; border: none;
    color: var(--text-2); font-size: 20px; cursor: pointer; padding: 4px;
}
.page-title { font-size: 15px; font-weight: 600; color: var(--text-1); }

.credit-pill {
    display: flex; align-items: center; gap: 8px;
    background: var(--warn-dim); border: 1px solid var(--warn-border);
    padding: 7px 14px; border-radius: 99px;
    cursor: default;
}
.credit-pill-label { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--warn); }
.credit-pill-val { font-size: 14px; font-weight: 600; color: #e8aa55; font-family: var(--font-mono); }

.view-container { flex: 1; overflow-y: auto; padding: 24px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    #sidebar {
        position: fixed; left: -230px; top: 0; height: 100vh; z-index: 100;
        transition: left .25s ease;
    }
    #sidebar.mobile-open { left: 0; }
    #sidebar.collapsed { width: 230px; min-width: 230px; }
    .mobile-menu-btn { display: block; }
    .metrics-grid { grid-template-columns: 1fr; }
    .bottom-grid { grid-template-columns: 1fr; }
}