/* ================================================================
   Fazza CRM — Mobile Adaptations
   Carregado em dist/index.html após Tailwind CDN.
   Todas as regras estão dentro de @media (max-width: 767px) ou
   (max-width: 374px). Desktop não é afetado.
   ================================================================ */

:root {
  --mobile-touch-min: 44px;
  --mobile-gutter: 12px;
}

/* ------------------------------------------------------------------
   1. iOS zoom fix — inputs/selects/textarea precisam ter font >= 16px
      em mobile, senão o Safari faz zoom automático no foco.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------------
   2. Shell global (sidebar, mobile-header, modais)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  html, body { overscroll-behavior-y: contain; }

  /* CAUSA RAIZ DOS BUGS DE LAYOUT MOBILE: o shell usa 100vh que em
     mobile inclui a barra de endereço do navegador, fazendo o conteúdo
     ultrapassar a viewport visível e empurrar o footer/composer para
     fora. Trocar para 100dvh (dynamic viewport height) corrige. */
  html, body {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden;
  }
  #app {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #main-content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  /* Sidebar overlay já é absolute em mobile; reforça z-index e largura
     levemente mais estreita pra deixar respiro lateral quando aberta */
  #sidebar {
    width: min(280px, 86vw) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  }

  /* Backdrop ganha cursor pointer e blur leve */
  #mobile-backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Botões da nav lateral com touch-target adequado */
  .sidebar-nav-btn,
  #sidebar a,
  #sidebar button {
    min-height: 44px;
  }

  /* Mobile header — leve sombra para destacar do conteúdo */
  #mobile-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }

  /* Modais genéricos — garante respiro lateral */
  [class*="fixed"][class*="inset-0"] > div[class*="max-w-"] {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ------------------------------------------------------------------
   3. WhatsApp Chat — composer, sidebar, bubbles, modais
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Footer wrapper externo: padding mais enxuto. Mantém o flex
     normal — a visibilidade do footer é resolvida via 100dvh no shell. */
  #wa-mirror-footer {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Composer: padding e gap mais enxutos */
  #wa-mirror-footer-normal {
    padding: 0 !important;
    gap: 6px !important;
  }
  #wa-mirror-footer-normal > .relative.flex-1 {
    min-width: 0;
  }

  #wa-mirror-footer-normal,
  #wa-mirror-footer-recording {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Botões attach/quick/mic/send/schedule — 40x40 mantendo toque */
  #btn-wa-attach,
  #btn-wa-quick-replies,
  #btn-wa-mirror-send,
  #btn-wa-mirror-mic,
  #btn-wa-schedule {
    width: 40px !important;
    height: 40px !important;
  }

  /* Estilo WhatsApp: emoji à esquerda do textarea, padding ajustado.
     Emoji ancorado no top (centralizado quando 1 linha, fica no topo
     ao crescer — igual WhatsApp). */
  #wa-mirror-input {
    padding-left: 44px !important;
    padding-right: 14px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 16px !important;
    scrollbar-width: none !important; /* Firefox: esconde scrollbar visual */
  }
  #wa-mirror-input::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari: esconde scrollbar visual */
  }
  #btn-wa-emoji {
    width: 34px !important;
    height: 34px !important;
    left: 5px !important;
    right: auto !important;
    top: 5px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Esconde quick-replies (raio) — vai virar item dentro do menu + */
  #btn-wa-quick-replies { display: none !important; }

  /* Bubbles: limita largura para 85% do chat-body em mobile */
  #wa-mirror-chat-body .max-w-md {
    max-width: 85% !important;
  }
  #wa-mirror-chat-body {
    padding: 12px !important;
    gap: 8px !important;
  }

  /* Header da conversa: padding lateral menor para sobrar espaço ao nome */
  #wa-mirror-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 10px !important;
  }
  #wa-mirror-header-name {
    font-size: 15px !important;
  }

  /* Sidebar do chat: ocupa toda a tela quando aberta e fica opaca
     (sem isso, o backdrop-blur deixa o chat aparecer atrás e parece bug).
     z-index alto para cobrir o footer sticky enquanto a lista está aberta. */
  #wa-sidebar-panel {
    width: 100vw !important;
    background: var(--bg-page) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 50 !important;
  }

  /* Modais ancorados dentro do chat (attach, emoji, schedule) */
  #wa-attach-menu,
  #wa-emoji-picker {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
  #wa-emoji-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
  #wa-schedule-modal > div {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Scroll-to-bottom button: reposicionar para não colidir com footer */
  #wa-mirror-scroll-bottom {
    bottom: 84px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Search da lista de contatos — confortável em mobile */
  #wa-contact-search {
    font-size: 16px !important;
  }
}

