/* Adicionado para garantir que a cor de fundo dinâmica seja aplicada à sidebar */
@media (max-width: 1023.98px) { /* Abaixo do breakpoint lg (desktop) */
    .sidebar-principal {
        display: none !important;
    }
    :root { /* Define --sidebar-width como 0 em mobile/tablet */
        --sidebar-width: 0px !important;
    }
    body.logged-in .page-content-pusher {
        left: 0 !important;
        width: 100% !important;
        position: relative !important; /* Retorna ao fluxo normal */
    }
}

.sidebar-principal {
    position: fixed !important; /* Garante que a sidebar fique fixa */
}

/* base.css */

/* -------------------------
    Definições Globais e Variáveis de Fallback
------------------------- */
:root {
    --cor-fundo-principal-fallback: #f0f2f5;
    --cor-texto-principal-fallback: #1f2937;
    --cor-sidebar-fundo-fallback: #4B0082;
    --cor-sidebar-texto-fallback: #FFFFFF;
    --cor-sidebar-hover-fallback: rgba(255, 255, 255, 0.1);
    --cor-borda-sidebar-fallback: rgba(255, 255, 255, 0.1);
    --cor-botao-fallback: #4B0082; /* Alterado para cor do sidebar */
    --cor-botao-hover-fallback: #6A0DAD; /* Cor primária como hover */
    --cor-botao-texto-fallback: #FFFFFF;
    --cor-botao-border-fallback: transparent;
    --cor-valor-entrada-fallback: #16A34A;
    --cor-valor-saida-fallback: #DC2626;
    --cor-icone-inativo-fallback: #000000; /* Preto para ícones/texto inativos */
    --cor-texto-botao-pwa-fallback: #ffffff;
    --cor-borda-input-fallback: #D1D5DB;
    --cor-fundo-input-fallback: #FFFFFF;
    --cor-texto-input-fallback: #1F2937;
}

/* Responsividade geral */
html {
    overflow-y: scroll;
    height: 100%;
    scroll-behavior: smooth;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body {
    min-height: 100%;
    height: 100%; /* Garante que o body ocupe 100% da altura */
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif;

    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modo claro/escuro (as variáveis -app do base.html têm prioridade) */
body.light {
    --cor-primaria: var(--cor-sidebar-bg-app); /* Alterado */
    --cor-primaria-hover: var(--cor-primaria-app); /* Alterado */
    --cor-icone-inativo: var(--cor-icone-inativo-fallback);
    --cor-texto-botao-pwa: var(--cor-botao-texto);
    --cor-sidebar-fundo: var(--cor-sidebar-fundo-fallback);
    --cor-sidebar-texto: var(--cor-sidebar-texto-fallback);
}

body.dark {
    --cor-primaria: var(--cor-sidebar-bg-app); /* Alterado */
    --cor-primaria-hover: var(--cor-primaria-app); /* Alterado */
    --cor-icone-inativo: #ffffff; /* Alterado para Branco para legibilidade */
    --cor-texto-botao-pwa: var(--cor-botao-texto);
    --cor-sidebar-fundo: #3a0f5b;
    --cor-sidebar-texto: #f0f0f0;
}

/* Layout Principal */
.page-content-pusher {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* Anima a posição e a largura */
}

body.logged-in .page-content-pusher {
    position: relative;
    top: 0;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}
/* A regra de padding-left foi removida para evitar conflito com o Alpine.js */

#main-and-footer-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 7rem; /* Ajustado para dar espaço à navbar inferior menor */
}

@media (min-width: 640px) {
    #main-and-footer-wrapper {
        padding-bottom: 0;
    }
}

main.main-content {
    flex-grow: 1;
}

@media (min-width: 640px) {
    main.main-content {
        /* Padding superior removido para respeitar barra desktop */
    }
}

/* Ícones Gerais e do Sidebar */
/* Estilos para a sidebar recolhida */
html.sidebar-is-collapsed .sidebar-principal a {
    justify-content: center; /* Centraliza o ícone */
}

