/* =====================================================
   RESPONSIVO COMPARTILHADO — TechCell
   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);
  }
}

/* ===== NAVEGAÇÃO MOBILE — ESTILO APP NATIVO =====
   No lugar da gaveta lateral (que ainda existe pro desktop),
   o mobile usa uma barra de abas fixa embaixo (padrão iOS/Android)
   com os 4 fluxos mais usados + um painel "Mais" pra bottom-sheet
   com o resto do menu. Isso não muda nada no desktop: a gaveta
   (.sidebar) e o topo com hambúrguer (.topbar-header) continuam
   intactos ali, só ficam escondidos abaixo de 768px. */

/* Toque sem o flash cinza padrão do Chrome/Android — some parte
   da sensação de "página web" que não existe em apps nativos. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Elementos da barra/sheet só existem visualmente no mobile — a
   regra base (fora de media query) evita qualquer flash no desktop
   antes da cascata carregar. */
.mobile-tabbar,
.mobile-more-sheet {
  display: none;
}

@media (max-width: 767px) {
  /* A gaveta lateral clássica não é mais usada no mobile — a
     navegação agora é 100% pela barra de abas + painel "Mais". */
  .sidebar,
  .sidebar-backdrop {
    display: none !important;
  }

  /* Só o botão hambúrguer some (a navegação agora é pela barra de
     abas) — o título da página (<h1>), quando fica dentro do mesmo
     .topbar-header em algumas telas, continua visível. */
  .topbar-header .toggle-btn {
    display: none !important;
  }

  /* Cancela o margin-left/width fixos do layout desktop e reserva
     espaço embaixo pra barra de abas não cobrir o fim do conteúdo. */
  .main, .content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

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

  /* ===== BARRA DE ABAS INFERIOR ===== */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--bg-panel, #181C20);
    border-top: 1px solid var(--border, #2A3038);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }

  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    min-height: 52px;
    background: none;
    border: none;
    text-decoration: none;
    color: var(--text-muted, #9CA3AF);
    font-size: 11px;
    font-family: inherit;
    line-height: 1.2;
    border-radius: 10px;
    transition: color .15s ease, transform .1s ease;
  }

  .mobile-tab .material-symbols-outlined {
    font-size: 23px;
  }

  .mobile-tab:active {
    transform: scale(.92);
  }

  .mobile-tab.active {
    color: var(--primary, #3B82F6);
  }

  /* ===== PAINEL "MAIS" (BOTTOM SHEET) ===== */
  .mobile-more-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-more-sheet.open {
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .mobile-more-sheet.open .mobile-more-backdrop {
    opacity: 1;
  }

  .mobile-more-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    overflow-y: auto;
    background: var(--bg-panel, #181C20);
    border-top: 1px solid var(--border, #2A3038);
    border-radius: 18px 18px 0 0;
    padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .25s ease;
  }

  .mobile-more-sheet.open .mobile-more-panel {
    transform: translateY(0);
  }

  .mobile-more-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border, #2A3038);
    margin: 4px auto 12px;
  }

  .mobile-more-panel a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    min-height: 48px;
    border-radius: 12px;
    color: var(--text-main, #E5E7EB);
    text-decoration: none;
    font-size: 15px;
  }

  .mobile-more-panel a:active {
    background: var(--bg-card, #1F242A);
  }

  .mobile-more-panel a.active {
    color: var(--primary, #3B82F6);
  }

  .mobile-more-panel a .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-muted, #9CA3AF);
  }

  .mobile-more-panel a.active .material-symbols-outlined {
    color: var(--primary, #3B82F6);
  }

  .mobile-more-logout {
    margin-top: 6px;
    border-top: 1px solid var(--border, #2A3038);
    padding-top: 16px !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;
  }
}