/* ============================================================
   responsive.css — Torna o sistema responsivo no mobile
   Coloque em: public/assets/css/responsive.css
   ============================================================ */

/* ===== BREAKPOINT: telas até 1024px (tablets e celulares) ===== */
@media (max-width: 1024px) {
  /* --- Sidebar: escondida por padrão, vira drawer --- */
  .sb {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 100 !important;
  }
  .sb.is-mobile-open {
    transform: translateX(0) !important;
  }

  /* --- Conteúdo principal: sem padding-left da sidebar --- */
  .main-content,
  .pl-64,
  [class*="pl-64"] {
    padding-left: 0 !important;
  }

  /* --- Main padding menor --- */
  main.p-6,
  main.flex-1.p-6 {
    padding: 14px !important;
  }

  /* --- Topbar: mostra hamburger, esconde separador --- */
  .tb-hamburger {
    display: flex !important;
  }
  .tb-sep {
    display: none !important;
  }

  /* --- Botão Afiliado: SEMPRE visível, menor no tablet --- */
  .tb-btn {
    display: inline-flex !important;
    padding: 6px 12px !important;
    font-size: .85rem !important;
  }
}

/* ===== BREAKPOINT: telas até 640px (celulares) ===== */
@media (max-width: 640px) {
  /* Topbar mais compacta */
  .tb {
    padding: 0 10px !important;
  }
  .tb-title h1 {
    font-size: 0.85rem !important;
  }

  /* Nome do usuário esconde, mantém só avatar */
  .tb-user .tb-name {
    display: none;
  }
  .tb-user {
    padding: 4px 6px !important;
  }
  .tb-right {
    gap: 6px !important;
  }

  /* Botão Afiliado: texto + emoji compacto */
  .tb-btn {
    display: inline-flex !important;
    padding: 6px 10px !important;
    gap: 4px !important;
  }
  .tb-btn .tb-btn-text {
    display: inline !important;
    font-size: 0.75rem !important;
  }

  /* Main padding menor */
  main.p-6,
  main.flex-1.p-6 {
    padding: 10px !important;
  }

  /* Tabelas: scroll horizontal */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards em grid: coluna única (SÓ grids do conteúdo, não toolbar) */
  .space-y-4 > .grid,
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* KPIs do painel: manter 2 colunas */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Inputs e selects: largura total */
  input, select, textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Modais genéricos */
  .modal-card {
    width: 95% !important;
    max-width: 95% !important;
    padding: 16px !important;
  }
  .modal-actions {
    flex-direction: column;
  }
  .modal-actions .btn {
    width: 100%;
    text-align: center;
  }

  /* ═══════════════════════════════════════════
     LEADS: Header (Importar / Exportar)
     ═══════════════════════════════════════════ */
  .flex.items-center.justify-between.gap-3.flex-wrap {
    flex-direction: column;
    align-items: stretch !important;
  }
  .flex.items-center.justify-between.gap-3.flex-wrap > .flex {
    justify-content: stretch;
  }
  .flex.items-center.justify-between.gap-3.flex-wrap > .flex > button,
  .flex.items-center.justify-between.gap-3.flex-wrap > .flex > a {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  /* ═══════════════════════════════════════════
     LEADS: Folder bar management
     ═══════════════════════════════════════════ */
  .flex.items-center.justify-between.mb-2 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Pasta chips: scroll horizontal em vez de wrap */
  #foldersBar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .folder-chip {
    flex-shrink: 0;
  }

  /* ═══════════════════════════════════════════
     LEADS: Form cadastro empilha
     ═══════════════════════════════════════════ */
  #formCreate {
    flex-direction: column !important;
  }
  #formCreate > div,
  #formCreate > button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Paginação empilha */
  .mt-4.flex.items-center.justify-between {
    flex-direction: column !important;
    gap: 10px;
  }

  /* ═══════════════════════════════════════════
     BULK TOOLBAR: Barra fixa no rodapé mobile
     ═══════════════════════════════════════════ */
  .bulk-toolbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    z-index: 40 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.35) !important;
  }

  /* Contador ocupa linha inteira */
  .bulk-toolbar > span {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    margin-bottom: 2px;
  }

  /* Botões se distribuem igualmente */
  .bulk-toolbar > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 10px 6px !important;
    font-size: 0.72rem !important;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 8px;
  }

  /* ═══════════════════════════════════════════
     SELECT ALL BANNER: Compacto no mobile
     ═══════════════════════════════════════════ */
  .select-all-banner {
    flex-direction: column;
    text-align: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  /* ═══════════════════════════════════════════
     PROGRESS MODAL: Ajuste de padding
     ═══════════════════════════════════════════ */
  .progress-card {
    margin: 12px !important;
    padding: 20px 16px !important;
  }

  /* ═══════════════════════════════════════════
     MOVE MODAL: Scroll interno no mobile
     ═══════════════════════════════════════════ */
  #moveModal > .absolute > div {
    max-height: 85vh;
    overflow-y: auto;
  }
  #mmGrid {
    max-height: 50vh;
    overflow-y: auto;
  }

  /* ═══════════════════════════════════════════
     IMPORTAÇÃO: Grid empilha no mobile
     ═══════════════════════════════════════════ */
  #importWrap .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  #importWrap .flex.items-end.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #importWrap .flex.items-end.gap-3 > .w-48 {
    width: 100% !important;
  }
}

/* ===== Overlay escuro (sidebar mobile) ===== */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
}
.sb-overlay.is-visible {
  display: block;
}

/* ===== Chatwoot: posiciona melhor no mobile ===== */
@media (max-width: 1024px) {
  .woot-widget-bubble,
  .woot-widget-bubble.woot-elements--right {
    bottom: 16px !important;
    right: 16px !important;
  }
}