.nav-icon-material,
.sidebar-logo-icon-material,
.futuristic-icon {
    text-align: center;
    line-height: 1;
    color: var(--cor-sidebar-texto-app) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.sidebar-logo-icon-material.text-5xl {
    font-size: 3rem !important;
}

.custom-sidebar img.neon-logo {
    opacity: 1 !important;
    filter: none !important;
}

.custom-sidebar .neon-text {
    color: var(--cor-sidebar-texto-app) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Estilos para .sidebar (se diferente do .custom-sidebar) */
.sidebar {
    background-color: var(--cor-sidebar-fundo);
    color: var(--cor-sidebar-texto);
    border-right: 1px solid var(--cor-borda-sidebar, var(--cor-borda-sidebar-fallback));
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar a {
    color: inherit;
    padding: 10px 16px;
    display: block;
    transition: background 0.2s;
}

.sidebar a:hover {
    background-color: var(--cor-sidebar-hover, var(--cor-sidebar-hover-fallback));
    color: var(--cor-texto-principal);
}

/* REGRAS PARA .custom-sidebar (Desktop) */
@media (min-width: 640px) {
    .custom-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        background-color: var(--cor-sidebar-bg-app) !important;
        color: var(--cor-sidebar-texto-app) !important;
        transition: transform 0.3s ease-in-out !important;
        /* width: 12rem; /* Removido para permitir controle via Tailwind */
        z-index: 30 !important; /* Z-index para desktop */
    }
}

#menu-mobile-desktop.custom-sidebar.sidebar-principal {
    z-index: 30 !important;
}

/* Seletor para o menu deslizante mobile com o ajuste de padding */
div#menu-mobile-slideout.custom-sidebar.sm\:hidden {
    z-index: 1000 !important;
    padding-bottom: 1rem !important;
    /* 4rem (altura do bottom-nav) + 1rem de folga */
}

.custom-sidebar > div:first-child {
    flex-shrink: 0 !important;
}

