/* ═══════════════════════════════════════════════════════════
   ARENA CROSS — v8 MOBILE HOTFIX
   
   Corrige os 5 problemas identificados nas screenshots do Ricardo:
   
   1. Hamburger menu (≡) sobrepondo títulos ("EMIA", "AS", "APP/PWA")
   2. Tabs cortadas no canto direito sem indicador de scroll
   3. Textos longos quebrando o layout pra direita (overflow)
   4. Números/valores do dashboard escondidos atrás do botão flutuante
   5. Page-header com título invisível por causa do botão fixed
   
   Inclua no index.html DEPOIS dos outros CSS:
     <link rel="stylesheet" href="css/v8-mobile-hotfix.css?v=20260519">
   
   Funciona com o tema dark/orange existente. Não precisa rebuild
   nem mexer em JS. É só CSS.
   ═══════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEMA #1: Hamburger menu sobrepondo conteúdo
   
   O botão está com position fixed/absolute no top-left e fica
   POR CIMA do título da página. Solução: reserva espaço no header
   da página através de padding-left no mobile, e dá ao botão um
   fundo sólido + sombra pra ficar legível.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  /* Botão hamburger fica circular, com sombra e z-index alto */
  .menu-toggle,
  .sidebar-toggle,
  .btn-menu-mobile,
  button[onclick*="toggleSidebar"],
  button[onclick*="toggleMenu"] {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 9999 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
  }

  /* Reserva o espaço onde o hamburger vai ficar para os page-headers,
     impedindo que ele cubra título/conteúdo */
  .page-header,
  .page-title,
  .content > h1:first-child,
  .content > h2:first-child,
  main > h1:first-child,
  main > h2:first-child {
    padding-left: 64px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  /* Cards/stats no topo da página também recuam pra não brigar
     com o botão flutuante */
  .stats-grid,
  .kpi-grid,
  .dashboard-stats,
  .content > .card:first-child,
  main > .card:first-child {
    margin-top: 56px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEMA #2: Tabs cortadas sem indicador de scroll
   
   As abas (Branding / Push / Enviar Push / ...) e
   (Configurações / Templates / Enviar / ...) usam flex e
   estouram pra direita sem nenhuma pista visual de que dá
   pra scrollar. Solução: scroll horizontal + fade no canto
   + scrollbar fininha visível.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container das tabs com scroll horizontal e fade no fim */
.tabs-nav,
.tab-list,
div[style*="overflow-x:auto"],
div[style*="overflow-x: auto"] {
  position: relative;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 63, 232, 0.5) transparent;

  /* Mask que dá fade no canto direito - DICA visual de que tem mais */
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 24px),
    transparent 100%
  );
}

/* Scrollbar das tabs (Chromium/WebKit) */
.tabs-nav::-webkit-scrollbar,
.tab-list::-webkit-scrollbar,
div[style*="overflow-x:auto"]::-webkit-scrollbar,
div[style*="overflow-x: auto"]::-webkit-scrollbar {
  height: 3px;
}
.tabs-nav::-webkit-scrollbar-track,
.tab-list::-webkit-scrollbar-track,
div[style*="overflow-x:auto"]::-webkit-scrollbar-track,
div[style*="overflow-x: auto"]::-webkit-scrollbar-track {
  background: transparent;
}
.tabs-nav::-webkit-scrollbar-thumb,
.tab-list::-webkit-scrollbar-thumb,
div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb,
div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
  background: rgba(139, 63, 232, 0.4);
  border-radius: 2px;
}

/* Botões individuais das tabs: não encolhem, ficam legíveis */
.tab-btn,
.tabs-nav button,
.tab-list button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEMA #3: Texto longo estourando layout pra direita
   
   Vi em várias telas:
   - "O aluno se compromete...direi(to)" cortado
   - "MENSAGEM PADRÃO (RESPOSTA AUTOMÁTICA QUANDO ALGUÉM MANDA..." cortado
   - "Oi! 😊 Em breve um da equipe te responde. Para i..." cortado
   
   Causa: containers sem overflow-wrap e textareas/spans sem max-width.
   Solução: word-break em parágrafos, labels, textareas e inputs.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  /* Containers de seção limitam ao viewport */
  .card,
  .form-group,
  .config-section,
  .settings-section,
  .panel {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Labels longas como "MENSAGEM PADRÃO (RESPOSTA AUTOMÁTICA...)" */
  label,
  .form-label,
  .field-label {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    display: block !important;
    width: 100% !important;
  }

  /* Parágrafos de cláusulas, descrição, etc */
  p,
  .description,
  .clause-text,
  .help-text,
  textarea[readonly],
  .readonly-text {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Textareas e inputs respeitam largura do container */
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Containers flex que não encolhem por causa de min-width: auto */
  .card > *,
  .form-group > *,
  .panel > * {
    min-width: 0 !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEMA #4: Números do dashboard cortados pelo hamburger
   
   Vi na tela de Cobranças: o "0" de "aguardando pagamento" tava
   atrás do botão hamburger. Solução já está no #1 (margin-top
   nos primeiros cards), mas reforço aqui para KPIs específicos.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .stat-card,
  .kpi-card,
  .metric-card,
  .summary-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .stat-value,
  .kpi-value,
  .metric-value,
  .summary-value,
  .big-number {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    word-break: break-word !important;
  }

  /* Grids de KPI viram 1 ou 2 colunas */
  .stats-grid,
  .kpi-grid,
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  /* Em telas bem pequenas, 1 coluna */
  @media (max-width: 380px) {
    .stats-grid,
    .kpi-grid,
    .metrics-grid {
      grid-template-columns: 1fr !important;
    }
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEMA #5: Filtros/pílulas (ATIVAS / PAGAS / EXPIRADAS) 
   estouram a tela
   
   Vi na tela de Cobranças. Solução: também ficam em scroll
   horizontal mas com touch suave, e cada pílula com tamanho fixo.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .filter-pills,
  .filter-tabs,
  .status-filters,
  .chips-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x mandatory !important;
  }

  .filter-pills > *,
  .filter-tabs > *,
  .status-filters > *,
  .chips-row > * {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOBAL: prevenir scroll horizontal indesejado no body
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Main content respeita viewport */
  main,
  #app,
  #root,
  .main-content,
  .page-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Padding lateral pequeno mas presente */
  .content,
  .container,
  .page-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BÔNUS: melhorias de touch (mais finger-friendly)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  /* Botões com tamanho mínimo de toque (Apple recomenda 44x44) */
  button,
  .btn,
  a.btn,
  .clickable {
    min-height: 40px;
  }

  /* Tab buttons com padding maior pra dedo */
  .tab-btn {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
  }

  /* Inputs com altura confortável */
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important; /* Evita zoom no iOS quando foca */
  }

  textarea {
    min-height: 80px;
  }
}