/* 
=== PALETA DE CORES SEMÂNTICAS ===
Definição de variáveis CSS para manter consistência de tema
Estrutura mobile-first: definição de variáveis baseadas em mobile
*/
:root {
    /* Cores principais do sistema */
    --primary: #2563eb;
    /* Azul principal usado em elementos ativos */
    --primary-dark: #1d4ed8;
    /* Versão mais escura para hover */
    --secondary: #8b5cf6;
    /* Rotação de gradiente no logo */
    --success: #10b981;
    /* Verde para ações positivas (sucesso) */
    --warning: #f59e0b;
    /* Amarelo para alertas e avisos */
    --danger: #ef4444;
    /* Vermelho para ações críticas */
    --dark: #1e293b;
    /* Texto principal em modo claro */
    --dark-light: #334155;
    /* Texto secundário em modo claro */
    --light: #f8fafc;
    /* Fundo claro */
    --gray: #e2e8f0;
    /* Bordas e elementos neutros */
    /* Dimensões baseadas em mobile-first */
    --sidebar-width: 280px;
    /* Largura padrão sidebar (mobile > 768px) */
    --header-height: 55px;
    /* Altura do cabeçalho (reduzida para mobile) */
    --mobile-menu-height: 60px;
    /* Altura do menu inferior no mobile */
    /* Transições suaves para melhor experiência de usuário */
    --transition: all 0.3s ease;
    /* Elementos de interface */
    --card-bg: white;
    /* Fundo dos cards */
    --body-bg: #f1f5f9;
    /* Cor de fundo principal */
    --text-color: #1e293b;
    /* Cor do texto principal */
    --border-color: #cbd5e1;
    /* Cor das bordas (mais escura para visibilidade) */
    --sidebar-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    /* Gradiente sidebar */
    --sidebar-item-hover: rgba(255, 255, 255, 0.05);
    /* Efeito hover nos itens do sidebar */
    --sidebar-item-active: rgba(255, 255, 255, 0.08);
    /* Destaque para item ativo */
    --header-bg: white;
    /* Fundo do cabeçalho */
    --header-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    /* Sombra reduzida para mobile */
    --search-bg: #f1f5f9;
    /* Fundo da barra de pesquisa */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* Sombra nos cards */
    --chart-grid: rgba(0, 0, 0, 0.05);
    /* Grade de gráficos */
    /* Cores específicas para o caixa */
    --cash-balance-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
    --cash-balance-icon: #1e40af;
    --cash-summary-bg: #f0f9ff;
    --cash-expenses-bg: #fff7ed;
    --cash-expenses-icon: #b91c1c;
    --cash-expenses-total: #f97316;
    --cash-movements-bg: #f8fafc;
}

 

/* 
=== TEMA ESCURO ===
Implementação de tema escuro para acessibilidade
Preparação para back-end: sistema de preferências de usuário
*/
[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #a78bfa;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --dark: #f1f5f9;
    --dark-light: #cbd5e1;
    --light: #1e293b;
    --gray: #334155;
    --card-bg: #1e293b;
    --body-bg: #0f172a;
    --text-color: #f1f5f9;
    --border-color: #334155;
    --sidebar-bg: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.12);
    --header-bg: #1e293b;
    --header-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --search-bg: #334155;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --chart-grid: rgba(255, 255, 255, 0.08);
    /* Cores específicas para o caixa no tema escuro */
    --cash-balance-bg: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    --cash-balance-icon: #93c5fd;
    --cash-summary-bg: #0c4a6e;
    --cash-expenses-bg: #441300;
    --cash-expenses-icon: #fecaca;
    --cash-expenses-total: #fb923c;
    --cash-movements-bg: #0f172a;
}

/* 
=== ESTILOS BASE ===
Reset básico para consistência cross-browser
Mobile-first: estilos baseados em mobile, com media queries para desktop
*/

/* Estilos para Assinatura */
.subscription-status-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.status-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.status-icon.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-icon.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.status-icon.pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-details h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

.status-details p {
    margin: 5px 0 0;
    color: var(--dark-light);
    font-size: 0.9rem;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--body-bg);
    color: var(--text-color);
    /* overflow-x: hidden; */
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    height: 100vh;
    width: 100%;
}

/* 
=== LAYOUT PRINCIPAL ===
Estrutura mobile-first com sidebar responsivo
Preparação para back-end: classes semânticas para integração futura
*/
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Esconde a barra de rolagem horizontal */
}

