/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Scaffolding — shared responsive utilities for all pages.

   Breakpoints:
     ≤ 768px  — tablets and phones ("mobile")
     ≤ 480px  — small phones ("phone")

   Usage for future pages:
     • Load this file (it's already in base.html, so it's always available).
     • Use the utility classes below as needed in templates.
     • For page-specific mobile overrides, add a @media block to that
       page's own CSS file using the same breakpoint conventions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utility classes ────────────────────────────────────────────────────────

  .mobile-hidden      — Hide element on mobile (≤768px)
  .mobile-only        — Show element only on mobile (hidden on desktop)
  .mobile-stack       — Force flex-direction: column on mobile
  .mobile-full-width  — Force width: 100% on mobile
  .mobile-scroll-x    — Horizontal scroll container (for wide tables/content)
  .mobile-card        — Wrap content in a card-like box on mobile

*/

.mobile-only { display: none; }

@media (max-width: 768px) {
  /* Visibility helpers */
  .mobile-hidden      { display: none !important; }
  .mobile-only        { display: revert; }

  /* Layout helpers */
  .mobile-stack       { flex-direction: column !important; }
  .mobile-full-width  { width: 100% !important; }
  .mobile-scroll-x    { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Card wrapper — gives a bordered, padded card appearance on mobile */
  .mobile-card {
    background: #1a202c;
    border: 1px solid #2d3748;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
  }

  /* ── Global app header ──────────────────────────────────────────────────── */

  .header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }

  .header .title {
    font-size: 1.1em;
    order: 2;
    flex-basis: 100%;       /* title takes its own row */
    text-align: left;
  }

  .header .home-link {
    order: 1;
  }

  .header .user {
    order: 3;
    flex-basis: 100%;
    gap: 8px;
    font-size: .85em;
  }

  /* ── Generic interactive element touch targets ──────────────────────────── */

  /* Ensure buttons and anchors have minimum 44px touch target height */
  button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── Small phone extras ─────────────────────────────────────────────────────  */

@media (max-width: 480px) {
  .header .title {
    font-size: 1em;
  }
}