/* =====================================================
   RESPONSIVO COMPARTILHADO — AtlasPDV
   Linkado em todas as telas do sistema, sempre depois do
   CSS próprio de cada módulo (pra essas regras vencerem a
   cascata). Breakpoints padrão:
     - mobile: max-width 767px
     - tablet: 768px – 1024px
   Cada módulo mantém seu próprio @media pra lista/formulário
   específico — aqui só ficam regras genéricas reaproveitadas
   por todas as telas (gaveta lateral, reset de toque, etc).
===================================================== */

/* ===== RESET GLOBAL DE SEGURANÇA ===== */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  overflow-x: hidden;
}

/* Evita zoom automático do iOS Safari ao focar um campo */
input, select, textarea, button {
  font-size: 16px;
}

/* Espaço de segurança em aparelhos com notch/ilha dinâmica */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ===== GAVETA LATERAL (MOBILE) ===== */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 260px;
    max-width: 80vw;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .25s ease;
    padding-top: env(safe-area-inset-top);
    overflow-y: auto;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Cancela o margin-left/width fixos do layout desktop */
  .main, .content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
  }

  .sidebar-backdrop.visible {
    display: block;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 900;
  }

  .toggle-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Acima de 767px a gaveta nunca aparece por cima do conteúdo */
@media (min-width: 768px) {
  .sidebar-backdrop {
    display: none !important;
  }
}

/* ===== PAINÉIS/DRAWERS COM LARGURA FIXA ===== */
@media (max-width: 767px) {
  .client-sidebar,
  .drawer,
  [class*="-drawer"],
  [class$="-sidebar"]:not(.sidebar) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
}

/* ===== ALVO DE TOQUE MÍNIMO (44x44) ===== */
@media (max-width: 767px) {
  .btn,
  .menu-item,
  button:not(.hamburger-btn) {
    min-height: 44px;
  }
}

/* ===== PAGINAÇÃO (Anterior / Página X de Y / Próxima) =====
   Compartilhado por todas as telas de listagem paginadas. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 0 4px;
}

.pagination-btn {
  text-decoration: none;
}

.pagination-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .pagination {
    flex-wrap: wrap;
    gap: 10px;
  }
}