/* ====== Mobile Sidebar Toggle ====== */
.sidebar-toggle {
    display: none; position: fixed; top: 16px; left: 16px; z-index: 50;
    width: 40px; height: 40px; border-radius: 10px; background: #18181b; border: 1px solid #27272a;
    color: #fafafa; cursor: pointer; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sidebar-toggle svg { width: 20px; height: 20px; }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 40; }

/* ====== Responsive ====== */
@media (max-width: 1439px) { .stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .charts-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    body { overflow: auto; height: auto; }
    .sidebar-toggle { display: flex; }
    .dashboard-layout { flex-direction: column; height: auto; }
    .sidebar {
        position: fixed; top: 0; left: -280px; height: 100vh; z-index: 45;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }
    .sidebar.open { left: 0; }
    .sidebar-overlay.show { display: block; }
    .main-content { height: auto; width: 100%; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .container { padding: 16px; }
    .main-header { padding: 16px 16px 0; padding-top: 60px; }
    .stat-card .value { font-size: 22px; }
    .session-tooltip { display: none !important; }
}
@media (max-width: 480px) {
    .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px 12px; }
    .stat-card .value { font-size: 20px; }
}