/* ── Mobile hamburger menu ── */
.mobile-nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: #fff; padding: 0.5rem;
}

.mobile-topbar { display: none; }

.sidebar-overlay {
  display: none;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
}
.sidebar-overlay.open { display: block; left: 260px; }

/* ── Breakpoint: tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Breakpoint: mobile (≤768px) ── */
@media (max-width: 768px) {
  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; height: 100vh;
    z-index: 200; transform: translateX(-100%);
    transition: transform 0.3s ease; width: 260px;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.open { transform: translateX(0); }

  /* Main content takes full width when sidebar is out of flow */
  .dashboard-layout { display: block; }
  .main-content { width: 100%; min-height: calc(100vh - 56px); }
  .mobile-nav-toggle { display: flex; align-items: center; }

  /* Mobile top bar */
  .mobile-topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,10,15,0.95); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-default);
    padding: 0 1rem; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .mobile-topbar-logo { font-size: 1rem; font-weight: 800; text-decoration: none; color: #fff; display: flex; align-items: center; gap: 0.4rem; }
  .mobile-topbar-logo span { color: var(--primary-500); }

  .main-content { padding: 1rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Chat full height on mobile */
  .chat-container { height: calc(100vh - 180px); }

  /* Auth cards */
  .auth-card { padding: 0 0.5rem; }

  /* Tables — horizontal scroll */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hide some table columns on mobile */
  .hide-mobile { display: none; }

  /* Stats grid 2 col on mobile */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Modal full-width on mobile */
  .modal { width: 95%; padding: 1.5rem; }

  /* Page header */
  .page-header h1 { font-size: 1.4rem; }

  /* Buttons wrap */
  .btn-group { flex-wrap: wrap; }

  /* Chat input area */
  .chat-footer { padding: 0.75rem 1rem; }
  .chat-system-prompt { display: none; }

  /* Inject buttons scroll */
  .context-toolbar { overflow-x: auto; flex-wrap: nowrap; }
}

/* ── Breakpoint: small mobile (≤480px) ── */
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .stat-card-value { font-size: 1.5rem; }
  .btn-lg { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
  .chat-container { height: calc(100vh - 140px); }
}