/* ============================================================
   responsive.css — Folha de Estilos de Responsividade Global
   ============================================================
   Este arquivo estende a responsividade do sistema principal,
   garantindo compatibilidade total com dispositivos mobile e tablets.
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* O botão hambúrguer deve aparecer apenas em telas menores que 768px */
#btn-mobile-menu {
  display: none;
}

/* Overlay / Backdrop para mobile */
.sidebar-backdrop,
.mobile-overlay {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
  /* Mostrar o botão do menu hambúrguer no mobile */
  #btn-mobile-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Ocultar a sidebar fora da tela por padrão */
  .sidebar,
  #main-sidebar {
    position: fixed !important;
    top: 0;
    left: -280px !important; /* Move fora da tela */
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    transition: left 0.3s ease, transform 0.3s ease !important;
    transform: none !important; /* Desativa transformações antigas */
    overflow-y: auto !important;
  }

  /* Sidebar quando ativada */
  .sidebar.active,
  .sidebar.open,
  #main-sidebar.active,
  #main-sidebar.open,
  body.mobile-menu-open .sidebar {
    left: 0 !important;
  }

  /* Backdrop / Overlay ativo */
  .sidebar-backdrop.active,
  .sidebar-backdrop.open,
  .mobile-overlay.active,
  body.mobile-menu-open .sidebar-backdrop,
  body.mobile-menu-open .mobile-overlay {
    display: block !important;
    opacity: 1 !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 1040 !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* O conteúdo principal ocupa toda a tela */
  .main-content,
  .content,
  .dashboard,
  .page-content,
  main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Ajuste do padding superior da main-content para não sobrepor a topbar fixa */
  .main-content {
    padding-top: 8px !important;
  }

  /* Grids em uma coluna no mobile */
  .grid,
  .cards,
  .stats-grid,
  .dashboard-grid,
  .dashboard-metrics-grid,
  .data-grid,
  .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cards e painéis a 100% */
  .card,
  .box,
  .panel,
  .widget,
  .stat-widget,
  .action-panel,
  .info-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tabelas responsivas com rolagem horizontal interna */
  table,
  .table-container,
  .table-responsive,
  .gg-table-container {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Gráficos responsivos */
  canvas,
  .chart,
  .grafico,
  .chart-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Inputs, selects e formulários responsivos */
  input,
  select,
  textarea,
  button,
  .form-control,
  .input-group {
    max-width: 100% !important;
    width: 100% !important;
  }
}