/* As declarações @font-face ficam em fonts.css e apontam apenas para arquivos
   incorporados ao Ordenado. As regras abaixo preservam exatamente as famílias,
   métricas e ligatures já usadas pela interface e pelo MudBlazor. */

.material-icons,
.mud-icon-root.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.mud-icon-root.material-icons-outlined {
    font-family: 'Material Icons Outlined' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Fonte-base do app. O MudBlazor dimensiona toda a tipografia em rem,
   16px é o padrão do navegador e dá mais respiro no desktop e no mobile. */
html {
    font-size: 16px;
}

/* 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;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
    .card-valor { font-size: 1rem !important; }
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #eef0f3;
    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;
}

/* Títulos em Sora (display da identidade Ordenado); corpo/UI em Inter. */
h1, h2, h3 {
    font-family: 'Sora', 'Inter', 'Segoe UI', sans-serif;
}

/* Utilitários visuais do redesenho. */
.tnum {
    font-variant-numeric: tabular-nums;
}

.ms {
    font-family: 'Material Symbols Rounded', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    font-feature-settings: 'liga';
    font-variant-ligatures: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    speak: none;
    user-select: none;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Ícone da marca Ordenado (SVG inline com as três barras) */
.app-brand-mark {
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex-shrink: 0;
}

.app-brand-mark-topbar {
    width: 32px;
    height: 32px;
}

.app-icon-trigger {
    min-width: 40px !important;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 12px !important;
}

.app-icon-trigger .ms {
    font-size: 1.35rem;
}

/* ── Ergonomia touch (QA responsividade 2026-06-29) ──────────────────────────
   Garante alvo mínimo de toque nos controles acionáveis em celular/tablet.
   Ativa por `pointer:coarse` (hardware de toque real) OU `max-width:1024px`
   (telas estreitas e emulação de viewport) — assim é determinístico e
   verificável, sem inflar o desktop com mouse em janelas largas. */
@media (pointer: coarse), (max-width: 1024px) {
    /* Botões de ícone do topo (menu, ajuda, alertas, conta) — venciam em 32px */
    .app-icon-trigger {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* Estrela Pro do topo */
    .topbar-pro-star {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Botões de ação em geral (Nova transação, Filtros, Analisar, Escolher arquivo…) */
    .mud-button-root:not(.mud-icon-button) {
        min-height: 44px;
    }

    /* Icon-buttons em geral (consolidar ✓, menu ⋮, paginação, steppers de campo
       numérico) — apareciam com 26-30px. Piso de 40px para toque confortável.
       Tamanho do glifo não muda; cresce só a área clicável.
       Exclui o MudSwitch: no MudBlazor 9.5 o container deslizante do pino carrega
       "mud-button-root mud-icon-button mud-switch-base" (fonte: SwitchClassname em
       MudSwitch.razor.cs). É um span absoluto de 24px (small); forçar 40px nele
       desloca o pino para fora do trilho no mobile. */
    .mud-icon-button:not(.mud-switch-base) {
        min-width: 40px;
        min-height: 40px;
    }

    /* Fileira de ícones da barra lateral (Alternar menu, Ajuda, Alertas, Conta).
       Aparece em modo sidebar — que é o layout do tablet em paisagem — onde o
       topbar (.app-icon-trigger) não renderiza. Vinham 32×32. */
    .app-sidebar-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Menu de alertas (sininho): cabeçalho e rodapé ("Ver tudo") fixos, só a lista
   rola no meio. A altura é limitada à viewport (dvh) em vez de 480px fixo, então
   em telas baixas de celular o "Ver tudo" nunca é cortado. */
.alertas-menu {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 24px);   /* nunca encosta nas bordas no celular */
    max-height: 560px;               /* fallback se min()/dvh não existir */
    /* Folga de 64px (não 96): em navegador in-app de celular o viewport é curto e
       96px cortava o 2º alerta. O popover abre a ~52px do topo, então sobra ~12px
       até a base — não estoura. Assim 2 pendências cabem sem scroll; 3+ rolam. */
    max-height: min(560px, calc(100dvh - 64px));
}

.alertas-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
}

.alertas-menu-body {
    overflow-y: auto;
    min-height: 0;
    flex: 0 1 auto;                  /* não cresce: sem vão quando há poucos alertas */
    padding: 8px;                    /* respiro em volta dos cartões */
}

/* Cada alerta é um cartão arredondado, tingido pela severidade (app é light-only).
   Só o fundo/borda muda — texto, ícone, chip e valor seguem como estavam. */
.alerta-card {
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    background: #f8fafc;
}

.alerta-card:last-child {
    margin-bottom: 0;
}

.alerta-card--vencido {
    background: rgba(220, 38, 38, .07);
    border-color: rgba(220, 38, 38, .16);
}

.alerta-card--hoje {
    background: rgba(217, 119, 6, .09);
    border-color: rgba(217, 119, 6, .18);
}

.alerta-card--proximo {
    background: #f8fafc;
    border-color: #eef2f7;
}

/* Popover do sino com cantos mais arredondados (classe via MudMenu PopoverClass) */
.alertas-popover {
    border-radius: 16px !important;
    overflow: hidden;
}

/* Selo de consolidação da linha de transação.
   Consolidada = selo verde cheio com sombra; pendente = anel tracejado que "pede" a ação. */
.selo-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.selo-check .ms {
    font-size: 17px;
    line-height: 1;
    color: #fff;
}

.selo-check--on {
    background: #0e9e6e;
    border-color: #0e9e6e;
    box-shadow: 0 2px 5px rgba(14, 158, 110, .35);
}

.selo-check--off {
    border: 2px dashed #c9cfd8;
}

.selo-check--off:hover {
    border-color: #0e9e6e;
    background: rgba(14, 158, 110, .06);
}

/* Mobile: selo menor para não competir com o texto da linha. */
@media (max-width: 600px) {
    .selo-check {
        width: 20px;
        height: 20px;
    }

    .selo-check .ms {
        font-size: 13px;
    }

    .selo-check--off {
        border-width: 1.5px;
    }
}

.alertas-menu-foot {
    padding: 8px;
    border-top: 1px solid #e2e8f0;
    flex: 0 0 auto;
}

/* Atalho dos alertas "A pagar" -> item em Transações: item clicável + destaque
   temporário (flash âmbar que some sozinho) na linha de chegada. */
.alerta-item-link {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .12s ease;
}

.alerta-item-link:hover {
    background-color: rgba(245, 158, 11, .08);
}

@keyframes ed-destaca-flash {
    0%   { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, .28); }
    70%  { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, .20); }
    100% { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0); }
}