/* 
=== SIDEBAR ===
Implementação mobile-first: sidebar colapsável em dispositivos menores
*/
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: white;
    height: 100vh;
    position: fixed;
    overflow-y: auto;
    z-index: 100;
    transition: var(--transition);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.logo-text {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(to right, #60a5fa, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Maiúsculas somente na tela de login */
.login-container .logo .logo-text {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.menu {
    padding: 20px 0;
}

.menu-item {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: var(--transition);
    border-left: 4px solid transparent;
}

/* Espaçamento consistente entre todos os itens do menu */
.menu-item {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: var(--transition);
    border-left: 4px solid transparent;
    margin: 0; /* Remover todas as margens */
}

.menu {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.menu-item {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: var(--transition);
    border-left: 4px solid transparent;
    margin: 0;
    box-sizing: border-box;
    min-height: 52px; /* Garantir altura consistente para todos os itens */
}

/* Garantir que os ícones e textos fiquem alinhados corretamente */
.menu-item i {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
}

.menu-item span {
    font-size: 1.05rem;
    font-weight: 500;
}

/* Espaçamento uniforme entre todos os itens do menu */
.menu > .menu-item {
    margin: 0;
    padding: 14px 24px;
    min-height: 50px; /* Garantir altura mínima consistente */
}

/* Aplicar espaçamento exato entre os itens do menu se necessário */
.menu {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remover qualquer espaçamento extra do container */
}

.menu-item:hover {
    background: var(--sidebar-item-hover);
}

.menu-item.active {
    background: var(--sidebar-item-active);
    border-left: 4px solid var(--primary);
}

/* Garantir consistência no espaçamento de todos os itens do menu */
.menu .menu-item {
    flex: 0 0 auto;
}

/* Correção específica para espaçamento entre os itens do menu */
.menu > .menu-item {
    margin: 0;
}

/* Aplicar espaçamento uniforme entre todos os itens */
.menu .menu-item + .menu-item {
    margin-top: 0;
}

.menu {
    padding: 20px 0;
}

.menu-item {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: var(--transition);
    border-left: 4px solid transparent;
}

.menu-item i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.menu-item span {
    font-size: 1.05rem;
    font-weight: 500;
}

/* 
=== MENU INFERIOR PARA MOBILE ===
Implementação do menu inferior para dispositivos móveis
*/
.mobile-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sidebar-bg);
    justify-content: space-between; /* Distribuição igual entre itens, sem espaço extra nas extremidades */
    align-items: center;
    padding: 10px 15px; /* Adicionar padding para espaçamento nas extremidades */
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    height: var(--mobile-menu-height);
    box-sizing: border-box; /* Garantir cálculo correto do espaço */
    width: 100%; /* Garantir largura total */
    max-width: 100%; /* Prevenir overflow */
}

/* Garantir espaçamento consistente entre todos os itens do menu inferior */
.mobile-menu-item {
    flex: 1; /* Distribuir o espaço igualmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.7rem; /* Padronizar tamanho da fonte */
    padding: 8px 5px; /* Ajustar padding */
    margin: 0 2px; /* Pequena margem entre os itens */
    border-radius: 8px;
    transition: var(--transition);
    min-width: 0; /* Permitir que o item encolha conforme necessário */
    box-sizing: border-box; /* Garantir que padding não afete o cálculo do espaço */
    min-height: 55px; /* Altura consistente para todos os itens */
    position: relative; /* Para possíveis ajustes posicionais */
}

/* Garantir que os ícones e textos tenham alinhamento consistente */
.mobile-menu-item i {
    font-size: 1.2rem;
    margin-bottom: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-item span {
    font-size: 0.7rem; /* Padronizar tamanho da fonte */
    line-height: 1.2; /* Garantir consistência de altura de linha */
    max-width: 100%; /* Garantir que o texto não ultrapasse o item */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Garantir que o primeiro e último item mantenham alinhamento adequado */
.mobile-menu-item:first-child {
    margin-left: 0;
}

.mobile-menu-item:last-child {
    margin-right: 0;
}

/* Garantir espaçamento consistente entre todos os itens do menu inferior */
.mobile-menu-item {
    flex: 1; /* Garantir que todos os itens tenham o mesmo espaço */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.7rem; /* Padronizar tamanho da fonte */
    padding: 8px 2px; /* Reduzir padding horizontal para melhor distribuição */
    margin: 0;
    border-radius: 8px;
    transition: var(--transition);
    min-width: 0; /* Permitir que o item encolha conforme necessário */
    box-sizing: border-box; /* Garantir que padding não afete o cálculo do espaço */
    min-height: 55px; /* Altura consistente para todos os itens */
    position: relative; /* Para possíveis ajustes posicionais */
}

/* Garantir que os ícones e textos tenham alinhamento consistente */
.mobile-menu-item i {
    font-size: 1.2rem;
    margin-bottom: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-item span {
    font-size: 0.7rem; /* Padronizar tamanho da fonte */
    line-height: 1.2; /* Garantir consistência de altura de linha */
    max-width: 100%; /* Garantir que o texto não ultrapasse o item */
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.75rem;
    padding: 5px;
    margin: 0;
    border-radius: 8px;
    transition: var(--transition);
    width: 100%;
    box-sizing: border-box;
}

/* Espaçamento consistente entre itens do menu inferior */
.mobile-menu-item:not(:last-child) {
    margin-right: 0;
}

/* Garantir alinhamento consistente em todos os itens do menu inferior */
.mobile-menu-item {
    min-width: 0; /* Remover qualquer largura mínima que possa afetar o espaçamento */
}

.mobile-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sidebar-bg);
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    height: var(--mobile-menu-height);
}

.mobile-menu-item.active {
    color: white;
    background: var(--sidebar-item-active);
}

.mobile-menu-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.mobile-menu-item span {
    font-size: 0.75rem;
}

/* 
=== CONTEÚDO PRINCIPAL ===
Estrutura flexível para conteúdo responsivo
*/
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding-bottom: calc(var(--mobile-menu-height) + 10px);
}

/* 
=== CABEÇALHO ===
Componente mobile-first com elementos ajustáveis
*/
.header {
    height: var(--header-height);
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* Trocado de sticky para relative para facilitar posicionamento */
    top: 0;
    z-index: 99;
    padding: 0 15px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 99;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    /* Garantir que o elemento fique alinhado à direita */
    margin-left: auto;
    min-width: 35px; /* Garantir espaço mínimo para o botão de tema */
}

.theme-toggle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--search-bg);
    color: var(--text-color);
    flex-shrink: 0; /* Garantir que não encolha em telas pequenas */
}

.theme-toggle:hover {
    background: var(--primary);
    color: white;
}

.header-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    display: none;
    /* Removido em mobile */
}

.search-bar {
    background: var(--search-bg);
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    width: 100%;
}

.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    padding: 6px 10px;
    color: var(--dark);
    font-size: 0.95rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Ajuste para dispositivos móveis para manter o sino centralizado */
@media (max-width: 768px) {
    .header-center {
        justify-content: center;
    }
    
    .header-right {
        min-width: 35px; /* Garantir espaço mínimo para o botão de tema */
    }
}

.notification {
    cursor: pointer;
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--search-bg);
    color: var(--text-color);
    flex-shrink: 0; /* Garantir que não encolha em telas pequenas */
}

.theme-toggle:hover {
    background: var(--primary);
    color: white;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    flex-shrink: 0; /* Garantir que não encolha em telas pequenas */
}

.user-info {
    display: none;
    /* Informações do usuário escondidas no mobile */
}

.logout-btn {
    display: none;
    /* Botão sair escondido no mobile */
}

/* 
=== DASHBOARD ===
Estrutura grid responsiva para estatísticas
Mobile-first: grid com auto-fit para adaptação em mobile
*/
.dashboard {
    padding: 20px 20px 70px 20px;
    /* Reduzido para melhor uso do espaço */
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    /* Alterado de 240px para 160px */
    gap: 20px;
    margin-bottom: 25px;
}

/* Correção para dispositivos móveis: organização específica dos cards */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* Diminuído de 15px para 10px para reduzir espaço no meio */
        margin-bottom: 15px;
        /* Reduzido de 25px para 15px para aproximar do card abaixo */
    }

    /* Garantir que os cards fiquem na ordem correta para mobile */
    .stat-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .stat-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .stat-card:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .stat-card:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Ajustar tamanho dos cards para melhor aproveitamento */
    .stat-card {
        padding: 14px 15px;
        /* Diminuído de 15px 16px para 14px 15px para preencher mais espaço */
    }

    .stat-value {
        font-size: 1.5rem;
    }

    /* Correção para o valor de recolhimentos caber em uma linha */
    .collection-amount {
        font-size: 1.2rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Empilhar cards em telas muito pequenas */
@media (max-width: 360px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        /* Reduzido de 15px para 10px para reduzir espaço no meio */
    }

    .stat-card {
        width: 100%;
    }
}

.stat-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

/* Estilo específico para o card de caixa para evitar efeitos de transformação indesejados */
.stat-card[data-view="caixa"] {
    transform: none !important;
    transition: box-shadow 0.3s ease;
}

.stat-card[data-view="caixa"]:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Estilo específico para o card de renovados para evitar efeitos de transformação indesejados */
.stat-card[data-filter="renewed"] {
    transform: none !important;
    transition: box-shadow 0.3s ease;
}

.stat-card[data-filter="renewed"]:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--success);
    /* Corrigido: Novos Clientes agora usa a cor de sucesso (verde) */
}

.stat-card:nth-child(2)::before {
    background: var(--primary);
    /* Corrigido: Renovados agora usa a cor primária (azul) */
}

.stat-card:nth-child(3)::before {
    background: var(--warning);
}

