/* ===== 06-barras-e-sheet.css — TabBar, BottomBar, bottom sheet e confirmação =====
   Fatia do antigo app.css (09/08/2026). O NÚMERO NO NOME É A POSIÇÃO NA CASCATA: é a ordem
   dos <link> no index.html, e trocá-la muda quem vence. Regra e política em 01-base.css. */

/* ---- TabBar global (navegação entre módulos) ----
   Só nas rotas-destino (Home + 4 listas) — ver TabBar.razor/MainLayout. Empilhamento com a
   BottomBar da página: a TabBar fica em bottom: 0 e é a ÚNICA a receber o safe-area-inset (é ela
   que encosta na borda física); a BottomBar sobe pra cima dela via .has-tab-bar (abaixo). Os
   sheets (z 30/31) cobrem as duas. Altura fixa em --tab-bar-h para o deslocamento ser exato. */
:root { --tab-bar-h: 4.3rem; }

.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21; /* acima da .bottom-bar (20), abaixo dos sheets (30/31) */
    box-sizing: content-box; /* altura = --tab-bar-h; o padding do safe-area soma por fora */
    height: var(--tab-bar-h);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(28, 27, 25, .06);
}

.tab-bar-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex: 1;
    min-width: 48px;
    padding: .3rem .2rem;
    color: var(--muted);
    text-decoration: none;
}

.tab-bar-item .icon { width: 1.5rem; height: 1.5rem; }

.tab-bar-label { font-size: .68rem; font-weight: 600; line-height: 1.1; text-align: center; }

/* Berço do ícone — existe em toda aba, com fundo só na ativa (abaixo), pra entrar e sair do
   destaque sem mexer no layout: a pílula cresce simétrica em volta do ícone de 1,5rem, então o
   ícone continua na mesma altura de antes e o cadeado da aba Pro, que é absoluto na célula, não
   se desalinha. */
.tab-bar-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 1.9rem;
    border-radius: 1rem;
}

/* Aba ativa: cor de marca + pílula de fundo atrás do ícone, o mesmo --brand-tint que já marca
   selecionado no .attention-tile e no .view-toggle-btn. A cor sozinha era o único sinal visual de
   "você está aqui", e matiz é o primeiro a sumir no uso em campo (sol na tela) e para quem não
   distingue cores (WCAG 1.4.1) — forma resiste. O aria-current já servia o leitor de tela; isto é
   o equivalente para quem enxerga a barra.
   O fundo vai no berço do ícone, e não na célula inteira, porque a célula já usa fundo no :active
   pro retorno do toque — dois fundos no mesmo lugar e o toque some justamente na aba ativa. */
.tab-bar-item.is-active { color: var(--brand); }

.tab-bar-item.is-active .tab-bar-icone { background: var(--brand-tint); }

.tab-bar-item:active { background: var(--bg); border-radius: .6rem; }

/* Aba travada por assinatura (Recebimentos). Vira <button> — abre o sheet de valor em vez de navegar
   —, então precisa dos mesmos resets do button.module-tile: sem eles herdaria fonte, borda e fundo do
   agente e sairia visivelmente diferente das abas vizinhas. */
button.tab-bar-item {
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Menos peso visual que as abas navegáveis: o cadeado informa, a cor não precisa gritar. Mesmo
   tratamento do .module-tile.is-locked no painel Gerenciamento da Home. */
.tab-bar-item.is-locked { position: relative; color: var(--muted); opacity: .75; }

.tab-bar-lock {
    position: absolute;
    top: .3rem;
    right: 50%;
    margin-right: -1.15rem; /* encosta no canto superior direito do ícone, não da célula inteira */
    display: inline-flex;
    color: var(--muted);
}

.tab-bar-lock .icon { width: .8rem; height: .8rem; }

/* Reserva de rolagem pra TabBar — o MainLayout emite depois do @Body nas rotas-destino. */
.tab-bar-spacer { height: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px)); }

/* Página COM TabBar: a BottomBar da página empilha logo acima dela e devolve o safe-area
   (quem paga o inset é a TabBar). O spacer da BottomBar não muda — a reserva extra da TabBar
   vem do .tab-bar-spacer emitido pelo layout. */
.has-tab-bar .bottom-bar {
    bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: .5rem;
    box-shadow: none;
}

/* Barra de ação fixa — ícones sempre ao alcance do polegar, um único padrão em todo o app */
.bottom-bar-spacer { height: 5.5rem; }

.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: .5rem;
    max-width: 720px;
    margin: 0 auto;
    padding: .5rem 1rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(28, 27, 25, .06);
}

.bottom-bar-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex: 1;
    min-width: 48px;
    min-height: 48px;
    padding: .3rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-radius: .6rem;
    text-decoration: none;
    cursor: pointer;
}

