/* ==========================================================================
   CORREÇÕES GLOBAIS DE RESPONSIVIDADE MOBILE
   Override para Tabler + classes do sistema
   Carregado APÓS todos os outros CSS para garantir prioridade
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Impede overflow horizontal global
   --------------------------------------------------------------------------
   ATENÇÃO: NÃO aplicar `overflow-x: hidden` em containers internos (.page-
   wrapper, .page-body, .container-xl etc). Pela spec do CSS, definir um eixo
   como `hidden` e o outro implícito como `visible` força o navegador a
   computar o outro como `auto`. Isso gera scroll VERTICAL indesejado dentro
   do container — sintoma típico: telas com 4 inputs ganham scroll na vertical
   quando um Tom Select abre o dropdown e ele extrapola o card. */
html, body {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2) Responsividade para telas <= 768px (tablets e celulares)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- Page Header: botões empilham em coluna no mobile --- */
  .page-header .d-flex.gap-2 {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .page-header .d-flex.gap-2 > .btn,
  .page-header .d-flex.gap-2 > a.btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
  }

  /* --- Container com padding reduzido no mobile --- */
  .container-xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* --- Tabelas: garantir scroll horizontal dentro do container --- */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Tabelas dentro de cards */
  .card .table-responsive {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* --- Cards: sem bordas laterais arredondadas em mobile --- */
  .card {
    border-radius: 0.5rem;
  }

  /* --- Accordion: badges empilham verticalmente no mobile --- */
  .accordion-button .d-flex.gap-2 {
    flex-wrap: wrap;
    gap: 0.375rem !important;
  }

  .accordion-button .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  /* Accordion body: impedir overflow lateral */
  .accordion-body {
    overflow-x: hidden;
  }

  .accordion-body .table-responsive {
    overflow-x: auto;
    max-width: 100%;
  }

  /* Status badges menores no mobile */
  .status-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }

  /* --- Page title: ajuste de tamanho --- */
  .page-title {
    font-size: 1.25rem;
  }

  .page-pretitle {
    font-size: 0.625rem;
  }

  /* --- Botões de ação dentro de tabelas --- */
  .btn-action-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .action-buttons {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .btn-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .btn-icon svg.icon {
    width: 18px;
    height: 18px;
  }

  /* --- Coluna Ações: label centralizado acima dos botões --- */
  .table-mobile-md td[data-label="Ações"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .table-mobile-md td[data-label="Ações"]::before {
    width: 100% !important;
    text-align: center !important;
    padding-bottom: 0.25rem;
  }

  /* --- Modern badges menores no mobile --- */
  .modern-badge {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
  }

  /* --- Modals: melhor fit em mobile --- */
  .modal-dialog {
    margin: 0.5rem;
  }

  /* --- Tabler page-header row: permitir wrap --- */
  .page-header .row {
    flex-wrap: wrap;
  }

  .page-header .col-12.col-md-auto.ms-auto {
    margin-top: 0.5rem;
    width: 100%;
  }

  .page-header .col-auto.ms-auto {
    margin-top: 0.5rem;
    width: 100%;
    flex: 0 0 100%;
  }

  .page-header .col-12.col-md-auto.ms-auto .d-flex,
  .page-header .col-auto.ms-auto .d-flex {
    flex-wrap: wrap;
  }

  /* Inputs inline dentro de page-header */
  .page-header .d-inline-block.w-9,
  .page-header input.form-control.d-inline-block {
    width: 100% !important;
    margin-bottom: 0.5rem;
    margin-right: 0 !important;
  }

  /* --- Empty state menor no mobile --- */
  .empty-state {
    padding: 1.5rem;
  }

  .empty-state-icon {
    font-size: 2.5rem;
  }

  /* --- Corrigir tabela-maior forçar largura mínima --- */
  .tabela-maior table {
    min-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   3) Responsividade para telas <= 576px (celulares pequenos)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {

  /* Botões em page-header: 100% width empilhados */
  .page-header .d-flex.gap-2 {
    flex-direction: column;
    width: 100%;
  }

  .page-header .d-flex.gap-2 > .btn,
  .page-header .d-flex.gap-2 > a.btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Container ainda mais apertado */
  .container-xl {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Accordion body com menos padding */
  .accordion-body {
    padding: 0.5rem !important;
  }

  .accordion-button {
    padding: 0.875rem 1rem !important;
  }

  /* Tabela moderna com padding reduzido */
  .modern-table thead th,
  .modern-table tbody td {
    padding: 0.625rem 0.5rem;
    font-size: 0.8125rem;
  }

  /* Page title menor em telas bem pequenas */
  .page-title {
    font-size: 1.125rem;
  }

  /* Inputs e selects menores */
  .form-control,
  .form-select {
    font-size: 0.875rem;
  }

  /* Card body com padding reduzido */
  .card-body {
    padding: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   4) Responsividade para telas <= 400px (celulares muito pequenos)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {

  .page-title {
    font-size: 1rem;
    word-break: break-word;
  }

  /* Badges inline menores */
  .status-badge,
  .modern-badge {
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
  }

  .btn-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .btn-icon svg {
    width: 14px;
    height: 14px;
  }
}