.stat-card:nth-child(4)::before {
    background: var(--danger);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    /* Alterado de 15px para 2px conforme solicitado anteriormente */
}

.stat-title {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-icon.primary {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.stat-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.stat-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

/* Alinhamento à esquerda para o valor de recolhimento */
.collection-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--warning);
    text-align: left;
    margin-top: 8px;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.card-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
}

.card-body {
    padding: 20px;
}

.client-list {
    list-style: none;
}

.client-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.client-avatar {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

.client-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Estilos para o nome do cliente com base no status */
.client-name {
    font-weight: 600;
    margin-bottom: 3px;
    transition: color 0.3s ease;
    font-size: 1.1rem;
    /* Aumentado para melhor visibilidade */
}

.client-name.status-active {
    color: var(--success);
}

.client-name.status-today {
    color: var(--text-color);
}

.client-item.concluded-today {
    opacity: 0.55;
    filter: grayscale(30%);
    transition: opacity 0.2s ease;
}

.client-name.status-overdue {
    color: var(--danger);
}

.client-name.status-inactive {
    color: var(--text-color);
}

/* Estilo para informações do cliente em coluna, uma abaixo da outra */
.client-vertical-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #64748b;
}

.client-vertical-info div {
    display: flex;
    align-items: center;
}

/* 
=== AJUSTES ESPECÍFICOS PARA LISTA GERAL ===
- Redução do espaço entre labels e valores (min-width ajustado)
- Alteração de cor para branco nos labels específicos
Preparação para back-end: classes semânticas mantidas para integração futura
*/
.info-label {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin-right: 4px;
    font-weight: 500;
    color: var(--dark-light);
}

/* Cor branca para os labels específicos solicitados apenas no tema escuro */
[data-theme="dark"] .dashboard-client-list .client-vertical-info>div>.info-label,
[data-theme="dark"] .dashboard-client-list .client-vertical-info>.dashboard-hidden-info>.info-label,
[data-theme="dark"] .all-clients-list .client-vertical-info>div>.info-label,
[data-theme="dark"] .all-clients-list .client-vertical-info>.dashboard-hidden-info>.info-label {
    color: white;
}

/* Estilos para o histórico de pagamento */
.payment-history-list {
    max-height: 40vh;
    overflow-y: auto;
}

.payment-history-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.paid {
    font-weight: bold;
    color: var(--success);
}

.not-paid {
    font-weight: bold;
    color: var(--danger);
}

.client-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #64748b;
    font-size: 0.85rem;
}

.client-details-row {
    display: flex;
    justify-content: space-between;
}

.client-details-label {
    font-weight: 500;
    color: #475569;
}

.client-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.payment-history-btn-container {
    margin-top: 5px;
    /* Reduzido para mover o botão para cima */
    display: flex;
    justify-content: center;
}

/* Estilo para mobile - alinhando com o título Lista Geral */
@media (max-width: 768px) {
    .payment-history-btn-container {
        justify-content: center;
        width: 100%;
        margin-left: -10px;
        /* Ajuste horizontal com margin em vez de transform */
    }
}

.payment-history-btn {
    background: var(--search-bg);
    color: var(--dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.payment-history-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="dark"] .payment-history-btn {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}

[data-theme="dark"] .payment-history-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: #64748b;
    border: none;
    background: #f8fafc;
}

[data-theme="dark"] .action-btn {
    background: #334155;
    color: #cbd5e1;
}

.action-btn:hover {
    background: var(--primary);
    color: white;
}

.priority-tag {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
}

.priority-high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.priority-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.priority-low {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

/* 
=== FORMULÁRIO DE CADASTRO DE CLIENTE ===
Componente móvel com animações suaves
Preparação para back-end: estrutura organizada para integração com API
*/
.form-container {
    display: none;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-section {
    margin-bottom: 30px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.section-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .section-header {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

.section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] .section-title {
    color: var(--primary);
}

.section-body {
    padding: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

#seguranca-tab .section-body .form-group:first-child {
    margin-top: 12px;
}

#security-password-form .form-grid {
    max-width: 640px;
    margin: 0 auto;
    justify-content: center;
}

#security-email-form .form-grid,
#security-login-form .form-grid {
    max-width: 640px;
    margin: 0 auto;
    justify-content: center;
}


#security-email-form #change-email-btn,
#security-password-form #change-password-btn,
#security-login-form #change-login-btn {
    max-width: 640px;
    width: 100%;
    display: flex;
    margin: 15px auto 0;
    justify-content: center;
    min-height: 48px;
}

#seguranca-tab .section-body {
    padding-top: 0;
}

#security-password-form .section-body {
    padding: 0;
}

#security-password-form .section-body .form-group:first-child {
    margin-top: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-light);
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: var(--transition);
    background: #f8fafc;
}

/* Alinhar rótulos à esquerda no modal de detalhes do cliente */
#client-details-modal .form-control {
    text-align: left;
}

/* Centralizar os campos no modal de cadastro de cliente mantendo os rótulos à esquerda */
#client-registration-modal .form-grid {
    justify-content: center;
}

#client-registration-modal .form-group label {
    text-align: left;
}

#client-registration-modal .form-control {
    text-align: left;
}

[data-theme="dark"] .form-control {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.form-control:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.form-control[readonly] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

[data-theme="dark"] .form-control:disabled {
    background: #1e293b;
    color: #64748b;
}

[data-theme="dark"] .form-control[readonly] {
    background: #1e293b;
    color: #64748b;
}

.highlight-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 15px;
}

[data-theme="dark"] .highlight-box {
    background: #3f2c00;
    border-color: #784d00;
}

.highlight-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--danger);
    margin-top: 8px;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    padding: 24px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 16px 16px;
}

.btn {
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-add-client {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 10px;
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-add-client:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.btn-add-client i {
    margin: 0;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--gray);
    color: var(--dark);
}

[data-theme="dark"] .btn-secondary {
    background: #334155;
    color: var(--dark);
}

.btn-secondary:hover {
    background: #cbd5e1;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #475569;
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: #d97706;
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

/* 
=== MODAL ===
Componente reutilizável para diálogos
Mobile-first: dimensionamento responsivo
*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--card-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 90vh;
    overflow-y: auto;
}

/* Espaçamento lateral para o modal de excluir empréstimo (desktop) */
#delete-loan-modal .modal-content {
    margin: 0 16px;
}

/* Estilo específico para o modal de detalhes do cliente para garantir espaçamento adequado */
#client-details-modal .modal-content {
    margin: 0 auto; /* Centralizar o modal horizontalmente */
    max-width: 850px; /* Definir uma largura máxima adequada */
}

#client-details-modal .modal-body {
    padding: 30px; /* Aumentar o preenchimento do corpo do modal */
}

/* Ajustar espaçamento no modal de detalhes do cliente */
#client-details-modal .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Garantir distribuição equilibrada */
    gap: 25px; /* Aumentar o espaçamento entre as colunas */
    padding: 0 10px; /* Adicionar preenchimento lateral para evitar que os elementos fiquem colados nas bordas */
}