.transacao-destacada {
    animation: ed-destaca-flash 2.8s ease-out 1;
    border-radius: 8px;
}

.app-nav-link-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.app-nav-link-inner .ms {
    font-size: 1.2rem;
    color: currentColor;
}

.app-nav-link-accent .ms,
.app-nav-link-accent {
    color: #f2c861;
}

/* MudBlazor drawer nav overrides */
.mud-nav-link.active {
    background: rgba(224,160,18,0.14) !important;
    color: #f2c861 !important;
    border-radius: 10px;
}

.mud-nav-link {
    border-radius: 10px;
    margin: 2px 8px;
    color: #8fa3bc !important;
    transition: background 0.15s;
    height: auto !important;
    min-height: 48px;
    padding-block: 8px !important;
}

.mud-nav-link .mud-nav-link-text {
    line-height: 1.2;
    white-space: normal;
}

.mud-nav-link .app-nav-link-inner,
.mud-nav-group .mud-nav-link .app-nav-link-inner {
    width: 100%;
}

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

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

/* Moldura desktop alinhada ao redesign: sidebar full-height e sem AppBar superior.
   Mobile mantém a AppBar atual para preservar a navegação já validada. */
@media (min-width: 960px) {
    .app-topbar {
        display: none !important;
    }

    .app-sidebar.mud-drawer {
        top: 0 !important;
        height: 100vh !important;
        background: #0e2a47 !important;
        border-right: 0 !important;
        box-shadow: none !important;
    }

    .app-sidebar .mud-drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 20px 14px 28px;
        overflow-y: auto;
    }

    .app-sidebar .mud-drawer-header {
        min-height: 48px;
        padding: 0 8px 18px;
    }

    .app-sidebar .mud-nav-link {
        min-height: 42px;
        height: auto;
        margin: 4px 0;
        padding: 8px 12px;
        border-radius: 9px;
        font-weight: 700;
    }

    .app-sidebar .mud-nav-link-text {
        font-size: .92rem;
    }

    .app-sidebar .mud-navmenu {
        padding-top: 0;
        flex-shrink: 0;
    }

    /* Chaveamento Simples/Avançado — logo acima do perfil, no rodapé do drawer */
    .app-sidebar-modo {
        margin-top: auto;
        padding-top: 12px;
        flex-shrink: 0;
    }

    .app-sidebar-profile {
        padding-top: 14px;
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        border-top: 1px solid rgba(226, 232, 240, .14);
    }

    .app-sidebar-action-btn {
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        flex-shrink: 0;
        color: #8fa3bc !important;
    }

    .app-sidebar-action-btn:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #e2e8f0 !important;
    }

    .app-sidebar-action-btn .ms {
        font-size: 1.1rem;
    }

    .app-sidebar-avatar {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: #1e4d8c;
        color: #fff;
        font-size: .9rem;
        font-weight: 800;
    }

    .app-sidebar-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 8px 8px;
        border-bottom: 1px solid rgba(226, 232, 240, .1);
        margin-bottom: 4px;
    }

    .sidebar-pro-badge {
        display: inline-flex;
        align-items: center;
        font-size: .58rem;
        font-weight: 800;
        background: #f59e0b;
        color: #fff;
        border-radius: 4px;
        padding: 2px 5px;
        letter-spacing: .5px;
        line-height: 1.3;
        flex-shrink: 0;
        text-transform: uppercase;
    }


    .app-sidebar-profile-text {
        min-width: 0;
        color: #fff;
        display: grid;
        line-height: 1.15;
    }

    .app-sidebar-profile-text strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .82rem;
    }

    .app-sidebar-profile-text span {
        color: #8fa3bc;
        font-size: .74rem;
    }

    /* Chip clicável "Plano gratuito" → /assinatura (lembrete passivo, só web).
       Discreto: tom âmbar suave da marca, seta indicando que leva a algum lugar. */
    .sidebar-plano-badge {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        width: fit-content;
        margin-top: 1px;
        padding: 1px 4px 1px 6px;
        border: 1px solid rgba(245, 158, 11, .35);
        border-radius: 999px;
        background: rgba(245, 158, 11, .12);
        color: #f1b34b;
        font-size: .72rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .12s ease, border-color .12s ease;
    }

    .sidebar-plano-badge:hover {
        background: rgba(245, 158, 11, .2);
        border-color: rgba(245, 158, 11, .55);
    }

    .sidebar-plano-badge .ms {
        font-size: 15px;
        line-height: 1;
    }

    .app-main {
        padding-top: 0 !important;
    }

    .app-content-container {
        padding-top: 28px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .desktop-hamburger-btn {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1700;
        cursor: pointer;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(14, 42, 71, 0.08);
        border: 1px solid rgba(226, 232, 240, 0.8);
        color: #0e2a47;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .desktop-hamburger-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(14, 42, 71, 0.12);
    }

    .desktop-hamburger-btn .ms {
        font-size: 24px;
    }

    /* Empurra o conteúdo principal para a direita para não ficar sob o botão flutuante */
    .desktop-drawer-closed .app-content-container {
        padding-left: 80px !important;
        transition: padding-left .2s ease;
    }
}