.custom-sidebar > nav {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

.custom-sidebar > div:last-child {
    /* Div do botão "Sair" */
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

.mobile-sidebar > div:last-child {
    /* Div do botão "Sair" na sidebar mobile */
    flex-shrink: 0 !important;
    margin-top: auto !important;
}



.custom-sidebar a {
    color: var(--cor-sidebar-texto-app) !important;
    opacity: 1 !important;
}

.custom-sidebar nav a:hover {
    background-color: var(--cor-primaria-app) !important; /* Efeito de hover usa a cor primária */
    color: var(--cor-sidebar-texto-app) !important;
}

.custom-sidebar nav a:hover .bi,
.custom-sidebar nav a:hover .futuristic-icon {
    color: var(--cor-sidebar-texto-app) !important;
}

/* Estilos para texto e ícones da sidebar mobile */
.mobile-sidebar a,
.mobile-sidebar .bi,
.mobile-sidebar .futuristic-icon {
    color: var(--cor-sidebar-texto-app);
}

.mobile-sidebar nav a:hover {
    background-color: var(--cor-primaria-app); /* Efeito de hover usa a cor primária */
    color: var(--cor-sidebar-texto-app);
}

.mobile-sidebar nav a:hover .material-icons,
.mobile-sidebar nav a:hover .futuristic-icon {
    color: var(--cor-sidebar-texto-app);
}



.sidebar-logout-button {
    display: flex;
    flex-direction: row; /* Alinha ícone e texto lado a lado */
    align-items: center; /* Centraliza verticalmente */
    justify-content: flex-start; /* Alinha ao início */
    color: var(--cor-icone-inativo, var(--cor-icone-inativo-fallback)); /* Cor padrão */
    transition: color 0.2s ease; /* Transição suave */
    text-decoration: none; /* Remover sublinhado */
    text-align: left; /* Alinha o texto à esquerda */
    padding: 0; /* Remover padding */
    border-radius: 0; /* Remover border-radius */
    background-color: transparent; /* Remover background */
    border: none; /* Remover borda */
    box-shadow: none; /* Remover sombra */
    -webkit-tap-highlight-color: transparent; /* Remover destaque ao toque no iOS */
}

.sidebar-logout-button:hover {
    color: var(--cor-sidebar-texto-app); /* Cor no hover é o branco do texto */
    background-color: transparent; /* Garantir background transparente no hover */
}

.sidebar-logout-button:focus,
.sidebar-logout-button:active {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--cor-primaria-app); /* Garante que a cor seja a primária no focus/active */
    text-decoration: none; /* Garantir que não haja sublinhado */
    -webkit-tap-highlight-color: transparent; /* Reforçar */
}

/* Specific styles for children (icons and text) */
.sidebar-logout-button .material-icons {
    margin-right: 0.5rem;
    font-size: 1.5rem;
    color: inherit;
    transition: transform 0.3s ease-in-out;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.sidebar-logout-button span {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: inherit;
    transition: transform 0.3s ease-in-out;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.sidebar-logout-button:hover .material-icons,
.sidebar-logout-button:hover span {
    
}

.sidebar-logout-button:hover .bi,
.sidebar-logout-button:hover span {
    color: var(--cor-sidebar-texto-app); /* Cor no hover é o branco do texto */
}

.sidebar-logout-button:focus .bi,
.sidebar-logout-button:focus span,
.sidebar-logout-button:active .bi,
.sidebar-logout-button:active span {
    color: var(--cor-primaria-app); /* Cor no foco é a primária */
}



/* --- ESTILOS DE BOTÃO TEMÁTICOS E ESPECÍFICOS --- */
.button-base,
.btn-action-card {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-action-card:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--cor-primaria-app-transparente) !important; /* Foco usa a cor primária */
}



.button-reparcelar-outlined {
    background-color: transparent !important;
    border: 1px solid var(--cor-sidebar-bg-app) !important; /* Cor da borda é a do sidebar */
    color: var(--cor-sidebar-bg-app) !important; /* Cor do texto é a do sidebar */
    border-radius: 0.375rem;
}

.button-reparcelar-outlined:hover {
    background-color: var(--cor-primaria-app) !important; /* Hover usa a cor primária */
    color: var(--cor-botao-texto, var(--cor-botao-texto-fallback)) !important;
    border-color: var(--cor-primaria-app) !important; /* Borda no hover usa a cor primária */
}

.button-sm-action {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-width: 1px !important;
    border-style: solid !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
}

.btn-delete {
    background-color: var(--cor-valor-saida-fallback) !important;
    color: var(--cor-botao-texto-fallback) !important;
    border-color: var(--cor-valor-saida-fallback) !important;
}

.btn-delete:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--cor-primaria-app-transparente) !important; /* Foco usa a cor primária */
}

.btn-delete:hover {
    background-color: var(--cor-valor-saida-hover, #B91C1C) !important;
    border-color: var(--cor-valor-saida-hover, #B91C1C) !important;
}

#btnInstallPWA {
    background-color: var(--cor-sidebar-bg-app, var(--cor-botao-fallback)) !important; /* Cor base é a do sidebar */
    color: var(--cor-texto-botao-pwa, var(--cor-texto-botao-pwa-fallback)) !important;
    position: fixed;
    bottom: calc(4rem + 1rem + env(safe-area-inset-bottom, 0.5rem));
    right: 1rem;
    z-index: 1000;
    border: none;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

#btnInstallPWA:hover {
    background-color: var(--cor-primaria-app, var(--cor-botao-hover-fallback)) !important; /* Hover usa a cor primária */
    transform: scale(1.05);
}

#btnInstallPWA .bi {
    color: var(--cor-texto-botao-pwa, var(--cor-texto-botao-pwa-fallback)) !important;
}

