/* Ajustes globais de responsividade mobile para páginas do PESA */

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

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
}

@media (max-width: 992px) {
  body {
    padding-bottom: 92px;
  }

  .topbar,
  .header,
  .page-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .layout,
  .wrap,
  .container,
  main.layout {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem;
  }

  .topbar-left,
  .topbar-actions,
  .row-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .topbar-actions .btn,
  .row-actions .btn,
  .topbar-actions a.btn,
  .row-actions a.btn,
  .topbar-actions button.btn,
  .row-actions button.btn {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
    justify-content: center;
  }

  .grid,
  .form-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  .card,
  .bloco,
  .painel,
  .panel {
    padding: 0.9rem !important;
  }

  table,
  thead,
  tbody {
    display: block;
  }

  table {
    overflow-x: auto;
    white-space: nowrap;
    border-collapse: collapse;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 110px;
  }

  .topbar-actions .btn,
  .row-actions .btn,
  .topbar-actions a.btn,
  .row-actions a.btn,
  .topbar-actions button.btn,
  .row-actions button.btn {
    flex: 1 1 100%;
  }

  .logo-circle {
    width: 52px !important;
    height: 52px !important;
  }

  h1 {
    font-size: 1.1rem !important;
  }

  h2 {
    font-size: 1rem !important;
  }

  .muted,
  .sub,
  .hint {
    font-size: 0.85rem !important;
  }
}