/* ============================================================
   TapMallorca — Responsive layer (mobile-first usability)
   ============================================================ */

#mobile-nav-btn { display: none; }
#mobile-nav-backdrop { display: none; }

/* ---------- TABLET / SMALL LAPTOP (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  main [style*="repeat(4, 1fr)"],
  main [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  main [style*="repeat(5, 1fr)"],
  main [style*="repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- MOBILE (≤ 820px) ---------- */
@media (max-width: 820px) {
  /* Sidebar → off-canvas drawer */
  aside {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 130;
    width: 268px !important;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open aside { transform: none; }

  /* Solo mostramos la hamburguesa cuando hay menú lateral (paneles cliente/admin).
     En login/público/onboarding/email NO hay <aside> → sin botón sobrante que solape logos.
     La clase body.has-aside la mantiene el script de index.html (compatible con todo navegador). */
  body.has-aside #mobile-nav-btn {
    display: grid; place-items: center;
    position: fixed; top: 10px; left: 10px; z-index: 135;
    width: 40px; height: 40px; border-radius: 11px;
    background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
    cursor: pointer; color: var(--navy);
  }
  body.nav-open #mobile-nav-btn { left: 284px; background: var(--navy); color: #fff; border-color: var(--navy); }

  #mobile-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 128;
    background: rgba(26,37,51,0.42); opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  body.nav-open #mobile-nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Sticky top bars: stack title + actions, leave room for the hamburger */
  main [style*="position: sticky"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px 14px 60px !important;
  }
  main [style*="position: sticky"] > div:last-child {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  main [style*="position: sticky"] h1 { font-size: 18px !important; }

  /* Collapse multi-column grids to a single column — EXCEPT row-grids.
     minmax(0,1fr) + min-width:0 prevents min-content overflow inside cards
     (e.g. long URLs / button rows on the referral & form grids). */
  main [style*="grid-template-columns"]:not(.nfc-row) { grid-template-columns: minmax(0, 1fr) !important; }
  main [style*="grid-template-columns"]:not(.nfc-row) > * { min-width: 0 !important; }

  /* NFC row-grids → emoji + name on top row, the rest full-width below */
  main .nfc-row { grid-template-columns: auto 1fr !important; row-gap: 10px !important; column-gap: 12px !important; }
  main .nfc-row > *:nth-child(n+3) { grid-column: 1 / -1 !important; }
  main .nfc-row > *:nth-child(n+3) { justify-self: stretch !important; }
  /* the per-row action button stretches to a comfortable tap target */
  main .nfc-row > *:last-child { width: 100% !important; justify-content: center !important; }

  /* Page padding tightened */
  main [style*="padding: 32px"] { padding: 18px 14px !important; }

  /* Real <table>s scroll horizontally inside their card */
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .card thead, .card tbody { display: table; width: 100%; min-width: 520px; }

  /* Sticky side-rails (e.g. profile preview) stop sticking on mobile */
  main [style*="position: sticky"][style*="top: 96"] { position: static !important; }

  /* Banner de impersonación (admin viendo un cliente): deja sitio a la hamburguesa y envuelve. */
  .tm-imp-banner {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px 10px !important;
    padding: 9px 14px 9px 56px !important;
    font-size: 12.5px !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }
  .tm-imp-banner button { margin-left: 0 !important; }

  /* Float widgets clear of each other */
  #tm-switcher { bottom: 14px !important; left: 14px !important; }
  #tm-switcher .sw-menu { max-width: calc(100vw - 28px) !important; }

  /* Con un modal/drawer a pantalla completa abierto, ocultamos la cromática flotante
     (hamburguesa, conmutador de vista, FAB de soporte) para que no tape su cabecera ni
     sus botones de pie. La clase body.overlay-open la mantiene el script de index.html. */
  body.overlay-open #mobile-nav-btn,
  body.overlay-open #tm-switcher,
  body.overlay-open #support-fab { display: none !important; }
}

/* ---------- TABLET: 2 columnas para las tarjetas de métricas (no 1) ----------
   El colapso a 1 columna de ≤820 es ideal para móvil, pero en tablet (561–1024, p.ej. iPad)
   desaprovecha el ancho. Re-establecemos 2 columnas SOLO para los grids de 4 tarjetas.
   Misma especificidad que la regla de ≤820 + fuente posterior → gana el empate en ese rango. */
@media (min-width: 561px) and (max-width: 1024px) {
  main [style*="repeat(4, 1fr)"]:not(.nfc-row),
  main [style*="repeat(4,1fr)"]:not(.nfc-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- SMALL PHONES (≤ 520px) ---------- */
@media (max-width: 520px) {
  main [style*="padding: 32px"] { padding: 14px 12px !important; }
  h1 { font-size: 17px !important; }

  .card[style*="padding: 18px 20px"],
  .card[style*="padding: 22px"],
  .card[style*="padding: 26px"],
  .card[style*="padding: 24px"] { padding: 16px 16px !important; }

  /* env switcher: hide its text label, keep the logo button compact */
  #tm-switcher .sw-label { display: none !important; }

  /* Selector de cliente (admin): oculta el detalle "NFCs · taps" para que el nombre del local
     no se parta en varias líneas; el badge de plan y el chevron se mantienen. */
  .tm-pick-stats { display: none !important; }
  .tm-pick-meta { gap: 10px !important; }
  .tm-pick-row { padding: 12px 14px !important; gap: 12px !important; }

  /* support chat fills most of the screen */
  #support-panel {
    width: auto !important; right: 12px !important; left: 12px !important;
    height: 68vh !important; bottom: 84px !important;
  }

  /* the support FAB a touch smaller so it doesn't crowd content */
  #support-fab { bottom: 16px !important; right: 16px !important; }
}

/* Right slide-in drawers go full-width on phones */
@media (max-width: 560px) {
  [style*="slideInRight"] { width: 100vw !important; max-width: 100vw !important; }
}