/* MoJoe's Cafe — mobile responsive overrides
   Loaded on every page after per-page styles so these rules take effect.
   All rules target phones and small tablets (viewport width ≤ 600px). */

@media (max-width: 600px) {

  /* ── Alert banner: collapse the item list by default so the page is usable ── */
  .ab-items { display: none; }
  .ab-items.ab-expanded { display: block; }
  .ab-toggle {
    display: inline-block;
    font-size: 11px; font-family: 'DM Sans', sans-serif;
    background: none; border: 1px solid #DDD4C5; border-radius: 4px;
    padding: 2px 8px; margin-left: 8px; cursor: pointer; color: var(--ash);
    vertical-align: middle;
  }

  /* ── Modals: fill the screen width with comfortable side margins ── */
  .modal,
  .modal-temp {
    width: calc(100% - 32px);
    max-width: 100%;
    padding: 20px 16px;
  }

  /* ── Item and portal card grids: single column on narrow screens ── */
  .items-grid,
  .items-grid.combined,
  .portals-grid {
    grid-template-columns: 1fr;
  }

  /* ── Equipment grid (Temps): two columns — cards are compact enough ── */
  .equip-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Tab rows: wrap instead of overflowing the container ── */
  .tabs {
    flex-wrap: wrap;
  }

  /* ── Topbar action buttons: wrap on all pages that lack flex-wrap ── */
  .topbar-right {
    flex-wrap: wrap;
  }

  /* ── Side-by-side form groups: stack vertically ── */
  .form-row {
    flex-direction: column;
  }

  /* ── Filter bars: wrap all controls to the next line as needed ── */
  .filter-bar {
    flex-wrap: wrap;
  }

  /* ── Menu ingredient editor: name takes full width, qty+unit share the next line ── */
  .ing-row {
    flex-wrap: wrap;
  }
  .ing-name-input {
    flex: 1 1 100%;
  }

  /* ── Temps chart header: stack title and controls vertically ── */
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── Temps readings table: readable font size and comfortable cell padding ── */
  .readings-table th { font-size: 12px; padding: 6px 8px; }
  .readings-table td { font-size: 13px; padding: 6px 8px; }

  /* ── Login card: tighter padding so it breathes on small phones ── */
  .card {
    padding: 24px 18px;
    border-radius: 16px;
  }

  /* ── Login user grid: narrower column minimum so names don't clip ── */
  .user-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

}