#client-details-modal .form-section {
    margin-bottom: 30px; /* Aumentar o espaçamento entre as seções */
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

#client-details-modal .section-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] #client-details-modal .section-header {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

#client-details-modal .form-section {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    border: 1px solid var(--border-color);
    margin-bottom: 30px; /* Manter o espaçamento entre seções */
}

/* Aplicar o gradiente azul ao cabeçalho de todas as seções no modal de detalhes do cliente */
#client-details-modal .form-section .section-header {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] #client-details-modal .form-section .section-header {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8) !important;
}

#client-details-modal .section-body {
    padding: 25px; /* Aumentar o padding do corpo da seção para mais espaçamento interno */
}

#client-details-modal .form-group {
    margin-bottom: 25px; /* Aumentar o espaçamento entre os grupos de formulário */
}

#client-details-modal .form-group label {
    display: block; /* Garantir que o label seja um bloco */
    margin-bottom: 8px; /* Garantir espaçamento adequado abaixo do label */
    font-weight: 500;
    color: var(--dark-light);
    font-size: 0.95rem;
    text-align: left; /* Alinhar rótulos à esquerda */
}

#client-details-modal .form-control {
    width: 100%; /* Garantir que os campos ocupem toda a largura disponível */
    padding: 14px; /* Garantir espaçamento interno adequado nos campos */
    border: 1px solid var(--border-color);
    border-radius: 10px; /* Garantir bordas arredondadas */
    font-size: 1rem;
    background: #f8fafc;
    text-align: left; /* Alinhar texto nos campos à esquerda */
}

#client-details-modal .form-control:disabled,
#client-details-modal .form-control[readonly] {
    background: #f1f5f9; /* Usar o mesmo fundo dos campos desabilitados */
    color: #94a3b8; /* Usar a mesma cor dos campos desabilitados */
    cursor: not-allowed;
    border-color: var(--border-color);
    opacity: 0.9; /* Tornar levemente mais opaco para realçar que é somente leitura */
    font-weight: 500; /* Tornar o texto levemente mais destacado */
}

/* Melhorar a aparência no tema escuro */
[data-theme="dark"] #client-details-modal .form-control {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}

/* Ajustar campos desabilitados no tema escuro */
[data-theme="dark"] #client-details-modal .form-control:disabled,
[data-theme="dark"] #client-details-modal .form-control[readonly] {
    background: #1e293b;
    color: #64748b;
    border-color: #334155;
}

[data-theme="dark"] #delete-loan-modal .form-control {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Garantir que o modal fique bem centrado e com bom espaçamento em dispositivos móveis */
@media (max-width: 768px) {
    #client-details-modal .modal-content {
        margin: 20px auto; /* Adicionar margem superior e inferior em dispositivos móveis */
        width: 95% !important;
        max-width: 95% !important;
    }
    
    #client-details-modal .modal-body {
        padding: 20px; /* Reduzir preenchimento em dispositivos móveis */
    }
    
    #client-details-modal .form-grid {
        grid-template-columns: 1fr; /* Em dispositivos móveis, uma coluna por vez */
        gap: 20px;
        padding: 0 5px; /* Reduzir preenchimento lateral */
    }
    
    #client-details-modal .section-body {
        padding: 20px; /* Reduzir preenchimento em dispositivos móveis */
    }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border-color);
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
}

.close-modal:hover {
    color: var(--dark);
}

/* Estilos específicos para o modal de histórico de pagamento */
#payment-history-modal .modal-content {
    width: 90%;
    max-width: 600px;
}