/* Ícone PRO na AppBar mobile (amber, clicável → /assinatura).
   O badge de TEXTO "PRO" no drawer fica só no desktop (regra dentro de
   @media min-width:960px) e é ocultado no mobile (@media max-width:959px). */
.topbar-pro-star {
    font-size: 1.35rem;
    color: #f59e0b !important;
    flex-shrink: 0;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(245,158,11,.45));
    transition: transform .15s;
}

.topbar-pro-star:hover {
    transform: scale(1.12);
}

.app-sidebar-support-trigger {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.app-sidebar-support-trigger .app-nav-link-inner {
    min-width: 0;
}

.app-sidebar-support-trigger-open {
    background: rgba(255,255,255,0.08);
}

.app-sidebar-support-chevron {
    font-size: 1.15rem;
    color: #8fa3bc;
    flex-shrink: 0;
}

.app-sidebar-support-submenu {
    margin: 2px 0 8px 0;
    padding-left: 14px;
}

.app-sidebar-support-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f8fafc;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.app-sidebar-support-link:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.app-sidebar-support-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    flex-shrink: 0;
}

.app-sidebar-support-link-icon {
    font-size: 1.2rem;
}

.app-sidebar-support-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.app-sidebar-support-title {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    color: #f8fafc;
}

.app-sidebar-support-subtitle {
    font-size: .76rem;
    line-height: 1.2;
    color: #9fb0c5;
    word-break: break-word;
}

