/* ============================================================
   RESPONSIVE — breakpoints: mobile <768px, tablet 768-1024px,
                desktop >1024px. Mobile-first overrides only.
   ============================================================ */

/* ── Mobile & Tablet (≤768px) ────────────────────────────── */
@media (max-width: 768px) {
  /* Show bottom nav, hide sidebar */
  .bottom-nav { display: flex; flex-direction: column; }
  .sidebar    { display: none; }

  /* Remove sidebar offset; pad for bottom nav */
  .main-wrapper {
    margin-left: 0;
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-4));
  }

  /* Content padding */
  .main-content { padding: var(--space-4); }

  /* Header */
  .app-header { padding: 0 var(--space-4); }

  /* FAB hidden on mobile — centre bottom-nav button replaces it */
  .fab { display: none; }

  /* Toast sits above bottom nav */
  .toast-container {
    bottom: calc(var(--bottom-nav-height) + var(--space-3));
  }

  /* Card padding */
  .card { padding: var(--space-4); }

  /* Grids: 4 → 2 columns, 3 → 2 columns */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Modal — full-width bottom sheet */
  .modal { max-height: 94dvh; }

  /* Auth card */
  .auth-card { padding: var(--space-8) var(--space-5); }

  /* Stat card value slightly smaller on mobile */
  .stat-card__value { font-size: var(--text-2xl); }
}

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

  .main-content { padding: var(--space-3); }

  .stat-card { padding: var(--space-4); }
  .stat-card__value { font-size: var(--text-xl); }
}

/* ── Desktop modal — centered dialog instead of bottom sheet ─ */
@media (min-width: 769px) {
  .modal-backdrop {
    align-items: center;
    padding: var(--space-8);
  }

  .modal {
    border-radius: var(--radius-xl);
    max-width: 540px;
    max-height: 88dvh;
    animation: dialog-in var(--transition) ease both;
  }

  @keyframes dialog-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Hide the bottom-sheet drag handle on desktop */
  .modal__handle { display: none; }

  /* Toast near bottom of screen */
  .toast-container { bottom: var(--space-6); }

  /* FAB — standard position, no bottom nav offset */
  .fab {
    right: var(--space-8);
    bottom: var(--space-8);
  }
}

/* ── Wide desktop (≥1280px) ──────────────────────────────── */
@media (min-width: 1280px) {
  .main-content { padding: var(--space-8); }
}

/* ── iOS safe area (notch / home indicator) ──────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  @media (max-width: 768px) {
    .main-wrapper {
      padding-bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom));
    }
    .fab {
      bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-3));
    }
    .toast-container {
      bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-3));
    }
  }
}