/* Fonte-base do app. O MudBlazor dimensiona toda a tipografia em rem,
   relativo a este valor — aumentar aqui amplia TODOS os textos de uma vez,
   proporcionalmente. Padrão do navegador = 16px. */
html {
    font-size: 18px;
}

/* O <FocusOnNavigate Selector="h1"> foca o h1 a cada navegação (tabindex=-1) para
   acessibilidade — mas o navegador desenha o anel de foco, deixando uma "bordinha"
   sobrando no título (visível na landing). Removemos só o outline do foco
   PROGRAMÁTICO; o foco por teclado (Tab) em links/botões continua com seu anel. */
h1:focus,
h1:focus-visible,
[tabindex="-1"]:focus {
    outline: none;
}

/* No celular a fonte-base de 18px deixa tudo grande demais (MudBlazor escala em
   rem), causando overflow e sobreposição. Voltamos ao padrão 16px em telas
   estreitas — alivia toda a densidade de uma vez. */
@media (max-width: 599px) {
    html { font-size: 16px; }
}

/* Marca na AppBar: nunca quebrar em duas linhas (sobrepunha o ícone no mobile). */
.app-brand-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 599px) {
    .app-brand-title { font-size: 1.05rem !important; letter-spacing: 0 !important; }
}

/* Valor "headline" de card de relatório: não quebrar o "R$" numa linha à parte. */
.card-valor {
    white-space: nowrap;
}
@media (max-width: 599px) {
    .card-valor { font-size: 1rem !important; }
}

html, body {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    background: #f1f5f9;
    margin: 0;
    padding: 0;
    /* Renderização mais leve da fonte — evita o aspecto "encorpado/negrito"
       do antialiasing padrão do navegador. Mantém o peso normal (400). */
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* MudBlazor drawer nav overrides */
.mud-nav-link.active {
    background: rgba(255,255,255,0.12) !important;
    color: #f59e0b !important;
    border-radius: 8px;
}

.mud-nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    color: #94a3b8 !important;
    transition: background 0.15s;
}

.mud-nav-link:hover {
    background: rgba(255,255,255,0.08) !important;
}

.mud-drawer-content {
    padding-top: 8px;
}

/* Cards */
.rounded-xl {
    border-radius: 16px !important;
}

/* Cabeçalho + barra de filtros da página de Transações fixos ao rolar no desktop
   (logo abaixo do AppBar). Fica fora do card da lista (que tem overflow:hidden),
   pois position:sticky não funciona dentro de container com overflow oculto.
   No mobile o sticky é removido — o filtro rola com a página normalmente. */
.transacoes-sticky {
    position: sticky;
    top: 64px;            /* altura do MudAppBar (não-dense) */
    z-index: 10;
    background: #f1f5f9;  /* fundo da página, cobre a lista que passa por baixo */
    padding-top: 12px;
    padding-bottom: 8px;
}
.transacoes-selecao-sticky {
    background: #eff6ff;
    border-top: 1px solid #bfdbfe;
}

@media (max-width: 959px) {
    /* No mobile e tablet o filtro não é sticky — ocupa espaço demais na tela pequena */
    .transacoes-sticky {
        position: static;
        padding-bottom: 0;
    }
}

/* Transacao hover */
.transacao-item {
    transition: background 0.1s;
    cursor: default;
}
.transacao-item:hover {
    background: #f8fafc;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

#blazor-error-ui {
    background: #fef2f2;
    border-top: 2px solid #ef4444;
    bottom: 0;
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 2000;
    color: #991b1b;
    font-size: 14px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 10px;
}