/* Início emitido pela própria barra: largura de uma célula da TabBar (1/5 da barra), não a fração
   que sobraria de dividir a barra pelo número de ações da tela. As duas barras nunca aparecem
   juntas, então é ao TROCAR de tela que o botão mudaria de tamanho — e o dedo procura o Início pelo
   mesmo alvo em todo o app, que é a razão de ele já vir na mesma ponta esquerda das duas.
   A conta sai em % da própria barra, não em vw: percentual de flex-basis resolve contra o conteúdo
   do container (largura da barra menos as 2rem de padding lateral), então 1/5 da barra = 20% dele
   + .4rem. Usar vw erraria no desktop, onde a barra do rolamento entra no 100vw e não na barra. */
.bottom-bar-action.is-inicio { flex: 0 0 calc(20% + .4rem); }

.bottom-bar-action .icon { width: 1.6rem; height: 1.6rem; }

.bottom-bar-label {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.bottom-bar-action:active { background: var(--bg); }

.bottom-bar-action.is-primary {
    color: #fff;
    background: var(--brand);
    border-radius: .8rem;
}

.bottom-bar-action.is-primary:active { background: var(--brand-dark); }

.bottom-bar-action:disabled { opacity: .5; cursor: default; }
.bottom-bar-action:disabled:active { background: transparent; }
.bottom-bar-action.is-primary:disabled:active { background: var(--brand); }

/* Bottom sheet — painel deslizante pra ações que antes ocupavam espaço fixo (seleção, inclusão de item) */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 27, 25, .45);
    z-index: 30;
}

/* Sheet aberto POR CIMA de outro (BottomSheet Aninhado="true"). Um degrau acima do par 30/31 para
   o backdrop de cima cobrir o painel de baixo — sem isto o sheet externo fica aceso e clicável ao
   lado do interno, porque painel(31) pinta depois de backdrop(30) mesmo vindo antes no DOM. */
.sheet-backdrop.is-aninhado { z-index: 32; }
.sheet-panel.is-aninhado { z-index: 33; }

.sheet-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    background: #fff;
    border-radius: .9rem .9rem 0 0;
    box-shadow: 0 -2px 16px rgba(28, 27, 25, .12);
    padding-bottom: env(safe-area-inset-bottom);
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--line);
}

.sheet-title { margin: 0; font-size: 1.05rem; }

.sheet-body {
    overflow-y: auto;
    padding: 1rem;
    flex: 1;
}

.sheet-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.sheet-actions .btn-secondary,
.sheet-actions .btn-primary-lg,
.sheet-actions .btn-danger-lg { flex: 1; }

/* Diálogo de confirmação (ConfirmDialog) — mesmo painel deslizante do BottomSheet, sem o
   cabeçalho com botão de fechar; sai só pelas duas ações explícitas.

   Acima de TUDO que o app desenha, e não um degrau acima do sheet comum: ele é o único diálogo
   global (nasce no MainLayout) e pode ser pedido com qualquer coisa aberta por baixo — o sheet de
   ações do card, um sheet aninhado (32/33), o visor de fotos (40). Empatado em 31 com o
   .sheet-panel, o painel do sheet pintava por cima DESTE backdrop e seguia clicável ao lado da
   pergunta: dava para tocar em "Editar"/"Ver orçamento" e navegar para outra tela com a confirmação
   de exclusão ainda aberta — que então resolvia numa página já descartada.

   Só o dedo é problema do z-index; Tab e leitor de tela saem por cima de qualquer camada, e quem os
   barra é o `inert` da .app-shell (ver inertar() em js/foco.js). O touch-action tira a rolagem por
   arraste sobre o backdrop, para a tela de trás não andar durante a pergunta. */
.sheet-backdrop.is-confirm { z-index: 44; touch-action: none; }
.confirm-panel { z-index: 45; }
.confirm-body { padding: 1.1rem 1rem; }
.confirm-title { margin: 0 0 .5rem; font-size: 1.05rem; }
.confirm-message { margin: 0 0 1rem; color: var(--muted); }


/* "O que mudou" (NovidadesSheet) — dentro do .sheet-body, então herda rolagem e respiro. Um bloco
   só: número e data da versão no cabeçalho, e os itens numa lista simples. Sem marcador de "novo" e
   sem separação por versão — quem abriu o sheet sozinho está vendo justamente o que não viu, e as
   entregas não carregam número (quem numera é o deploy, ADR 0019). */
.novidades-cabecalho { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.novidades-numero { font-weight: 600; }
.novidades-data { color: var(--muted); font-size: .85rem; }
.novidades-itens { margin: 0; padding-left: 1.15rem; }
.novidades-itens li + li { margin-top: .45rem; }