@media (max-width: 959px) {
    html,
    body,
    #app {
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-topbar {
        position: relative;
        z-index: 1700;
        background: #0e2a47 !important;
    }

    /* Folga p/ a tab bar mobile (< 768px) fica em bottom-tabbar.css */

    /* O drawer precisa ficar acima do MudOverlay de dialogs/calendários quando aberto.
       pointer-events NÃO vai no container — quando o drawer fecha (translateX off-screen)
       ele continua no DOM em z-index 1702 e capturaria toques na página. */
    .app-sidebar.mud-drawer {
        z-index: 1702 !important;
        pointer-events: none;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Conteúdo do drawer sempre clicável (só é visível quando o drawer está aberto) */
    .app-sidebar .mud-drawer-content {
        pointer-events: auto;
        overflow-x: hidden;
    }

    .app-sidebar-support-submenu {
        padding-left: 12px;
        padding-right: 4px;
    }

    .app-sidebar-support-link {
        padding: 12px 12px;
        border-radius: 10px;
    }

    .app-sidebar-support-title {
        font-size: .88rem;
    }

    .app-sidebar-support-subtitle {
        font-size: .74rem;
    }

    .app-sidebar-profile {
        display: none;
    }

    /* Badge "PRO" texto no drawer header: apenas desktop o usa */
    .sidebar-pro-badge {
        display: none;
    }

    /* Sidebar: garantir scroll quando itens ultrapassam o viewport */
    .app-sidebar .mud-drawer-content {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Suporte: fixed no mobile (sem isso flui com o conteúdo da página) */
    .suporte-fab-wrapper {
        position: fixed;
        z-index: 1805;
        bottom: 20px;
        right: 16px;
        pointer-events: auto;
    }

    .suporte-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        animation: suporteSlideUp .2s ease;
        box-shadow: 0 -4px 24px rgba(0,0,0,.12);
        pointer-events: auto;
    }

    .suporte-popup::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
        margin: 10px auto 4px;
    }

    @keyframes suporteSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .suporte-option {
        padding: 18px 20px;
    }

    .suporte-option-icon {
        font-size: 1.6rem;
    }

    .suporte-option-title {
        font-size: .95rem;
    }

    .suporte-option-sub {
        font-size: .8rem;
    }
}

/* Navegação mobile v2 (tab bar + sheets): estilos em css/bottom-tabbar.css */

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

