/* ============================================================
   MIND OF MERCY — GLOBAL MOBILE RESPONSIVE PATCHES
   Loaded AFTER style.css / components.css / home.css (and after
   any page-level <style> block on admin/index.php).
   Purely additive: fixes mobile layout gaps without altering
   existing desktop styling, markup, or design in style.css,
   components.css or home.css.
   ============================================================ */

/* ── GLOBAL: NEVER ALLOW HORIZONTAL PAGE SCROLL ───────────────
   style.css already sets body{overflow-x:hidden}, but that alone
   doesn't stop the viewport from widening in the first place (grid/
   flex items with nowrap content default to min-width:auto and can
   push their track wider than 100vw). Lock it down on <html> too and
   make grid/flex containers shrinkable so their own overflow-x:auto
   scrolls internally instead of the whole page. */
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}
.dash-layout, .admin-wrap, .founder-grid, .newsletter-grid {
  min-width: 0;
}

/* ── INLINE TWO-COLUMN GRIDS (public pages + admin panels) ──
   Many pages lay content out with an inline
   style="display:grid;grid-template-columns:1.2fr 1fr" (or similar)
   that never had a matching mobile override. Collapse any such
   two-value grid to a single column on tablets/phones. Grids built
   with repeat(...) — donation-amount pickers, KPI tiles, admin
   3-up cards — are deliberately left alone here (handled below). */
@media (max-width: 860px) {
  [style*="grid-template-columns"]:not([style*="repeat("]) {
    grid-template-columns: 1fr !important;
  }
  /* Neutralize the alternating right-to-left layout on the Programs
     page once its grid is stacked to one column, so copy doesn't
     render right-aligned on mobile. */
  [style*="direction:rtl"] { direction: ltr !important; }
}

/* Extra-narrow phones: ease 3-up repeat() grids down to 2 columns
   so buttons/tiles/cards aren't squeezed. */
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── DASHBOARD / STAT CHIPS ──────────────────────────────── */
@media (max-width: 480px) {
  .dash-stat-chip { min-width: 0; flex: 1 1 auto; padding: .6rem .8rem; }
}

/* ── CHATBOT WIDGET ───────────────────────────────────────── */
@media (max-width: 400px) {
  .chatbot-fab { right: var(--space-4); bottom: var(--space-4); }
  .chatbot-window { max-height: 70vh; }
}

/* ── MEMBER DASHBOARD SIDEBAR (pages/dashboard.php) ───────────
   .dash-layout already stacks to one column at 768px (style.css),
   but the 10-item .dash-sidebar then rendered as one long vertical
   button list ABOVE the actual panel content — users had to scroll
   past the whole nav before seeing anything. Turn it into a
   horizontally-scrollable tab strip instead, same interaction
   (existing click handlers in main.js need no changes). */
@media (max-width: 768px) {
  .dash-layout { min-width: 0; }
  .dash-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .4rem;
    padding: var(--space-3);
    margin-top: calc(-1 * var(--space-6));
    min-width: 0;
    max-width: 100%;
  }
  .dash-sidebar::-webkit-scrollbar { height: 4px; }

  .dash-nav-btn {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: .55rem .75rem;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .dash-nav-btn.active { border-left-color: transparent; border-bottom-color: var(--blue); }
  .dash-sidebar hr.divider { display: none; }
}

/* ── ADMIN DASHBOARD (pages/admin/index.php) ─────────────────
   The admin panel ships its own inline <style> that fully hides
   .aside at 768px with no way to reopen it, and several inline
   two-column panel grids with no mobile handling at all (the rule
   above already stacks those). This block turns the sidebar into
   a slide-in off-canvas menu instead of hiding it outright, and
   adds the small hamburger trigger + backdrop that pages/admin/
   index.php now renders on mobile. */
@media (max-width: 768px) {
  .aside {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    height: 100vh;
    z-index: 4000;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
  }
  .aside.is-open { transform: translateX(0); }

  .aside-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 3900;
  }
  .aside-overlay.is-open { display: block; }

  .a-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--blue-dark);
    color: #fff;
    border: none;
    padding: .6rem 1rem;
    border-radius: var(--radius, 8px);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--space-4, 1rem);
  }
  .a-mobile-toggle .bar { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) {
  .a-mobile-toggle,
  .aside-overlay { display: none !important; }
}
