/* Estilos focados em telas pequenas */
@media (max-width: 640px) {
  /* Cabeçalho: mostrar hambúrguer; ocultar ações inline */
  #mobile-menu-toggle { display: inline-flex !important; }
  #user-actions .action-btn { display: none !important; }

  /* Abas: deslizantes com dedo, sem barra visível e com snap */
  #tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-snap-type: x proximity;
    gap: 8px;
    padding: 0 4px 2px 4px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    position: relative;
  }
  #tabs-container::-webkit-scrollbar { display: none; height: 0; }
  

  
  /* Ocultar completamente as setas de navegação em dispositivos móveis */
  #nav-arrow-left, #nav-arrow-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  #tabs-container .tab-button {
    scroll-snap-align: start;
    display: inline-block;
    padding: 10px 12px;
  }

  /* Botões: todos em largura total e empilhados (exceto botões marcados como 'no-full-mobile' ou botões de ação do cabeçalho) */
  /* Excluir .action-btn evita que itens do cabeçalho (Configurar 2FA / Alterar Senha) sejam forçados a display:block */
  #app-content button:not(.no-full-mobile):not(.action-btn) { width: 100% !important; display: block !important; }
  /* Exceções: botões de adicionar descrição devem ser compactos e inline */
  /* usar seletor mais específico (#app-content + id) para sobrescrever #app-content button { width:100% } */
  #app-content #btn-descricao-simples-plus,
  #app-content #btn-descricao-multi-plus {
    /* Aumentado para área de toque maior e altura para acompanhar o input */
    min-width: 44px !important; /* slightly wider for better touch */
    width: auto !important;
    padding: 0 12px !important; /* aumenta largura sem quebrar layout */
    min-height: 44px !important; /* garante área mínima de toque */
    height: auto !important; /* permite esticar para acompanhar input */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 18px !important;
    border-radius: .375rem !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important; /* garante override de regras mais específicas */
    align-self: stretch !important; /* acompanhar altura do input */
    margin-left: 0 !important; /* mantenha gap controlado pelo container */
  }
    /* SVG interior do botão, manter centralizado e sem overflow */
    #app-content #btn-descricao-simples-plus svg,
    #app-content #btn-descricao-multi-plus svg { display: block; width: 18px; height: 18px; }
  /* Ajuste fino para inputs de descrição (evitar overflow do botão) */
  #lanc-descricao, #lanc-multi-descricao { padding-right: 0.75rem !important; }
  /* Para telas muito pequenas, reduzir ainda mais o tamanho do botão */
  @media (max-width: 400px) {
    #app-content #btn-descricao-simples-plus,
    #app-content #btn-descricao-multi-plus { min-width: 40px !important; min-height: 40px !important; font-size: 16px !important; padding: 0 10px !important; }
  }
  /* Inputs de descrição ocupam o restante do espaço */
  #lanc-descricao,
  #lanc-multi-descricao { flex: 1 1 auto !important; width: auto !important; }
  #app-content .tab-button { width: auto !important; display: inline-block !important; }
  /* Específicos de paginação mobile */
  #lanc-prev-page-mobile, #lanc-next-page-mobile,
  #logs-prev-page-mobile, #logs-next-page-mobile { width: 100% !important; }
  button[id^="download-"][id$="-csv"] { width: 100% !important; }
  .tab-panel form button[type="submit"] { width: 100% !important; }

  /* Dashboard: forçar coluna e enviar cartõezinhos de dízimo para o final */
  .dashboard-cards { display: flex; flex-direction: column; gap: 1.5rem; }
  .dashboard-cards .card-dizimo { order: 99; }

  /* Empilhar cabeçalhos com ações (evita sobreposição de texto/botões) */
  #tab-orcamentos .flex.justify-between.items-center,
  #tab-lancamentos .flex.justify-between.items-center { flex-direction: column; align-items: stretch; gap: .5rem; }

  /* Botão de alternância de lançamentos: discreto, só com borda */
  #toggle-lancamento-tipo {
    background: transparent !important;
    border: 1px solid #e5e7eb !important; /* gray-200 */
    color: #374151 !important; /* gray-700 */
    padding: 8px 12px !important;
    border-radius: .375rem !important; /* rounded-md */
    text-align: center;
  }

  /* Paginação mobile: texto central em sua própria linha, botões empilhados */
  #app-content [id$="-pagination-controls"] .md\:hidden {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
  }
  #app-content [id$="-pagination-controls"] .md\:hidden > div { text-align: center; }

  /* Menu hambúrguer: fundo liso solicitado e botões discretos */
  #mobile-menu-backdrop {
    background: #f3f4f6 !important; /* gray-100 */
    opacity: 1 !important;
  }
  #mobile-menu-panel .menu-card button:not(#mobile-logout-btn) {
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important; /* gray-800 */
  }
  /* Exceção: botão SAIR deve seguir o azul do login */
  #mobile-logout-btn {
    background: #2563eb !important; /* blue-600 */
    color: #ffffff !important;
    border-color: #2563eb !important;
  }
  #mobile-logout-btn:hover {
    background: #1d4ed8 !important; /* blue-700 */
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
  }
  #mobile-menu-close { color: #3b82f6 !important; } /* blue-500, um pouco mais forte */
  #mobile-menu-close:hover { color: #2563eb !important; } /* blue-600 no hover */

  /* Overrides e ajustes adicionais específicos (mobile) */
  /* Dashboard: ordem dos cards e filtros empilhados */
  .dashboard-cards .card-total-pagar { order: 60; }
  .dashboard-cards .card-dizimo { order: 61; }
  .dashboard-cards .card-graficos { order: 100; }
  #tab-dashboard .rounded-lg.shadow > .flex.items-center.space-x-4 { flex-direction: column; align-items: stretch; gap: .5rem; }
  #tab-dashboard .rounded-lg.shadow > .flex.items-center.space-x-4 > .pt-6 { padding-top: 0 !important; }
  /* Remover margens horizontais herdadas de space-x-4 quando em coluna */
  #tab-dashboard .rounded-lg.shadow > .flex.items-center.space-x-4 > * { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
  #dash-filtro-todos { width: 100% !important; display: block !important; }

  /* Paginação que usa sm:hidden (Lançamentos/Dízimos) */
  #app-content [id$="-pagination-controls"] .sm\:hidden {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
  }
  #app-content [id$="-pagination-controls"] .sm\:hidden button { width: 100% !important; }

  /* Lançamentos/Dízimos: ações e botões */
  #tab-lancamentos .ml-auto { margin-left: 0 !important; }
  #download-lancamentos-csv { width: 100% !important; }
  #tab-dizimos .mb-4.flex.justify-end { justify-content: stretch !important; flex-direction: column !important; align-items: stretch !important; }
  #download-dizimos-csv { width: 100% !important; }

  /* Orçamentos: no cabeçalho, empilhar Título, depois "+ Novo", depois "Download" */
  #tab-orcamentos .mb-4.flex.items-center.justify-between { flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }
  #tab-orcamentos .mb-4.flex.items-center.justify-between > .flex.items-center.gap-3 { flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; }
  #tab-orcamentos .orc-actions { flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; width: 100% !important; }
  #tab-orcamentos h2.text-xl { width: 100% !important; }
  .modal-content > .mt-6,
  .modal-content > .mt-5 { display: flex !important; flex-direction: column !important; gap: .75rem !important; }
  .modal-content > .mt-6 > button,
  .modal-content > .mt-5 > button { margin-top: 0 !important; }
  .modal-backdrop.active { padding: 12px !important; }
  .modal-content { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
}

/* Garantir que os botões de ação do cabeçalho fiquem ocultos em telas móveis até 767px
   (expande o alcance do breakpoint para cobrir mais dispositivos móveis) */
@media (max-width: 767px) {
  #user-actions .action-btn { display: none !important; }
  #mobile-menu-toggle { display: inline-flex !important; }
}

/* Para Lançamentos: remover fixação/sticky apenas em mobile para permitir que o conteúdo suba normalmente */
@media (max-width: 767px) {
  #tab-lancamentos .fixed,
  #tab-lancamentos .sticky,
  #tab-lancamentos [style*="position: fixed"],
  #tab-lancamentos [style*="position:sticky"],
  #tab-lancamentos [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }
  /* Remover fixação apenas para o container específico de 'Tipo de Despesa' em mobile.
     Isso evita efeitos colaterais de uma regra global. */
  #tab-lancamentos #container-prob-salario,
  #tab-lancamentos #container-prob-salario * {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}