/* 
=== RESPONSIVIDADE ===
Media queries para adaptação mobile-first
*/
@media (max-width: 1200px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* 
=== MOBILE COM MENU INFERIOR ===
Implementação para telas menores (mobile)
*/
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0;
        --mobile-menu-height: 60px;
        --header-height: 55px;
    }

    /* Ocultar sidebar tradicional */
    .sidebar {
        display: none;
    }

    /* Mostrar menu inferior */
    .mobile-menu {
        display: flex;
        height: var(--mobile-menu-height);
    }

    /* Ajustar o conteúdo principal para não ficar por trás do menu inferior */
    .main-content {
        margin-left: 0 !important;
        padding-bottom: calc(var(--mobile-menu-height) - 25px);
        /* Reduzido de +10px para -25px para diminuir o espaçamento */
        padding-left: 2px;
        padding-right: 2px;
    }

    /* Remover título do header */
    .header-title {
        display: none;
    }

    /* Ajustar tamanho dos elementos para melhor toque */
    .card {
        border-radius: 12px;
    }

    .card-header,
    .card-body {
        padding: 10px;
        /* Reduzido de 15px para 10px no modo mobile */
    }

    .client-item {
        padding: 12px 0;
    }

    .client-avatar {
        width: 40px;
        height: 40px;
    }

    .action-btn {
        width: 30px;
        height: 30px;
    }

    .mobile-menu-item {
        padding: 8px 0;
    }

    .mobile-menu-item i {
        font-size: 1.3rem;
    }

    .mobile-menu-item span {
        font-size: 0.75rem;
    }

    .dashboard-client-list .client-item .client-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
    }
    .dashboard-client-list .client-item .client-actions .delete-loan-btn {
        display: flex;
    }
    #delete-loan-modal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
    }

    /* Ajustar espaçamento do modal de pagamento no modo mobile */
    #payment-modal>div {
        width: 95% !important;
        /* Reduzindo a largura para melhor espaçamento nas laterais */
        max-width: 95% !important;
        /* Impedindo que ultrapasse 95% da tela */
    }

    /* Ajustar espaçamento do modal de cadastro de cliente no modo mobile */
    #client-registration-modal .modal-content {
        width: 95% !important;
        /* Reduzindo a largura para melhor espaçamento nas laterais */
        max-width: 95% !important;
        /* Impedindo que ultrapasse 95% da tela */
        margin: 0 auto;
        /* Centralizar na tela */
    }

    /* Ajustar espaçamento do modal de detalhes do cliente no modo mobile */
    #client-details-modal {
        /* Garantindo centralização em dispositivos móveis */
        justify-content: center !important;
        align-items: flex-start !important; /* Alinhando ao topo para melhor visualização */
        padding-top: 20px; /* Adicionando espaçamento superior */
    }
    
    #client-details-modal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important; /* Centralizando o conteúdo */
        left: auto !important; /* Removendo propriedades que afetam a centralização */
        right: auto !important; /* Removendo propriedades que afetam a centralização */
        /* Removendo qualquer propriedade que possa afetar o posicionamento */
        transform: none !important;
    }

    /* Ajustar tamanho das fontes para melhor legibilidade */
    .header-title {
        font-size: 1.1rem;
        padding: 0 10px;
    }

    .search-bar {
        width: calc(100% - 100px);
        margin-right: 10px;
    }

    /* Garantir que os elementos não ultrapassem as bordas */
    .dashboard,
    .card,
    .card-body {
        width: calc(100% - 4px);
        margin: 0 auto;
        max-width: 100%;
    }

    /* Garantir que o conteúdo não fique escondido atrás do menu inferior */
    .dashboard {
        padding: 10px 4px 5px;
        /* Reduzido de 20px para 10px no topo para igualar ao espaçamento desejado */
    }

    /* Reduzir o espaçamento entre os elementos no dashboard no mobile */
    .content-grid {
        margin-bottom: 0px !important;
        /* Reduzido para igualar ao espaçamento dos outros menus */
    }

    /* Ajustar o tamanho dos cards para melhor encaixe */
    .stat-card {
        padding: 14px 15px;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    /* 
    === ALTERAÇÃO ESPECÍFICA PARA TELA DE CELULAR ===
    Centralizar o título "Lista Geral" e a barra de pesquisa no meio
    Mantendo o layout atual para telas maiores
    */
    .dashboard-client-list .card-header {
        flex-direction: column;
        align-items: center;
        padding: 15px 0;
        /* Mantendo o padding para preservar o espaçamento superior/inferior */
    }

    .dashboard-client-list .card-title {
        margin-bottom: 0;
        /* Removendo completamente o espaçamento entre o título e a barra de pesquisa */
        text-align: center;
        font-size: 1.1rem;
    }

    .dashboard-client-list .search-bar {
        width: 95% !important;
        max-width: 500px;
        margin: 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .dashboard-client-list .search-bar i {
        color: #94a3b8;
        margin-right: 8px;
        display: inline-flex;
    }

    .dashboard-client-list .search-bar input {
        background: transparent;
        border: none;
        outline: none;
        width: 100%;
        padding: 6px 10px;
        color: var(--dark);
        font-size: 0.95rem;
    }

    /* Remover o botão "Ver todos" no mobile */
    .dashboard-client-list .card-header>div:last-child {
        display: none;
    }

    /* 
    === ALTERAÇÃO ESPECÍFICA PARA O MENU DE CLIENTES NO CELULAR ===
    Posicionar o título "Todos os Clientes" acima da barra de pesquisa
    e ajustar a barra de pesquisa para mover um pouco para a esquerda
    para que o botão "Novo Cliente" fique visível
    */
    /* 
    === ALTERAÇÃO ESPECÍFICA PARA O MENU DE CLIENTES NO CELULAR ===
    Posicionar o título "Todos os Clientes" acima da barra de pesquisa
    e ajustar a barra de pesquisa para mover um pouco para a esquerda
    para que o botão "Novo Cliente" fique visível
    */
    .btn-add-client {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: none;
        background: var(--primary);
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1rem;
        transition: var(--transition);
        flex-shrink: 0;
        margin-left: 10px;
    }

    .btn-add-client:hover {
        background: var(--primary-dark);
        transform: scale(1.05);
    }

    .btn-add-client i {
        margin: 0;
    }

    /* Estilos específicos para o menu de clientes */
    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #all-clients-view .card-title {
        text-align: center;
        font-size: 1.1rem;
        margin-bottom: 10px;
        width: 100%;
    }

    .search-container {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        position: relative;
    }

    #all-clients-view .search-bar {
        width: 250px;
        /* Largura fixa como no dashboard */
        flex-shrink: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    #all-clients-view .btn-add-client {
        position: absolute;
        right: -45px;
        /* Posição ao lado direito da barra de pesquisa */
        top: 50%;
        transform: translateY(-50%);
    }

    #all-clients-view .btn-add-client {
        display: none;
        /* Esconder o botão no modo desktop */
    }

    /* Estilos responsivos para o menu de clientes */
    @media (max-width: 768px) {
        .search-container {
            display: flex;
            align-items: center;
            /* Alinha verticalmente com a barra de pesquisa */
            justify-content: center;
            gap: 10px;
            /* Espaçamento entre a barra de pesquisa e o botão */
        }

        #all-clients-view .search-bar {
            width: 70% !important;
            /* Reduzido para liberar espaço ao lado para o botão */
            margin: 10px 0;
            /* Ajuste de margem para melhor alinhamento */
            flex: 1;
            /* Permitir que a barra de pesquisa ocupe o espaço disponível */
        }

        #all-clients-view .btn-add-client {
            display: inline-flex !important;
            /* Mostrar o botão no modo responsivo */
            position: relative !important;
            /* Altera o posicionamento para relativo */
            right: auto !important;
            /* Remove o posicionamento absoluto à direita */
            top: auto !important;
            /* Remove o posicionamento absoluto do topo */
            transform: none !important;
            /* Remove a transformação vertical */
            width: 40px !important;
            /* Diminuir o tamanho do botão no modo responsivo */
            height: 40px !important;
            /* Diminuir o tamanho do botão no modo responsivo */
            font-size: 1rem !important;
            /* Ajustar tamanho da fonte para manter proporção */
            margin-left: 10px !important;
            /* Espaçamento esquerdo para separar do campo de pesquisa */
            margin-top: -8px !important;
            /* Levantar o botão um pouco na vertical */
        }
    }

    #all-clients-view .search-bar {
        width: 90% !important;
        /* Reduzido para dar mais espaço ao botão "Novo Cliente" */
        max-width: 500px;
        margin: 0 0 10px 0;
        /* Espaçamento abaixo da barra de pesquisa */
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #all-clients-view .search-bar i {
        color: #94a3b8;
        margin-right: 8px;
        display: inline-flex;
    }

    #all-clients-view .search-bar input {
        background: transparent;
        border: none;
        outline: none;
        width: 100%;
        padding: 6px 10px;
        color: var(--dark);
        font-size: 0.95rem;
    }

    #all-clients-view .card-header>div:last-child {
        /* Botão "Novo Cliente" */
        width: 100%;
        max-width: 500px;
        display: flex !important;
        justify-content: center;
        /* Centralizado em vez de justify-content: flex-end */
        margin: 10px auto 0;
        padding: 0 5%;
        /* Ajustado para dar mais espaço ao botão */
    }

    #all-clients-view .btn {
        /* Garantir que o botão "Novo Cliente" fique visível */
        margin: 0 !important;
    }

    /* Ajuste específico para o header em dispositivos móveis */
    /* [TRAЕ] SECURITY:
     * - Alteração autorizada em posicionamento mobile do header
     * - Solicitação do usuário: alinhar botão de tema ao canto direito no mobile
     * - Confirmação: solicitação direta do usuário em 2025-11-08
     */
    .header {
        padding: 0 15px;
        /* Igual ao desktop para manter espaçamento consistente nas laterais */
    }

    .header-right {
        /* Fixar no canto direito e centralizar verticalmente em telas pequenas */
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
        min-width: 35px; /* Espaço mínimo equivalente ao avatar */
    }
}

/*
=== ESTILOS PARA ABAS DE CONFIGURAÇÃO ===
*/
.config-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.config-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.config-tab-button {
    padding: 12px 20px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--dark-light);
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.config-tab-button:hover {
    background-color: var(--search-bg);
    color: var(--primary);
}

.config-tab-button.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.config-tab-content {
    display: none;
    animation: fadeIn 0.5s;
}

.config-tab-content.active {
    display: block;
}

/* Estilo para o switch de backup */
.form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 0;
}