.fab-theme {
    background-color: var(--cor-sidebar-bg-app, var(--cor-botao-fallback)) !important; /* Cor base é a do sidebar */
    color: var(--cor-botao-texto, var(--cor-botao-texto-fallback)) !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.fab-theme:hover {
    background-color: var(--cor-primaria-app, var(--cor-botao-hover-fallback)) !important; /* Hover usa a cor primária */
}

/* Inputs Gerais Temáticos */
.input-geral-tema {
    border-width: 1px;
    border-color: var(--cor-sidebar-bg-app) !important; /* Borda normal usa a cor do sidebar */
    background-color: var(--cor-fundo-input-fallback);
    color: var(--cor-texto-input-fallback);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
}

.input-geral-tema:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    border-color: var(--cor-primaria-app) !important; /* Borda no foco usa a cor primária */
    box-shadow: 0 0 0 3px var(--cor-primaria-app-transparente) !important; /* Ring no foco usa a cor primária */
}

/* Estilos para Select2 para seguir a temática input-geral-tema (CONSOLIDADO) */
.select2-container--default .select2-selection--single {
    border-width: 1px !important;
    border-color: #D1D5DB !important;
    background-color: #FFFFFF !important;
    color: #1F2937 !important;
    height: 44px !important; /* Altura fixa para consistência */
    padding: 0 !important; /* Padding será controlado pelo elemento interno */
    border-radius: 0.375rem !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex !important; /* Habilita flexbox para alinhamento */
    align-items: center !important; /* Alinha o conteúdo verticalmente */
}

/* Modo Escuro */
html.dark .select2-container--default .select2-selection--single {
    background-color: #0b0f1a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Conteúdo Renderizado (Texto selecionado) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1F2937 !important;
    padding: 0 1rem !important; /* Espaçamento horizontal */
    line-height: normal !important; /* Reseta o line-height para permitir que o flexbox funcione */
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0 !important;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6b7280 !important;
}

/* Seta */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    top: 1px !important;
    right: 0.5rem !important;
}

/* Foco */
.select2-container--default.select2-container--focus .select2-selection--single {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    border-color: var(--cor-primaria-app) !important;
    box-shadow: 0 0 0 3px var(--cor-primaria-app-transparente) !important;
}

/* Dropdown */
.select2-container--default .select2-dropdown {
    border-color: var(--cor-primaria-app) !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem !important;
    overflow: hidden;
}
html.dark .select2-container--default .select2-dropdown {
    background-color: #161b26 !important;
    border-color: #334155 !important;
}

/* Opções no Dropdown */
.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    color: #1F2937 !important;
}
html.dark .select2-container--default .select2-results__option {
    color: #e2e8f0 !important;
}

/* Opção Destacada */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--cor-destaque) !important;
    color: #ffffff !important;
}

/* Opção Selecionada (na lista) */
.select2-container--default .select2-results__option--selected {
    background-color: var(--cor-primaria-app-transparente) !important;
}

