/* ==========================================================================
   EMME CRM — navegação e acessibilidade no celular
   Carregado por último (via PWA_HEAD_TAGS) para vencer o CSS das telas.
   Alvo de toque mínimo de 48px e um item de menu por linha.
   ========================================================================== */

/* Botão de ativar notificações: vive dentro do menu, nunca flutuando */
.emme-notify-btn {
  display: block; width: 100%;
  margin: 16px 0 4px; padding: 13px 14px; min-height: 48px;
  border: 1px solid #344054; background: #1d2939; color: #fff;
  border-radius: 11px; font-size: 13.5px; font-weight: 700;
  text-align: left; cursor: pointer;
}
.emme-notify-btn:hover { background: #243244; }
.emme-notify-btn:disabled { opacity: .7; cursor: default; }

.emme-menu-close { display: none; }

@media (max-width: 850px) {
  /* ---------- Menu do dashboard (.sidebar / .nav) ----------
     O submenu é flex no desktop; no celular vira bloco, senão o flex-shrink
     encolhe cada item e eles acabam espremidos dois por linha. */
  .nav .gv-submenu { margin: 2px 0 12px 10px; padding-left: 10px; }
  .nav .gv-submenu.open { display: block !important; }
  .nav .gv-submenu button {
    display: block; width: 100% !important; text-align: left;
    font-size: 14px; padding: 13px 14px; margin: 4px 0;
    min-height: 48px; white-space: normal; border-radius: 10px;
  }
  .nav .gv-module .gv-parent {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100% !important; min-height: 50px; font-size: 13.5px; padding: 13px 14px;
  }
  .nav > button { width: 100% !important; min-height: 48px; font-size: 14px; }
  .nav .gv-parent .gv-arrow { float: none; }
  .sidebar { width: min(330px, 88vw); overflow-y: auto; padding: 18px 16px calc(90px + env(safe-area-inset-bottom)); }

  /* O menu precisa passar por cima do cabeçalho fixo (z-index 9000),
     senão o topo do menu — inclusive o botão de fechar — fica inalcançável. */
  .app.menu-open .sidebar, .app-shell.menu-open .crm-sidebar { z-index: 9500 !important; }
  .app.menu-open::after, .app-shell.menu-open::after { z-index: 9400 !important; }

  /* ---------- Menu das demais telas (.crm-sidebar) ----------
     A posição de "escondido" precisa acompanhar a largura nova, senão sobra
     uma faixa do menu aparecendo na borda esquerda com o menu fechado. */
  .crm-sidebar {
    width: min(330px, 88vw);
    left: calc(-1 * min(330px, 88vw) - 12px);
    overflow-y: auto; padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .app-shell.menu-open .crm-sidebar { left: 0; }
  .crm-sidebar .module-links a {
    display: flex; align-items: center; min-height: 48px;
    font-size: 14.5px; padding: 12px 14px; border-radius: 10px;
  }
  .crm-sidebar .module-title { min-height: 50px; display: flex; align-items: center; font-size: 13.5px; padding: 12px 14px; }
  .app-shell.menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(16,24,40,.55); z-index: 1999; }

  /* Itens "em breve" não fazem nada e roubavam o topo da tela pequena */
  .nav button[disabled], .crm-sidebar .future { display: none !important; }

  /* Fechar o menu com um toque. Fixo (e não absoluto) para continuar
     visível enquanto a pessoa rola a lista de módulos. */
  .app.menu-open .emme-menu-close, .app-shell.menu-open .emme-menu-close {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; left: calc(min(330px, 88vw) - 54px);
    width: 42px; height: 42px;
    border: 0; border-radius: 11px; background: #1d2939; color: #fff;
    font-size: 18px; cursor: pointer; z-index: 9600;
  }
  .menu-toggle { min-width: 48px; min-height: 48px; font-size: 20px; }

  /* Sino de alertas no rodapé, para não cobrir o cabeçalho.
     `top: auto` é obrigatório: o CSS base fixa top:52px e o elemento esticaria. */
  .emme-bell {
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    min-height: 48px; padding: 12px 16px; font-size: 15px;
  }
  .emme-v11-float {
    left: 12px; right: 12px; width: auto;
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* 16px evita o zoom automático do iOS ao focar um campo */
  input, select, textarea { font-size: 16px; min-height: 46px; }
  .btn, button.btn { min-height: 46px; }
  table { font-size: 13.5px; }
}