.form-switch span {
    font-weight: 500;
    color: var(--dark-light);
}

.form-switch input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 20px;
    background-color: var(--gray);
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.form-switch input[type="checkbox"]:checked {
    background-color: var(--success);
}

.form-switch input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

@media (max-width: 768px) {
    .config-tab-button {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    .config-tab-button span {
        display: none; /* Oculta o texto em telas pequenas, mostrando só o ícone */
    }
}

@media (max-width: 480px) {
    .config-tab-button span {
        display: inline; /* Mostra o texto novamente em telas muito pequenas se o layout quebrar */
    }
    .config-tabs {
        justify-content: flex-start;
    }
}

/*
=== ESTILOS PARA PÁGINA DE LOGIN ===
*/
body.login-active .sidebar,
body.login-active .mobile-menu,
body.login-active .header {
    display: none;
}

body.login-active .main-content {
    margin-left: 0;
    padding-bottom: 0;
    height: 100vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
    animation: fadeIn 0.5s;
}

.login-header {
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.login-body {
    padding: 24px 32px 32px 32px;
}

/* Mobile: garantir logo acima do título */
@media (max-width: 768px) {
    .login-card {
        display: flex;
        flex-direction: column;
    }
    .login-header {
        padding-bottom: 12px;
    }
    .login-body {
        padding-top: 16px;
    }
}

.login-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.login-subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--dark-light);
    margin-bottom: 24px;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-light);
}

.input-icon-wrapper .form-control {
    padding-left: 40px;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-light);
    cursor: pointer;
}

.form-check input {
    cursor: pointer;
}

.forgot-password {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* === NOVOS ESTILOS PARA O DASHBOARD (Mobile-First App-Like) === */

/* Ocultar layout de desktop por padrão */
.stats-desktop {
    display: none;
}

/* Container principal para o layout mobile */
.stats-mobile {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    margin-top: 10px; /* Adicionado para padronizar o espaço superior */
}

.mobile-card {
    background: var(--card-bg);
    border-radius: 12px !important; /* Força o arredondamento padrão */
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    padding: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.mobile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px -4px rgba(0,0,0,0.2);
}

/* Estilo do Card de Caixa (Hero) */
.caixa-hero {
    padding: 0 20px 20px 20px; /* Remove padding do topo e mantém o resto */
}
.caixa-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-top: 15px; /* Adiciona o padding que foi removido do pai */
}
.caixa-hero-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-light);
}
.caixa-hero-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}
.caixa-hero-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}
.info-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}
.info-item .label {
    color: var(--dark-light);
}
.info-item .value {
    font-weight: 600;
    color: var(--dark);
}
.info-item .success-text { color: var(--success); }
.info-item .danger-text { color: var(--danger); }
.despesa-item-mobile { display: flex; } /* Controlado por JS */

/* Grid de Estatísticas Secundárias */
.secondary-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.stat-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding: 20px 10px;
}
.stat-pod .label {
    font-size: 0.8rem;
    color: var(--dark-light);
    font-weight: 500;
}
.stat-pod .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark);
}

/* === ESTILOS DESKTOP (Progressive Enhancement) === */
@media (min-width: 769px) {
    /* Esconder a estrutura mobile e mostrar a desktop */
    .stats-mobile {
        display: none;
    }
    .stats-desktop {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    /* Estilos dos cards de desktop (reutilizados da implementação anterior) */
    .stat-card-detailed {
        background: var(--card-bg);
        border-radius: 16px;
        padding: 20px;
        box-shadow: var(--card-shadow);
        transition: var(--transition);
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        gap: 15px;
        cursor: pointer;
    }
    .stat-card-detailed:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    }
    .stat-card-detailed .stat-header { margin-bottom: 0; padding: 0; border: none; }
    .stat-icon-detailed { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
    .stat-icon-detailed.success { background: rgba(16, 185, 129, 0.1); color: var(--success); }
    .stat-icon-detailed.warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
    .stat-icon-detailed.info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
    .stat-icon-detailed.primary { background: rgba(37, 99, 235, 0.1); color: var(--primary); }
    .stat-body-detailed { display: flex; flex-direction: column; gap: 12px; }
    .info-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; color: var(--dark-light); }
    .info-row .value { font-weight: 600; color: var(--dark); }
    .info-row .success-text { color: var(--success); }
    .info-row .danger-text { color: var(--danger); }
    .despesa-item { display: flex; }
    .stat-footer-detailed { border-top: 1px solid var(--border-color); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
    .stat-footer-detailed .total-value { font-size: 1.2rem; color: var(--dark); }
    .progress-bar-container { flex-grow: 1; height: 8px; background-color: var(--gray); border-radius: 4px; overflow: hidden; margin-right: 15px; }
    .progress-bar { height: 100%; background-color: var(--warning); border-radius: 4px; }
    .stat-card-combined { background: var(--card-bg); border-radius: 16px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); display: flex; align-items: stretch; grid-column: span 2; }
    .combined-item { flex: 1; padding: 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: var(--transition); border-radius: 16px; }
    .combined-item:hover { background-color: var(--search-bg); }
    .combined-separator { width: 1px; background-color: var(--border-color); }
    .combined-info { display: flex; flex-direction: column; }
    .combined-title { font-size: 0.9rem; color: #64748b; font-weight: 500; margin-bottom: 5px; }
    .combined-value { font-size: 1.8rem; font-weight: 700; color: var(--dark); }
}

/* Estilo para o novo card de total emprestado no mobile */
.total-emprestado-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--card-bg) 70%, var(--blue-50, #eff6ff));
}
[data-theme="dark"] .total-emprestado-card {
    background: linear-gradient(135deg, var(--card-bg) 70%, var(--gray-800, #1f2937));
}
.total-emprestado-card .label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-light);
}
.total-emprestado-card .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

/* Ajuste fino para padronizar o espaço do dashboard no mobile */
@media (max-width: 768px) {
    #dashboard-view.dashboard {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #dashboard-view .stats-mobile {
        margin-top: 20px;
        padding-left: 4px;
        padding-right: 4px;
    }
    /* Adiciona o padding lateral ao container da lista geral */
    #dashboard-view .content-grid {
        padding-left: 4px;
        padding-right: 4px;
    }
    /* Força a lista geral a ocupar 100% do container pai, ignorando outras regras de largura */
    #dashboard-view .content-grid .card {
        width: 100%;
        margin: 0;
    }
}

