/* ============================================================
   BetScale — mobile.css
   Responsive completo: sidebar, topbar, stats, tablas, inbox.
   Usa exactamente las mismas clases que ya existen en tu HTML,
   no requiere cambiar nombres de clase existentes.
   ============================================================ */

/* ---------- overlay para la sidebar en mobile ---------- */
.mobile-sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(3,4,6,.6);
  backdrop-filter:blur(2px);
  z-index:150;
}
.mobile-sidebar-overlay.show{display:block;}

/* ---------- botón hamburguesa (solo visible en mobile) ---------- */
.mobile-topbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
  position:sticky;
  top:0;
  z-index:60;
}
.mobile-topbar .mt-brand{
  display:flex;align-items:center;gap:9px;font-weight:800;color:var(--white);font-size:15px;
  font-family:'Manrope',sans-serif;
}
.mobile-topbar .mt-brand svg{width:18px;height:18px;}
.hamburger-btn{
  width:38px;height:38px;border-radius:10px;background:var(--bg3);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--text);
}
.hamburger-btn svg{width:18px;height:18px;}

/* ---------- inbox: botón volver (solo se ve en mobile con un chat abierto) ---------- */
.inbox-back-btn{
  display:none;
  width:32px;height:32px;border-radius:8px;background:var(--bg3);border:1px solid var(--border2);
  align-items:center;justify-content:center;cursor:pointer;color:var(--text);flex-shrink:0;margin-right:10px;
}
.inbox-back-btn svg{width:16px;height:16px;}

/* ============================================================
   BREAKPOINT: tablets (≤ 980px)
   ============================================================ */
@media (max-width:980px){
  .stats-grid{grid-template-columns:repeat(3,1fr);}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-2-1{grid-template-columns:1fr;}
  .inbox-sidebar{width:280px;}
}

/* ============================================================
   BREAKPOINT: mobile (≤ 768px)
   ============================================================ */
@media (max-width:768px){

  /* --- layout general --- */
  body{overflow:visible;height:auto;min-height:100vh;}
  .main{overflow:visible;}

  /* --- sidebar se convierte en drawer off-canvas --- */
  .sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.mobile-open{transform:translateX(0);}

  /* --- topbar de escritorio se oculta, aparece la de mobile --- */
  .mobile-topbar{display:flex;}

  .topbar{
    flex-wrap:wrap;
    height:auto;
    padding:14px 16px;
    gap:10px;
  }
  .topbar-left h2{font-size:17px;}
  .topbar-right{width:100%;}
  .period-btns{width:100%;}
  .period-btn{flex:1;text-align:center;}

  /* --- contenido --- */
  .page{padding:16px;}

  /* --- stats --- */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
  .stat-card{padding:14px;}
  .stat-value{font-size:19px;}

  /* --- grids de cards --- */
  .grid-3{grid-template-columns:1fr;gap:12px;}
  .grid-2-1{grid-template-columns:1fr;gap:12px;}
  .card{padding:16px;}

  /* --- toolbars que combinan buscador + tabs + botones --- */
  .tabs-bar{flex-wrap:wrap;}
  .sort-bar{flex-wrap:wrap;row-gap:6px;}
  div[style*="display:flex"][style*="gap:12px"]{flex-wrap:wrap;}

  /* --- tablas: en vez de romper el layout, permiten scroll horizontal --- */
  .card table.table,
  .card > table.table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .table thead,.table tbody,.table tr{display:table;width:100%;table-layout:fixed;}
  /* al ser scrolleable, mantenemos filas como tabla real adentro del contenedor con scroll */
  .card table.table{display:table;} /* revertimos el display:block del selector genérico */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* --- líneas de WhatsApp: que no se aplasten los botones --- */
  .line-card{flex-direction:column;align-items:flex-start;gap:12px;}
  .line-card > div:last-child{width:100%;justify-content:space-between;}

  /* --- QR --- */
  .qr-box img{max-width:100%;height:auto;width:220px;}

  /* --- botón flotante --- */
  .floating-btn{bottom:16px;right:16px;padding:11px 18px;font-size:13px;}

  /* --- inbox: pasa de layout de 2 columnas a "lista o chat", no ambos --- */
  .inbox-layout{
    height:calc(100vh - 130px); /* descuenta topbar desktop oculto + mobile-topbar + topbar */
    margin:-16px;
  }
  .inbox-sidebar{
    width:100%;
    display:flex;
  }
  .inbox-chat{display:none;}

  /* cuando hay un chat abierto (JS agrega esta clase) */
  .inbox-layout.chat-open .inbox-sidebar{display:none;}
  .inbox-layout.chat-open .inbox-chat{display:flex;}
  .inbox-layout.chat-open .inbox-back-btn{display:flex;}

  .inbox-header{display:flex !important;align-items:center;}
  .inbox-msgs{padding:14px 16px;}
  .msg{max-width:82%;}

  /* --- onboarding / empty states: menos padding --- */
  .onboarding{padding:32px 18px;}
  .empty-state{padding:32px 16px;}
}

/* ============================================================
   BREAKPOINT: mobile chico (≤ 420px)
   ============================================================ */
@media (max-width:420px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-value{font-size:18px;}
  .brand-name{font-size:15px;}
  .topbar-left h2{font-size:16px;}
}