/* ═══════════════════════════════════════════════════════
   RESPONSIVE — mobile breakpoints (≤768px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger { display: block; }
  
  /* Sidebar becomes a drawer — flex column, footer anchored
     Uses 100dvh to account for mobile browser URL bar — fallback to 100vh */
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    width: 280px;
    height: 100vh;   /* fallback */
    height: 100dvh;  /* dynamic, excludes URL bar on mobile */
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 200;
    transition: left 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sidebar-hdr {
    flex: 0 0 auto;
  }
  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 16px;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar-ftr {
    flex: 0 0 auto;
    position: static;
    background: var(--gray2);
    border-top: 1px solid var(--gray3);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0));
  }
  
  /* Main fills full width on mobile */
  .main {
    width: 100%;
  }
  
  /* Tighter padding */
  .content {
    padding: var(--space-md);
  }
  
  .topbar {
    padding: var(--space-sm) var(--space-md);
  }
  
  .topbar-title {
    font-size: 18px;
  }
  
  /* Grids collapse on mobile */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  
  /* Page headers smaller */
  .page-hdr h1 {
    font-size: 26px;
  }
  
  /* Login card tighter */
  .login-card {
    padding: var(--space-lg);
  }
  
  /* Cards tighter */
  .card {
    padding: var(--space-md);
  }
  
  /* Buttons fill width on mobile in forms */
  .field .btn {
    width: 100%;
  }
  
  /* Topbar right hides certain meta */
  .topbar-right {
    gap: var(--space-sm);
    font-size: 10px;
  }
  
  .topbar-right .hide-mobile {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --space-lg: 16px;
    --space-xl: 24px;
  }
  
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  
  .stat-value { font-size: 28px; }
}