.mud-elevation-2 {
    box-shadow: 0 2px 6px rgba(14,42,71,.05), 0 12px 28px -18px rgba(14,42,71,.25) !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: #eef0f3;  /* 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;
    }

    .mud-overlay {
        z-index: 1600 !important;
    }

    .mud-dialog-container,
    .mud-popover {
        z-index: 1601 !important;
    }


    /* Snackbar acima do drawer (1702): senão o toast de feedback fica escondido
       atrás do menu lateral quando aberto no mobile. */
    .mud-snackbar {
        z-index: 2200 !important;
    }

    /* Elimina o delay de 300ms em toque nos elementos interativos.
       Sem isso, Chrome/Android adiciona pausa antes de disparar o click,
       fazendo com que MudBlazor feche o menu antes do item receber o evento. */
    button,
    a,
    [role="button"],
    .mud-button,
    .mud-icon-button,
    .mud-list-item,
    .mud-menu-item,
    .mud-nav-link,
    .mud-ripple,
    .mud-fab {
        touch-action: manipulation;
    }

    .mud-picker-popover-paper,
    .mud-dialog.mud-picker-dialog {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        /* A grade do MudBlazor mede 310px. Em telas de 360px, 92vw + padding
           deixava a coluna de sábado fora do papel. Mantém só 4px por lado. */
        width: min(calc(100vw - 8px), 380px) !important;
        max-width: calc(100vw - 8px) !important;
        /* Trava a altura na viewport e rola por dentro — sem isso o WebView cortava
           os últimos dias do mês (grade estourava para fora do diálogo). */
        max-height: 92vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    /* Transacoes.razor estiliza a grade com 12px laterais. No datepicker mobile
       isso soma 24px aos 310px fixos do calendário e recorta o sábado. */
    .mud-picker-popover-paper .mud-picker-calendar,
    .mud-dialog.mud-picker-dialog .mud-picker-calendar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Cabeçalho do datepicker (Dialog) enxuto no mobile: a data padrão é 2.125rem
       (classe .mud-button-date do MudBlazor 9.6) e, somada à grade, estourava a
       altura. Reduz a fonte e o espaçamento para o mês inteiro caber. */
    .mud-picker-datepicker-toolbar {
        padding: 8px 16px !important;
    }
    .mud-picker-datepicker-toolbar .mud-button-date {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
    }

    /* Dialog full-width no mobile: previne conteúdo cortado lateralmente */
    .mud-dialog-container {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    /* O MudDialog renderiza o scrim (.mud-overlay) DENTRO do .mud-dialog-container,
       como irmão do .mud-dialog. O container (z-index:1601) cria um contexto de
       empilhamento e, dentro dele, o scrim forçado a z-index:1600 ficava ACIMA do
       .mud-dialog (z-index auto) — pintando a camada escura por cima do conteúdo
       (modal "esmaecido"). position+z-index garante o diálogo acima do próprio scrim.
       Fica abaixo de .mud-popover-open (1800) para dropdowns ainda aparecerem por cima. */
    .mud-dialog {
        position: relative !important;
        z-index: 1602 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 92vh !important;
    }
    .mud-dialog-content,
    .mud-dialog-scrollable {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Dropdown (autocomplete/select) não escapa da viewport */
    .mud-popover-overflow-y-auto,
    .mud-list {
        max-height: 220px !important;
        overflow-y: auto !important;
    }
    .mud-popover {
        max-width: calc(100vw - 16px) !important;
    }
}

/* ── Correção: overlay de "pagar fatura" cortado dentro do MudDialog ──────────
   FaturasDialog/FaturasMesDialog abrem o formulário de pagamento como um
   <MudOverlay> (position:fixed) renderizado DENTRO do próprio diálogo.
   O keyframe `mud-open-dialog-center` termina em transform:scale(1) e o
   .mud-dialog usa `animation ... both`, então esse transform fica RETIDO após a
   abertura. Um transform != none transforma o .mud-dialog em containing block dos
   descendentes position:fixed — o overlay então ancorava no diálogo (que tem
   overflow-y:auto + max-height) em vez da viewport, e o paper de 90vh
   estourava/era cortado (topo e rodapé sumindo). Zerar a animação SÓ quando há um
   overlay interno remove o containing block; o overlay volta a centrar na viewport
   e rola por dentro dos 90vh. Vale em todas as larguras (o bug aparece no desktop).
   Verificado em harness com MudBlazor.min.css 9.5.0: transform matrix(1,0,0,1,0,0)→none.
   Requer :has() (Chromium 105+, WebView2/Android WebView atuais — ok). */
.mud-dialog:has(.mud-overlay) {
    animation: none !important;
}

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

.transacoes-topo {
    margin-left: auto;
    margin-right: auto;
}

.transacoes-filtros,
.transacoes-list-card {
    margin-left: auto;
    margin-right: auto;
    background: #fff !important;
    width: 100%;
}

.transacoes-filtros {
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 14px 36px -28px rgba(14, 42, 71, .45) !important;
}

.transacoes-list-card {
    border: 1px solid rgba(226, 232, 240, .95);
}

.transacoes-dia-cabecalho {
    color: #64748b;
    font-weight: 800 !important;
    letter-spacing: .08em;
}

.transacao-card-row {
    min-height: 72px;
}

.transacao-card-row:hover {
    background: #f8fafc !important;
}

.transacao-selo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transacoes-mes-chip,
.transacoes-mes-chip .mud-chip-content {
    overflow: visible !important;
    white-space: nowrap !important;
}

.transacoes-acao {
    border-radius: 8px !important;
    font-weight: 800 !important;
}

.transacoes-acao-principal {
    box-shadow: 0 10px 20px -14px rgba(30, 77, 140, .7) !important;
}

@media (min-width: 960px) {
    .transacoes-sticky {
        top: 0;
        padding-top: 0;
    }

    .transacoes-topo,
    .transacoes-filtros,
    .transacoes-list-card {
        max-width: none;
    }

    .transacoes-list-card {
        border-radius: 20px !important;
    }
}

/* MudBlazor, ao abrir select/popover, "trava o scroll" e adiciona padding-right inline
   no <body> (e às vezes overflow no <html>) para compensar a largura da scrollbar do desktop.
   No mobile/WebView não há scrollbar visível, então esse padding empurra o modal para a direita.
   Como o padding é inline, a regra com !important do stylesheet ganha dele. Aplicamos
   incondicionalmente no mobile (não dependemos do nome da classe de lock do MudBlazor) e
   cortamos qualquer overflow horizontal residual do popover. */
/* Correção global: popovers (selects/menus) devem ficar acima de TUDO (incluindo MudDialog).
   No desktop, o MudDialog fica na frente do popover se não forçarmos z-index alto. 
   Também habilita o clique no mobile (pointer-events) para evitar que o WebView ignore toques. */
.mud-popover.mud-popover-open {
    z-index: 1800 !important;
    pointer-events: auto !important;
}

.mud-popover:not(.mud-popover-open) {
    pointer-events: none !important;
}

.mud-popover-open .mud-paper,
.mud-popover-open .mud-list,
.mud-popover-open .mud-list-item,
.mud-popover-open .mud-menu-item {
    pointer-events: auto !important;
}





/* 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; }

/* --- Redesign Transações --- */

.transacao-densa {
    transition: background 0.15s;
}

.transacao-densa:hover {
    background: #f8fafc !important;
}


#blazor-error-ui {
    background: #fef2f2;
    border-top: 2px solid #dc2b2b;
    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;
}

/* Força os popovers do MudBlazor (dropdowns de selects) a ficarem acima de overlays como o de Orçamento que tem z-index 1800 */
.mud-popover-provider,
.mud-popover-provider .mud-popover {
    z-index: 2000 !important;
}

/* Conteúdo rolável de diálogos. Substitui o ContentStyle inline (obsoleto na v9.5) por
   ContentClass. O padding:0 precisa de !important para sobrepor o padding padrão do
   .mud-dialog-content, como fazia o estilo inline original. */
.ed-dialog-scroll {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
}

.ed-dialog-scroll-72 {
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
}