/* ─────────────────────────────────────────────────────────────
   Global mobile fixes — included on all pages
   ───────────────────────────────────────────────────────────── */

/* Tables: horizontal scroll on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table  { min-width: 500px; }

/* Nav overflow */
nav, .topnav { overflow-x: auto; flex-wrap: nowrap; }

/* Tab strips: horizontal scroll */
.tab-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn   { white-space: nowrap; flex: none; }

/* Hamburger toggle (injected by JS when sidebar present) */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: #C4A882;
  font-size: 1.3rem;
  cursor: pointer;
  padding: .2rem .5rem;
  line-height: 1;
}

/* Sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 150;
}

@media (max-width: 767px) {

  /* Show hamburger */
  .hamburger { display: inline-block !important; }

  /* Sidebar slides in from left as overlay */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 85vw !important;
    max-width: 300px !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 160 !important;
    transform: translateX(-105%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 24px rgba(0,0,0,.25) !important;
  }

  /* Channel/scout list must scroll independently */
  .sidebar .channel-list,
  .sidebar .scout-list {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Overlay visible when sidebar open */
  .sidebar-overlay.open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 155 !important;
  }

  /* Main chat/editor takes full width */
  .editor, .chat-area { width: 100% !important; }

  /* Form grids: single column */
  .form-grid { grid-template-columns: 1fr !important; }
  .outing-editor-layout { grid-template-columns: 1fr !important; }

  /* Stat cards: 2-col */
  .stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* Module grid: single col */
  .module-grid  { grid-template-columns: 1fr !important; }
  .quick-links  { grid-template-columns: 1fr !important; }
  .hike-grid    { grid-template-columns: 1fr !important; }
  .recipe-grid  { grid-template-columns: 1fr !important; }
  .trip-grid    { grid-template-columns: 1fr !important; }

  /* Message input: ensure visible above mobile keyboard */
  .input-area { position: sticky; bottom: 0; background: #fff; z-index: 10; }

  /* Finance hub tab strip */
  .tab-strip { flex-wrap: nowrap !important; }

  /* Modal: full screen on mobile */
  .modal-box { max-width: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
  .modal-overlay { align-items: flex-end !important; }

  /* Roles grid */
  .roles-grid { grid-template-columns: 1fr !important; }

  /* Tables: allow horizontal scroll in wrapper */
  table { font-size: .78rem !important; }

  /* Reduce padding on mobile */
  .page { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Hero min-height reduction */
  .hero { min-height: 35vh !important; }

  /* Finance Hub tab buttons */
  .tab-btn { min-width: 80px !important; font-size: .62rem !important; padding: .7rem .75rem !important; }
}