/* === ESTILOS PARA O NOVO OVERVIEW DE CAIXA === */
.cash-overview-redesigned {
    background: var(--cash-summary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.main-balance {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.main-balance .label {
    font-size: 0.9rem;
    color: var(--dark-light);
    font-weight: 500;
}

.main-balance .value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
}

.balance-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 15px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.breakdown-item .label {
    color: var(--dark-light);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breakdown-item .value {
    font-weight: 600;
    color: var(--dark);
}

.breakdown-item .success-text {
    color: var(--success);
}

.breakdown-item .danger-text {
    color: var(--danger);
}

/* Estilos para a nova seção de portfólio */
.portfolio-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
}

.portfolio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.portfolio-item .label {
    color: var(--dark-light);
    font-weight: 500;
}

.portfolio-item .value {
    font-weight: 600;
    color: var(--dark);
}

.portfolio-item .danger-text {
    color: var(--danger);
}


/* 
=== MOBILE ULTRA-REDUZIDO ===
Adaptações para telas muito pequenas
*/
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        width: 100%;
    }

    .stat-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .stat-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .stat-card:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .stat-card:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .form-footer {
        flex-direction: column;
        gap: 10px;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Ajuste para a barra de pesquisa no mobile */
    .search-bar {
        width: calc(100% - 100px) !important;
    }

    /* Ajustar tamanho dos cards para telas muito pequenas */
    .client-vertical-info {
        font-size: 0.8rem;
    }

    .client-name {
        font-size: 1.05rem;
    }

    /* Ajustar tamanho do menu inferior para telas muito pequenas */
    .mobile-menu-item span {
        font-size: 0.7rem;
    }

    /* Garantir que o conteúdo não fique escondido atrás do menu inferior */
    .dashboard {
        padding: 20px 4px 30px;
        /* Reduzido de 90px para 30px para diminuir o espaçamento */
    }
}

/* Alteração específica para o modal de pagamento no tema escuro */
[data-theme="dark"] #payment-modal input {
    background: #334155 !important;
}

/* Ajuste específico para o modal de pagamento em telas muito pequenas */
@media (max-width: 480px) {
    #payment-modal>div {
        width: 92% !important;
        /* Reduzindo ainda mais a largura para telas muito pequenas */
        max-width: 92% !important;
        margin: 0 auto;
        /* Centralizando o modal */
    }

    /* Ajustar layout dos botões do modal de pagamento no mobile */
    #payment-modal .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    #payment-modal .modal-footer button {
        width: 100%;
    }
}

/* Ajuste específico para o modal de pagamento em telas muito pequenas */
@media (max-width: 480px) {
    #payment-modal>div {
        width: 92% !important;
        /* Reduzindo ainda mais a largura para telas muito pequenas */
        max-width: 92% !important;
        margin: 0 auto;
        /* Centralizando o modal */
    }

    /* Ajustar layout dos botões do modal de pagamento no mobile */
    #payment-modal .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    #payment-modal .modal-footer button {
        width: 100%;
    }
}

/* 
=== ANIMAÇÕES DE DETALHES ===
Implementação mobile-first para expandir informações
*/
.dashboard-client-list .client-item .dashboard-hidden-info {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition:
        max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease,
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: max-height, opacity, transform;
}

.dashboard-client-list .client-item.expanded .dashboard-hidden-info {
    opacity: 1;
    max-height: 100px;
    transform: scaleY(1);
    transition:
        max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s,
        opacity 0.3s ease 0.05s,
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
}

/* Animação suave para o ícone do olho */
.action-btn i {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s ease;
}

.dashboard-client-list .client-item.expanded .details-btn i {
    transform: rotate(180deg);
    color: var(--primary);
}

/* 
=== VERSÃO DO SISTEMA ===
Exibição discreta da versão para rastreamento
*/
.version-badge {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: var(--dark-light);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    z-index: 1000;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.version-badge:hover {
    opacity: 1;
}

/* 
=== ESTILOS ESPECÍFICOS PARA CAIXA ===
Reorganização da estrutura visual do caixa
*/
.cash-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.cash-balance-card {
    background: var(--cash-balance-bg);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cash-balance-icon {
    background: rgba(30, 64, 175, 0.1);
    color: var(--cash-balance-icon);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.cash-balance-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.cash-balance-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
}

.cash-summary {
    background: var(--cash-summary-bg);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.cash-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.cash-summary-item {
    display: flex;
    flex-direction: column;
}

.cash-summary-label {
    font-size: 0.9rem;
    /* Aumentado para melhor legibilidade */
    color: #475569;
    font-weight: 500;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

/* Estilo específico para os textos "Saldo de ontem" e "Recolhimento de hoje" */
.cash-yesterday-label,
.cash-today-label {
    font-weight: bold;
}

/* Estilo para os textos "Rec hoje" e "Ontem" no card de caixa do dashboard */
.stat-card[data-view="caixa"] .stat-additional-info div[title="Recolhido hoje"]>span:first-child,
.stat-card[data-view="caixa"] .stat-additional-info div[title="Saldo do dia anterior"]>span:first-child {
    font-weight: bold;
}



.cash-summary-value {
    font-size: 1.3rem;
    /* Aumentado para destacar o valor */
    font-weight: 700;
    color: var(--dark);
}

/* Estilo específico para alinhar o valor "R$ 100,00" com a letra "S" de "Saldo" */
.cash-yesterday {
    position: relative;
    display: inline-block;
}

.cash-yesterday-value {
    position: absolute;
    left: 0; /* Alinha o valor com o início do texto "Saldo" */
    top: calc(100% + 3px); /* Posiciona logo abaixo do texto */
    white-space: nowrap;
    text-align: left;
}

/* Estilos para os valores monetários nos temas claro/escuro */
.cash-today-value,
.cash-yesterday-value {
    color: #10b981; /* Verde (success) para o tema claro - cor original */
}

.cash-yesterday-value {
    color: #2563eb; /* Azul (primary) para o tema claro - cor original */
}

/* Estilo para garantir que no tema escuro os valores sejam brancos */
[data-theme="dark"] .cash-today-value,
[data-theme="dark"] .cash-yesterday-value {
    color: white !important; /* Força cor branca no tema escuro */
}

/* No tema claro, garantir cores específicas */
:root:not([data-theme="dark"]) .cash-today-value,
:root:not([data-theme="dark"]) .cash-yesterday-value {
    color: black; /* Força cor preta no tema claro */
}

/* Estilos para o texto "Rec hoje" no dashboard para combinar com o valor "R$300,00" */
:root:not([data-theme="dark"]) #dashboard-view .stat-additional-info span[style*="font-weight: 600"] {
    color: var(--dark) !important;
}

[data-theme="dark"] #dashboard-view .stat-additional-info span[style*="font-weight: 600"],
[data-theme="dark"] #dashboard-view .stat-value {
    color: white !important;
}

/* Estilos específicos para o modo responsivo */
@media (max-width: 768px) {
    .cash-yesterday {
        position: relative;
        display: inline-block;
    }
    
    .cash-yesterday-value {
        position: absolute;
        left: 0; /* Alinha o valor com o início do texto "Saldo" em dispositivos móveis */
        top: calc(100% + 3px); /* Posiciona logo abaixo do texto em dispositivos móveis */
        white-space: nowrap;
        text-align: left;
        color: var(--dark); /* Cor padrão para o tema claro */
    }
}

.cash-expenses-section {
    margin-top: 20px;
}

.cash-expenses-list {
    list-style: none;
    margin-top: 15px;
}

.cash-expense-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.cash-expense-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(185, 28, 28, 0.1);
    color: var(--cash-expenses-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.cash-expense-info {
    flex: 1;
}

.cash-expense-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.cash-expense-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
}

.cash-expense-total {
    background: var(--cash-expenses-bg);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    margin-top: 15px;
}

.cash-expense-total-label {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    margin-bottom: 5px;
}

.cash-expense-total-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cash-expenses-total);
}

