/* ged_drawer.css - menu gaveta no celular (documento PAI, via CustomFiles).
   Par de ged_drawer.js. Tudo aqui so pega elementos que o Delphi marca no
   modo mobile ('ged-drawer', 'ged-hdr-hamburger', 'ged-hdr-cliente'); no
   desktop nenhuma dessas classes existe e nada muda.

   ExtJS escreve left/top/width inline no el do container. A gaveta anda so
   por transform e sobe por z-index - nunca brigar com left/width. */

.ged-drawer {
  z-index: 20000 !important;
  transform: translateX(-100%);
  /* Fechada: invisivel TAMBEM para o teclado e leitor de tela, nao so fora da
     tela. visibility entra no fim da transicao para a animacao de saida
     aparecer. */
  visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
}

.ged-drawer.ged-drawer--open {
  transform: none;
  visibility: visible;
  transition: transform .2s ease;
}

.ged-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19999;
  background: rgba(15, 23, 42, .55);
}

/* Hamburguer do cabecalho: alvo de toque de 44px (WCAG 2.5.8). Sem mexer em
   'display': e com display:none que o ExtJS o esconde no desktop, e um
   display aqui (ainda mais com !important) o faria reaparecer. */
.ged-hdr-hamburger {
  color: #fff !important;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  line-height: 44px;
  text-align: center;
}

/* Nome do cliente no cabecalho: uma linha so, cortada com reticencias. O
   texto pode estar no proprio el ou num filho que o ExtJS cria. */
.ged-hdr-cliente,
.ged-hdr-cliente * {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .ged-drawer,
  .ged-drawer.ged-drawer--open {
    transition: none;
  }
}