/* Camada de celular do Central WH.
   Carregar DEPOIS do <style> inline de cada pagina: as regras aqui vencem por
   ordem de cascata, sem precisar de !important nem de mexer no CSS existente.
   Fora do breakpoint nada aqui aplica, entao o desktop fica intocado. */

:root{ --wh-gaveta:210px; }

/* Botao de menu e fundo escuro so existem no celular */
.wh-menu-btn,
.wh-fundo{ display:none; }

@media (max-width: 900px){

  /* 100vh no celular conta a barra de endereco e corta o rodape.
     dvh acompanha a barra aparecendo e sumindo. */
  body{ height:100dvh; }
  .app{ height:100dvh; }

  /* ---- a barra de navegacao vira gaveta ---- */
  .sidebar{
    position:fixed;
    left:0; top:0;
    width:var(--wh-gaveta);
    min-width:var(--wh-gaveta);
    height:100dvh;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
    box-shadow:2px 0 24px rgba(0,0,0,.34);
    will-change:transform;
  }
  body.wh-menu-aberto .sidebar{ transform:translateX(0); }

  /* enquanto o dedo arrasta, quem manda e o JS: transicao desligada
     pra gaveta acompanhar o dedo em tempo real */
  body.wh-arrastando .sidebar,
  body.wh-arrastando .wh-fundo{ transition:none; }

  .wh-fundo{
    display:block;
    position:fixed;
    inset:0;
    z-index:150;
    background:rgba(26,8,0,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .26s ease;
    -webkit-tap-highlight-color:transparent;
  }
  body.wh-menu-aberto .wh-fundo{ opacity:1; pointer-events:auto; }

  /* alvos de toque maiores dentro da gaveta */
  .ni{ padding:14px 16px; font-size:14px; }

  /* ---- topo ---- */
  .wh-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    margin-left:-8px;
    flex-shrink:0;
    background:transparent;
    border:0;
    border-radius:10px;
    color:var(--t1, #5C1A00);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .wh-menu-btn:active{ background:rgba(92,26,0,.08); }

  .topbar{ padding:0 10px; gap:6px; }
  .syncinfo{ display:none; }

  /* Sem isso o titulo quebra em tres linhas e estica a barra inteira.
     min-width:0 e o que permite o flex encolher e o reticencias aparecer. */
  .ptitle{
    font-size:15px;
    min-width:0;
    flex:1 1 auto;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* botoes ficam numa linha so, sem quebrar o rotulo */
  .btn-add, .btn-ghost{
    padding:9px 10px;
    font-size:9px;
    letter-spacing:.6px;
    white-space:nowrap;
    flex-shrink:0;
  }

  /* ---- conteudo respira ---- */
  .content{ -webkit-overflow-scrolling:touch; }
  .dp{ padding:14px; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .kpi{ padding:13px 14px; }
  .kpi-val{ font-size:24px; }
  .dash-row{ grid-template-columns:1fr; }

  /* tabela larga rola sozinha em vez de espremer a pagina */
  table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* Em tela bem estreita a gaveta ocupa quase tudo, pra leitura ficar confortavel */
@media (max-width: 380px){
  :root{ --wh-gaveta:82vw; }
}

@media (prefers-reduced-motion: reduce){
  .sidebar, .wh-fundo{ transition:none; }
}