/* responsive.css — desktop sidebar+topbar vs mobile bottom-nav breakpoints */

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: -260px; top: 0; bottom: 0; z-index: 50; transition: left .2s ease;
    width: 240px;
  }
  .app-shell.sidebar-open .sidebar { left: 0; box-shadow: 4px 0 16px rgba(0,0,0,.2); }
  .mobile-only { display: inline-flex !important; }
  .main-col { width: 100%; }
  .bottom-nav {
    display: flex; justify-content: space-around; align-items: center;
    position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--border);
    padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
  }
  .bottom-nav .nav-link { flex-direction: column; gap: .15rem; font-size: .68rem; padding: .3rem .4rem; color: var(--gray-600); }
  .bottom-nav .nav-link.active { color: var(--brand); background: none; }
  .bottom-nav .nav-label { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 901px) {
  .mobile-only { display: none !important; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 1rem; }
}