/* Campo de busca no dropdown */
.select2-search--dropdown .select2-search__field {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    color: #1f2937;
}
html.dark .select2-search--dropdown .select2-search__field {
    background-color: #0b0f1a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Utilitários de Layout do Ícone (ESSENCIAL) */
.select2-option-container { display: flex; align-items: center; gap: 10px; }
.img-flag { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.select2-option-container .material-icons { flex-shrink: 0; }
.text-and-balance-container { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.account-details { font-size: 0.75rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balance { font-size: 0.7rem; font-weight: bold; color: #10b981; }

.input-geral-tema.border-gray-300 {

.input-geral-tema.focus\:ring-purple-500,
.input-geral-tema.focus\:border-purple-500 {
    border-color: var(--cor-primaria-app) !important; /* Força a borda no foco primária */
    box-shadow: 0 0 0 3px var(--cor-primaria-app-transparente) !important; /* Força o ring no foco primário */
}


/* Links Temáticos Primários */
.link-tema-primario {
    color: var(--cor-sidebar-bg-app) !important; /* Cor base é a do sidebar */
    text-decoration: none;
}

.link-tema-primario:hover {
    color: var(--cor-primaria-app) !important; /* Hover usa a cor primária */
    text-decoration: underline;
}

/* Checkbox Dinâmico */
.checkbox-dinamico {
    color: var(--cor-sidebar-bg-app) !important; /* Cor base é a do sidebar */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.checkbox-dinamico:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--cor-primaria-app-transparente) !important; /* Foco usa a cor primária */
    border-color: var(--cor-primaria-app) !important; /* Borda no foco usa a cor primária */
}

.text-theme-primary-value {
    color: var(--cor-sidebar-bg-app) !important; /* Cor base é a do sidebar */
}

/* Bottom Nav */
/* Bottom Nav */
.bottom-nav .nav-item .icon-filled {
    color: var(--cor-sidebar-bg-app) !important; /* Cor do ícone ativo é a do sidebar */
    opacity: 0;
}

.bottom-nav .nav-item .icon-outlined {
    color: var(--cor-icone-inativo, var(--cor-icone-inativo-fallback)) !important;
    opacity: 1;
}

.bottom-nav .nav-item small {
    color: var(--cor-icone-inativo, var(--cor-icone-inativo-fallback)) !important;
}

.bottom-nav .nav-item.active-nav-item .icon-filled,
.bottom-nav .nav-item.active-nav-item .bi {
    opacity: 1;
    color: var(--cor-sidebar-bg-app) !important; /* Cor do ícone ativo é a do sidebar */
}

.bottom-nav .nav-item.active-nav-item .icon-outlined {
    opacity: 0;
}

.bottom-nav .nav-item.active-nav-item small {
    color: var(--cor-sidebar-bg-app) !important; /* Cor do texto ativo é a do sidebar */
    font-weight: 600;
}

.bottom-nav .nav-item:not(.active-nav-item):hover .icon-outlined,
.bottom-nav .nav-item:not(.active-nav-item):hover small,
.bottom-nav .nav-item:not(.active-nav-item):hover .bi {
    color: var(--cor-primaria-app) !important; /* Hover em item inativo usa a cor primária */
}

.bottom-nav .nav-item.active-nav-item:hover .icon-filled,
.bottom-nav .nav-item.active-nav-item:hover small,
.bottom-nav .nav-item.active-nav-item:hover .bi {
    color: var(--cor-primaria-app); /* Hover em item ativo usa a cor primária */
}

/* NOVO: Força a cor do sidebar no momento do clique para eliminar o "piscar" */
.bottom-nav .nav-item:active .bi,
.bottom-nav .nav-item:active small {
    color: var(--cor-sidebar-bg-app) !important;
}

/* ... (restante do arquivo sem alterações relevantes para esta tarefa) ... */
.bottom-nav .nav-item .icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    height: 32px; /* Aumentado para acomodar ícones maiores */
    width: 32px; /* Aumentado para acomodar ícones maiores */
}

.bottom-nav .nav-item .bi {
    font-size: 32px; /* Tamanho maior para os ícones */
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.1s ease-in-out, color 0.1s ease-in-out;
}

.bottom-nav .nav-item small {
    font-size: 0.6rem;
    line-height: 1;
    transition: color 0.1s ease-in-out;
}

.bottom-nav .nav-item {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.bottom-nav .nav-item:active,
.bottom-nav .nav-item:focus,
.mobile-sidebar a:focus,
.mobile-sidebar a:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Flash messages */
.flash-messages-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: max-content; /* Ajusta a largura ao conteúdo */
    max-width: 90%; /* Garante que não seja muito largo em telas pequenas */
    right: auto; /* Remove o posicionamento à direita */
}
/* A media query para min-width: 640px não é mais necessária para posicionamento,
   pois o centramento é universal. Se houver outras propriedades específicas
   para essa media query, elas devem ser tratadas separadamente.
   Por enquanto, removemos o bloco inteiro para evitar conflitos. */

.flash-messages-container .alert-flash {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(100%);
    animation: slideInFadeIn 0.5s forwards;
}

.flash-messages-container .alert-flash:last-child {
    margin-bottom: 0;
}

@keyframes slideInFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.flash-messages-container .alert-flash .bi {
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

.flash-messages-container .alert-flash button.close-flash {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.flash-messages-container .alert-flash button.close-flash:hover {
    opacity: 1;
}

.alert-flash.bg-green-50 {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-flash.bg-red-50 {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-flash.bg-yellow-50 {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-flash.bg-blue-50 {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Header mobile */
.header-mobile {
    background-color: var(--cor-sidebar-bg-app) !important; /* Header usa a cor do sidebar */
}

/* Botões do menu (toggle e close) */
.botao-controle-menu {
    background-color: transparent;
    color: var(--cor-sidebar-texto-app) !important;
}

#menu-toggle.botao-controle-menu:hover {
    background-color: rgba(var(--cor-sidebar-texto-app-rgb, 255, 255, 255), 0.2) !important; /* Destaque sutil no hover */
}

#menu-close.botao-controle-menu:hover {
    background-color: var(--cor-primaria-app) !important; /* Hover usa a cor primária */
}

.botao-controle-menu:focus-visible {
    outline: 2px solid var(--cor-primaria-app) !important; /* Foco usa a cor primária */
    outline-offset: 2px;
}

/* Media Query para telas menores (mobile) */
@media (max-width: 639px) {
    .card-saldo-integrado,
    .card-form,
    .card-transacoes {
        /* Removido padding-left e padding-right aqui, pois o container já terá */
    }

    .card-saldo-integrado {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .card-form,
    .card-transacoes {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}
@media (max-width: 375px) {
    .bottom-nav .nav-item small {
        font-size: 0.5rem;
    }

    #btnInstallPWA {
        width: 3rem;
        height: 3rem;
        bottom: calc(4rem + 0.5rem + env(safe-area-inset-bottom, 0.25rem));
        right: 0.5rem;
    }

    #btnInstallPWA .bi {
        font-size: 1.3rem;
    }

    .flash-messages-container {
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
        width: calc(100% - 1rem);
    }
}

/* CSS para a Logo Animada (seja a da moldura com moeda ou a de setas ascendentes) */
.logo-animada-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Para texto dentro do SVG da logo "moldura com moeda" */
.logo-animada-container text {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: bold;
    fill: var(--cor-sidebar-texto-app, white);
    dominant-baseline: middle;
    text-anchor: middle;
}

/* Para a animação das "setas ascendentes" (remover se não for usar) */
.grupo-linhas-ascendentes .linha-ascendente {
    stroke: var(--cor-sidebar-texto-app, #FFFFFF);
    stroke-width: 2.5;
    stroke-linecap: round;
    animation-name: animarLinhaAscendente;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-fill-mode: forwards;
    opacity: 0;
}

.grupo-linhas-ascendentes #arrowhead-fluxo path,
.grupo-linhas-ascendentes #arrowhead-fluxo-mobile path {
    fill: var(--cor-sidebar-texto-app, #FFFFFF);
}

.grupo-linhas-ascendentes .linha-f1 {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation-delay: 0.2s;
}

.grupo-linhas-ascendentes .linha-f2 {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation-delay: 0s;
}

.grupo-linhas-ascendentes .linha-f3 {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation-delay: 0.4s;
}

@keyframes animarLinhaAscendente {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    30% {
        opacity: 0.8;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-mobile-visivel {
    transform: translateX(0%) !important;
}

.input-field {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--cor-sidebar-bg-app) !important; /* Borda usa a cor do sidebar */
}

.mobile-sidebar a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    touch-action: manipulation;
}

.mobile-sidebar a:focus,
.mobile-sidebar a:active {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: none;
    color: var(--cor-primaria-app); /* Foco/ativo usa a cor primária */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.menu-mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--cor-icone-inativo, var(--cor-icone-inativo-fallback));
    transition: color 0.2s ease;
    padding: 8px 4px;
    margin: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-appearance: none;
    appearance: none;
}

.menu-mobile-item i {
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 28px;
    color: var(--cor-secundaria-app);
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.menu-mobile-item span {
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 500;
    color: inherit;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.menu-mobile-item:hover i,
.menu-mobile-item:hover span {
    color: var(--cor-primaria-app); /* Hover usa a cor primária */
}

.menu-mobile-item:focus i,
.menu-mobile-item:focus span,
.menu-mobile-item:active i,
.menu-mobile-item:active span {
    color: var(--cor-primaria-app); /* Foco/ativo usa a cor primária */
    background-color: transparent;
    outline: none;
    box-shadow: none;
    border: none;
}

.menu-mobile-item:focus,
.menu-mobile-item:active {
    background-color: transparent;
    outline: none;
    box-shadow: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
}

.menu-mobile-item:focus,
.menu-mobile-item:active,
.nav-item button:focus,
.nav-item button:active,
.nav-item a:focus,
.nav-item a:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.menu-mobile-close-btn {
    background-color: transparent;
    border: none;
    color: var(--cor-sidebar-texto-app);
    font-size: 1.5rem;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.menu-mobile-close-btn:hover {
    color: var(--cor-primaria-app); /* Hover usa a cor primária */
}

.menu-mobile-close-btn:focus,
.menu-mobile-close-btn:active {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--cor-primaria-app); /* Foco/ativo usa a cor primária */
    -webkit-tap-highlight-color: transparent;
}

.sidebar-logout-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--cor-sidebar-texto-app);
    transition: transform 0.2s ease, color 0.2s ease;
    text-decoration: none;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-appearance: none;
    appearance: none;
}

.sidebar-logout-button:hover {
    color: var(--cor-primaria-app); /* Hover usa a cor primária */
    background-color: transparent;
    transform: scale(1.05);
}

.sidebar-logout-button:focus,
.sidebar-logout-button:active {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: none;
    color: var(--cor-primaria-app); /* Foco/ativo usa a cor primária */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-logout-button .bi {
    margin-bottom: 0;
    font-size: 1.25rem;
    color: var(--cor-sidebar-texto-app);
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.sidebar-logout-button span {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: inherit;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.sidebar-logout-button:hover .bi,
.sidebar-logout-button:hover span {
    color: var(--cor-primaria-app); /* Hover usa a cor primária */
}

.sidebar-logout-button:focus .bi,
.sidebar-logout-button:focus span,
.sidebar-logout-button:active .bi,
.sidebar-logout-button:active span {
    color: var(--cor-primaria-app); /* Foco/ativo usa a cor primária */
}

@media (max-width: 767px) {
    .chart-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

.chart-container {
    transition: box-shadow 0.3s ease-in-out;
    border: 2px solid transparent;
    border-radius: 0.5rem;
}
.chart-container.selected {
    box-shadow: 0 0 5px rgba(var(--cor-primaria-app-rgb), 0.9),
                0 0 15px rgba(var(--cor-primaria-app-rgb), 0.7),
                0 0 25px rgba(var(--cor-primaria-app-rgb), 0.5);
}

/* Correção para o posicionamento do "chapéu" da barra de navegação inferior */
#active-nav-item-indicator {
    top: -25px !important;
}

/* Garante que os modais do SweetAlert2 fiquem na frente de outros modais */
.swal2-container {
    z-index: 10000 !important;
}

/* Estilos para o modal do Calendário Roldana */
.date-wheel-picker-modal {
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* No overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Higher z-index to cover native calendar */
}

.date-wheel-picker-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 90%; /* Reverted to max-width */
    max-height: 90%;
    overflow-y: auto;
}

.date-wheel-picker-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.date-wheel-picker .wheel {
    height: 150px; /* Altura da roldana */
    overflow-y: scroll;
    border: 1px solid #ccc;
    margin: 0 5px;
    scroll-snap-type: y mandatory;
    flex: 1;
}

.date-wheel-picker .wheel-item {
    padding: 8px 0;
    text-align: center;
    scroll-snap-align: center;
    cursor: pointer;
}

.date-wheel-picker .wheel-item.selected {
    background-color: var(--cor-primaria-app);
    color: white;
    border-radius: 4px;
}

.date-wheel-picker-modal .button-theme {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.date-wheel-picker-modal .button-theme-secondary {
    background-color: #ccc;
    color: #333;
}

.date-wheel-picker-modal .button-theme-secondary:hover {
    background-color: #bbb;
}

.date-wheel-picker-modal .button-theme:hover {
    opacity: 0.9;
}


/* Adicionado para corrigir o layout da roldana de data */
.date-wheel-picker {
    display: flex;
    justify-content: center;
}