/* =========================================================
   FINANCEL — APP ULTRA (global)
   Pequenos overrides para padronizar UX/Responsividade
   Sem mexer nos layouts específicos de cada página.
   ========================================================= */

/* Evita que grids/headers criem scroll horizontal em telas pequenas */
body.app-shell--no-topnav:not(.financel-ai-page) {
  overflow-x: hidden;
}

/* Mantém consistência de foco em todo o app (exceto FINANCEL AI, que tem tokens próprios) */
body.app-shell--no-topnav:not(.financel-ai-page) :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Header: garante flex wrap e evita sumiços por overflow */
.header,
.header-left,
.header-middle,
.header-right {
  min-width: 0;
}

.header-right {
  flex-wrap: wrap;
}

/* Botões no header: altura e clique consistente */
.header-right .btn-main,
.header-right .btn-header-ghost,
.header-right .btn-header-logout,
.header-right .user-pill {
  min-height: var(--fin-btn-height);
}

/* A label do botão não pode “empurrar” o layout */
.btn-header-ghost,
.btn-main,
.btn-header-logout {
  white-space: nowrap;
}

/* Mobile: mantém os botões acessíveis e empilhados */
@media (max-width: 480px) {
  .header-right {
    justify-content: center;
  }
}

/* Tablet/Mobile: evita botões “fugindo” em barras de ação */
@media (max-width: 1024px) {
  .lanc-actions,
  .dash-top-right-actions,
  .dash-card-actions,
  .hero-actions,
  .lanc-filter-actions,
  .lanc-list-toolbar,
  .modal-actions,
  .fin-ai-actions {
    flex-wrap: wrap;
    min-width: 0;
  }

  .lanc-actions > *,
  .dash-top-right-actions > *,
  .dash-card-actions > *,
  .hero-actions > *,
  .lanc-filter-actions > *,
  .lanc-list-toolbar > *,
  .modal-actions > *,
  .fin-ai-actions > * {
    min-width: 0;
    max-width: 100%;
  }
}

/* Bottom-nav: com mais itens, reduz levemente o mínimo para caber melhor */
.bottom-link {
  min-width: 58px;
}

@media (max-width: 400px) {
  .bottom-link {
    min-width: 52px;
  }
}