.cash-movements {
    background: var(--cash-movements-bg);
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px; /* Ajustando para espaçamento padronizado */
    overflow: hidden;
}

/* Espaçamento específico para a seção de gastos no caixa para padronizar espaçamento */
#caixa-view .form-section {
    margin-top: 15px; /* Padronizando o espaçamento com o valor entre os outros elementos */
}

.cash-movements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    /* fundo azul igual ao cabeçalho de seções */
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-bottom: 1px solid var(--border-color);
    /* expandir para borda do card apesar do padding interno do container */
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0;
    padding: 15px;
    position: sticky;
    top: -15px;
    z-index: 1;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.cash-movements-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
}

[data-theme="dark"] .cash-movements-header {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

.cash-movement-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.cash-movement-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.cash-movement-info {
    flex: 1;
}

.cash-movement-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.cash-movement-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
}

/* Reordenar elementos do formulário de empréstimos no modo mobile */
/* Mantendo o método de pagamento abaixo do número de parcelas */
@media (max-width: 768px) {
    #emprestimos-view .form-grid:nth-of-type(4) {
        display: flex;
        flex-direction: column;
    }
}

/* Estilos para o modal de adicionar entrada de caixa */
#entrada-modal .form-control {
    background: var(--search-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

#entrada-modal .form-control option {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Estilos para o modal de adicionar entrada de caixa */
#entrada-modal .form-control {
    background: var(--search-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

#entrada-modal .form-control option {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Garantir contraste adequado no tema escuro */
[data-theme="dark"] #entrada-modal .form-control {
    background: var(--search-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #entrada-modal .form-control option {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #entrada-modal label {
    color: var(--dark-light) !important;
}

/* Estilo responsivo para o modal de adicionar entrada de caixa - com espaçamento em todas as direções */
@media (max-width: 768px) {
    #entrada-modal {
        padding: 20px !important; /* Adiciona espaçamento nas laterais e superior/inferior */
    }

    #entrada-modal > div {
        width: 100% !important; /* Usa 100% considerando o padding do pai */
        max-width: calc(100% - 40px) !important; /* Considerando o padding do pai */
        margin: 20px auto !important; /* Espaçamento superior/inferior e centralização horizontal */
    }
}

@media (max-width: 480px) {
    #entrada-modal {
        padding: 15px !important; /* Espaçamento reduzido para telas muito pequenas */
    }

    #entrada-modal > div {
        width: 100% !important; /* Usa 100% considerando o padding do pai */
        max-width: calc(100% - 30px) !important; /* Considerando o padding do pai */
        margin: 15px auto !important; /* Espaçamento reduzido para telas muito pequenas */
    }
}

#entrada-modal .entrada-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto;
}

#entrada-modal .entrada-modal-content > div:first-child { /* Cabeçalho com o título */
    padding: 15px 15px 15px 15px !important;
}

#entrada-modal .entrada-modal-content > div:nth-child(2) { /* Corpo do modal com os campos */
    padding: 15px !important;
}

#entrada-modal .entrada-modal-content > div:last-child { /* Rodapé com os botões */
    padding: 15px 15px 15px 15px !important;
}

#entrada-modal .form-control {
    padding: 12px !important;
}

/* Estilo responsivo adicional para o modal de adicionar entrada de caixa */
@media (max-width: 768px) {
    #entrada-modal .entrada-modal-content {
        width: 90% !important;
        max-width: 90% !important;
        min-height: auto;
        margin: 20px auto !important; /* Adicionando margem superior e inferior para espaçamento */
    }

    #entrada-modal .entrada-modal-content > div:first-child { /* Cabeçalho com o título */
        padding: 15px 15px 15px 15px !important;
    }

    #entrada-modal .entrada-modal-content > div:nth-child(2) { /* Corpo do modal com os campos */
        padding: 15px !important;
    }

    #entrada-modal .entrada-modal-content > div:last-child { /* Rodapé com os botões */
        padding: 15px 15px 15px 15px !important;
    }

    #entrada-modal .form-control {
        padding: 12px !important;
    }
}

/* Abordagem mais agressiva para garantir espaçamento mesmo com estilos inline */
@media (max-width: 768px) {
    #entrada-modal {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 15px !important;
    }
    #entrada-modal .entrada-modal-content {
        width: 92% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
        transform: none !important;
    }
}

/* Estilo ainda mais específico para sobrepor estilos inline */
#entrada-modal .entrada-modal-content[style*="width: 100%"] {
    width: 90% !important;
    max-width: 90% !important;
    margin: 20px auto !important;
}

/* Estilos para o campo de data no modal de adicionar valor ao caixa no tema escuro */
#entrada-modal .form-control[readonly] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    border-color: var(--border-color) !important;
    opacity: 0.9 !important;
    font-weight: 500 !important;
}

[data-theme="dark"] #entrada-modal .form-control[readonly] {
    background: #1e293b !important;
    color: #64748b !important;
    border-color: #334155 !important;
}

/* Reduzir espaçamento entre o campo data e os botões no modo responsivo */
@media (max-width: 768px) {
    #entrada-modal .entrada-modal-content > div:last-child {
        padding: 10px 15px !important;
    }

    #entrada-modal .entrada-modal-content > div:nth-last-child(2) {
        margin-bottom: 5px !important;
    }
}

/* Estilo mais específico para garantir espaçamento mesmo com estilos inline */
#entrada-modal {
    padding: 20px !important;
    box-sizing: border-box !important;
}

#entrada-modal[style*="flex"] {
    /* Garantir espaçamento mesmo quando display:flex é aplicado via JS */
    padding: 20px !important;
    box-sizing: border-box !important;
}

#entrada-modal > div {
    margin: 0 auto !important; /* Garantir centralização e espaçamento mesmo com flexbox */
}

@media (max-width: 768px) {
    #entrada-modal {
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    #entrada-modal[style*="flex"] {
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    #entrada-modal > div {
        margin: 0 auto !important; /* Garantir centralização e espaçamento mesmo com flexbox */
    }
}

/* Estilo mais específico para telas pequenas para garantir espaçamento adequado */
@media (max-width: 480px) {
    #entrada-modal .entrada-modal-content {
        width: calc(100% - 30px) !important; /* Reduzindo em 30px para garantir espaçamento nas laterais */
        max-width: 95% !important;
        margin: 15px auto !important; /* Ajustando margem para telas pequenas */
    }
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.value.loading,.total-value.loading,.caixa-hero-total.loading{color:transparent;position:relative;border-radius:8px;min-height:1.2rem;background:linear-gradient(90deg,rgba(148,163,184,0.25) 25%,rgba(148,163,184,0.35) 37%,rgba(148,163,184,0.25) 63%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite}
/* removido: fundo azul aplicado ao container; o fundo azul será apenas no cabeçalho */

/* Bloquear rolagem quando qualquer modal estiver aberto */
body.modal-open {
    overflow: hidden !important;
}