/* bottom-tabbar.css — navegação mobile v2 (BottomTabBar.razor).
   Design: docs/design_mobile/handoff/ORDENADO_MOBILE_V2.md.
   z-index: barra acima do conteúdo (1500, mesmo nível da nav antiga);
   overlay/sheet acima da topbar mobile (1700 no app.css). */
.btb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center;
  background: #fff; border-top: 1px solid #E8EAEE;
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(14,42,71,.08); }
.btb-item { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: #98A1AE; font-family: inherit; font-size: 10.5px; font-weight: 700;
  line-height: 1.1; min-height: 48px; min-width: 0; touch-action: manipulation; }
.btb-item > span:last-child { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
.btb-item .ms { font-size: 24px; line-height: 1; }
.btb-item.ativo { color: #1E4D8C; }
.btb-fab-slot { display: flex; justify-content: center; }
.btb-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: #F59E0B; color: #0E2A47; margin-top: -30px;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  /* anel na cor do fundo da página (#eef0f3) simula o recorte do protótipo */
  box-shadow: 0 10px 24px -6px rgba(245,158,11,.65), 0 0 0 5px #eef0f3; }
.btb-fab .ms { font-size: 28px; line-height: 1; }
/* driver.js aplica overflow:hidden ao pai direto do elemento destacado.
   Como o FAB usa margin-top negativo, isso recortava o círculo e apagava o +. */
.btb .btb-fab-slot {
  overflow: visible !important;
}
.btb-fab-slot:has(> #tour-fab.driver-active-element) {
  overflow: visible !important;
}
#tour-fab.driver-active-element .ms {
  color: #0E2A47 !important; opacity: 1 !important; visibility: visible !important;
}
.btb-fab:active, .btb-item:active { transform: translateY(1px); }
.btb-overlay { position: fixed; inset: 0; z-index: 1750; background: rgba(14,42,71,.45); }
.btb-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1751;
  background: #fff; border-radius: 26px 26px 0 0;
  padding: 12px 18px calc(30px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 50px rgba(14,42,71,.3);
  max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain;
  animation: btb-up .2s ease-out; }
@keyframes btb-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Área de arrasto: alvo generoso p/ o dedo (o punho de 5px seria fino demais).
   touch-action:none entrega o gesto vertical ao pointermove em vez do scroll. */
.btb-sheet-arrasto { padding: 4px 0 12px; margin: -4px 0 4px; cursor: grab; touch-action: none; }
.btb-sheet-arrasto:active { cursor: grabbing; }
.btb-handle { width: 44px; height: 5px; border-radius: 999px; background: #E2E5EA; margin: 0 auto; }
.btb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.btb-grid > button { display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 0; min-width: 0;
  font-family: inherit; font-size: 11px; font-weight: 700; color: #0E2A47;
  line-height: 1.15; touch-action: manipulation; }
.tile { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.tile .ms { font-size: 24px; line-height: 1; }
.t-ouro  { background: #FBEFD6; color: #B07F0E; }
.t-azul  { background: #E3E8F0; color: #1E4D8C; }
.t-rosa  { background: #FBE3EF; color: #C2348B; }
.t-verde { background: #DDF1E8; color: #0E9E6E; }
.t-roxo  { background: #EDE7FA; color: #7C5CCF; }
.t-cinza { background: #EEF0F3; color: #5C6675; }
/* Chaveamento Simples/Avançado dentro do sheet "Mais" */
.btb-modo { margin-top: 16px; }
.btb-legal { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.btb-legal a { font-size: 11px; color: #98A1AE; text-decoration: none; }

/* ── Integração com o layout (MainLayout) ── */
@media (max-width: 767.98px) {
  /* v2: sem hambúrguer e sem drawer no telefone — navegação é a tab bar + sheets.
     Tablets (768–959px) mantêm hambúrguer + drawer como antes. */
  .app-icon-trigger[aria-label="Abrir menu"] { display: none !important; }
  .app-sidebar.mud-drawer, .mud-drawer-overlay { display: none !important; }
  /* Folga p/ a barra + FAB elevado não cobrirem o fim das listas */
  .app-content-container {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* No telefone o FAB central da tab bar já cria transação — os botões "Nova
     transação" (dashboard) e "Nova" (Transações) ficam redundantes. Somem aqui
     e voltam no tablet/desktop. Sem !important em width p/ o MudStack não
     reservar o espaço vazio deles. */
  .dashboard-action-button,
  .transacoes-acao-principal {
    display: none !important;
  }
  /* Snackbar (toast): o padrão do MudBlazor fica em bottom:24px com z-index 1400,
     ou seja ATRÁS da tab bar (z-index 1500) e por baixo dela — a metade de baixo
     da mensagem aparecia cortada. Sobe o toast acima da barra + FAB e coloca-o
     acima dela no empilhamento (abaixo do sheet "Mais", que é 1750). */
  #mud-snackbar-container { z-index: 1600 !important; }
  .mud-snackbar-location-bottom-center,
  .mud-snackbar-location-bottom-left,
  .mud-snackbar-location-bottom-right {
    bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (min-width: 768px) {
  .btb, .btb-overlay, .btb-sheet { display: none !important; }
}