/* Telas muito estreitas (iPhone SE 1ª gen, Android pequeno < 375px) */
@media (max-width: 374px) {
  /* Esconde botão de agendar em telas minúsculas para sobrar espaço */
  #btn-wa-schedule { display: none !important; }

  /* Botões ainda menores */
  #btn-wa-attach,
  #btn-wa-quick-replies,
  #btn-wa-mirror-send,
  #btn-wa-mirror-mic {
    width: 38px !important;
    height: 38px !important;
  }

  /* Emoji grid 6 colunas */
  #wa-emoji-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  /* Bubbles ainda mais largas (90%) */
  #wa-mirror-chat-body .max-w-md {
    max-width: 90% !important;
  }
}

/* ------------------------------------------------------------------
   4. Leads (Kanban): scroll horizontal com snap; cada coluna ~85vw
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  #leads-kanban-container {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 12px !important;
  }
  #kanban-board {
    gap: 12px !important;
  }
  #kanban-board > .kanban-column {
    min-width: 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: start;
  }

  /* Modal de valor do deal: vira "bottom-sheet" */
  #deal-value-modal-overlay > div,
  #deal-value-modal-overlay [class*="rounded"] {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ------------------------------------------------------------------
   5. Dashboards (cards e gráficos)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* KPI grid em coluna única / 2 colunas confortáveis */
  .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5,
  .grid.grid-cols-2.md\:grid-cols-5,
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Em telas <380px, KPIs em coluna única */
}
@media (max-width: 379px) {
  .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5,
  .grid.grid-cols-2.md\:grid-cols-5,
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  /* Containers de gráficos: altura razoável em mobile */
  canvas#sr-chart-vendas,
  canvas#sr-chart-vendedores {
    max-height: 240px !important;
  }

  /* Podium top-3: stack vertical em telas pequenas */
  #sr-podium,
  #dg-podium {
    flex-direction: column !important;
    min-height: 0 !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #dg-podium {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   6. Relatórios / Sales-report — Tabelas viram cards
   Usa data-label injetado pelo snippet JS no shell.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Esconde header da tabela e mostra cada linha como card */
  #sr-vendedores-body,
  #rel-vendedores-body,
  #rel-criativos-body {
    display: block !important;
  }

  #sr-vendedores-body > tr,
  #rel-vendedores-body > tr,
  #rel-criativos-body > tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--bdr, rgba(255, 255, 255, .08)) !important;
    background: var(--bg-card, transparent);
    border-radius: 12px;
    margin-bottom: 8px;
  }

  #sr-vendedores-body > tr > td,
  #rel-vendedores-body > tr > td,
  #rel-criativos-body > tr > td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 0 !important;
    border: 0 !important;
    font-size: 13px !important;
  }

  #sr-vendedores-body > tr > td::before,
  #rel-vendedores-body > tr > td::before,
  #rel-criativos-body > tr > td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--txt-tertiary, #8a8f98);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 12px;
  }

  /* Esconde thead em mobile (vamos mostrar via data-label) */
  table:has(#sr-vendedores-body) thead,
  table:has(#rel-vendedores-body) thead,
  table:has(#rel-criativos-body) thead {
    display: none !important;
  }

  /* Container da tabela: sem overflow-x forçado no mobile */
  #sr-vendedores-body,
  #rel-vendedores-body,
  #rel-criativos-body {
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------------
   7. Fila / Monitor — Detalhe vira fullscreen-overlay em mobile
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Lista de conversas ocupa toda a tela */
  #mon-list {
    width: 100% !important;
  }

  /* Painel de detalhe: quando o JS adiciona md:flex e remove hidden,
     viramos overlay fullscreen */
  #mon-detail:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 250 !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
}

/* ------------------------------------------------------------------
   8. Settings / Profile — Toggles e padding
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Padding global menor em containers grandes */
  .p-8 { padding: 16px !important; }

  /* Toggles/switches comuns no Tailwind (peer-checked patterns)
     Aumenta minimamente para hit area melhor */
  [class*="w-11"][class*="h-6"][class*="rounded-full"] {
    width: 48px !important;
    height: 26px !important;
  }

  /* Labels muito pequenas para legibilidade */
  .text-\[10px\] { font-size: 11px !important; }
  .text-\[9px\] { font-size: 10px !important; }
}

/* ------------------------------------------------------------------
   9. WhatsApp-config — QR responsivo
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  #wa-qr-container2,
  #billing-wa-qr-container {
    width: min(256px, 80vw) !important;
    height: min(256px, 80vw) !important;
  }
}

/* ------------------------------------------------------------------
   10. Multipost — Preview menor em mobile
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  #multipost-preview-mockup,
  [class*="aspect-\[9\/18\]"][class*="max-w-\[280px\]"] {
    max-width: 200px !important;
  }
  [class*="min-h-\[200px\]"] {
    min-height: 120px !important;
  }
}

/* ------------------------------------------------------------------
   11. Touch targets globais — qualquer botão/ícone < 36px ganha 36px
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  button,
  [role="button"],
  a.btn,
  .press-scale {
    min-height: 36px;
  }
}