/* ═══════════════════════════════════════════════
   OCEAN PRODUCTION — RESPONSIVE
   All @media queries in one place
═══════════════════════════════════════════════ */

/* ── TABLET & MOBILE ( < 768px ) ─────── */
@media (max-width: 768px) {
  /* Sidebar: hidden by default, slide in from right */
  .sidebar {
    transform: translateX(100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  /* Main: full width, push down for hamburger */
  .main {
    margin-right: 0;
    padding: 16px;
    padding-top: 68px;
  }

  /* Show hamburger button */
  .menu-toggle {
    display: flex !important;
  }

  /* Stats: 2-column grid */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-val { font-size: 24px; }

  /* Forms: stack rows */
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  /* Topbar: stack vertically */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Restaurant sheet header */
  .sheet-header {
    flex-direction: column;
  }
  .sheet-actions {
    width: 100%;
  }

  /* Grids: single column */
  .tasks-grid       { grid-template-columns: 1fr; }
  .restaurants-grid { grid-template-columns: 1fr; }

  /* Employee stat cards */
  .emp-stats { gap: 8px; }
}

/* ── SMALL MOBILE ( < 400px ) ────────── */
@media (max-width: 400px) {
  .stats        { grid-template-columns: 1fr 1fr; }
  .login-box    { padding: 32px 24px; }
  .stat-lbl     { font-size: 11px; }
}