/* ========================================================= */
/* CSS: A NOVA SIDEBAR - VERSÃO FINAL CORRIGIDA E COMPLETA   */
/* ========================================================= */
:root {
    --sidebar-width: 260px;
    --sidebar-width-compact: 80px;
    --sidebar-bg: #111827; /* Deep midnight blue for a premium look */
    --sidebar-link-color: #9ca3af;
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-link-active-color: #ffffff;
    --sidebar-link-active-bg: rgba(59, 130, 246, 0.1);
    --sidebar-link-active-border: #3b82f6;
    --sidebar-heading-color: #6b7280;
}


/* ========================================================= */
/* CAPÍTULO 1: O GUIA DE ESTILOS - PALETA DE CORES           */
/* ========================================================= */
:root {
    /* Light Mode (Padrão) */
    --cor-fundo-principal: #f8f9fa;
    --cor-fundo-card: #ffffff;
    --cor-texto-principal: #212529;
    --cor-texto-secundario: #6c757d;
    --cor-borda: #dee2e6;
    --cor-input-fundo: #ffffff;
    --cor-input-borda: #ced4da;
}

body.dark-mode {
    /* Dark Mode (Quando a classe é aplicada) */
    --cor-fundo-principal: #121212;
    --cor-fundo-card: #1e1e1e;
    --cor-texto-principal: #e0e0e0;
    --cor-texto-secundario: #a0a0a0;
    --cor-borda: #444444;
    --cor-input-fundo: #2a2a2a;
    --cor-input-borda: #555555;
}


/* ========================================================= */
/* CAPÍTULO 2: APLICAÇÃO DAS VARIÁVEIS NOS COMPONENTES     */
/* ========================================================= */

/* Aplicando ao corpo da página */
body {
    background-color: var(--cor-fundo-principal);
    color: var(--cor-texto-principal);
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
}

/* Aplicando aos Cards */
.card, .form-card-modern {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header, .card-footer {
    background-color: rgba(0,0,0,0.03);
    border-bottom-color: var(--cor-borda);
    border-top-color: var(--cor-borda);
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
     background-color: rgba(255,255,255,0.05);
}

/* Aplicando aos títulos e textos */
h1, h2, h3, h4, h5, h6, .page-title {
    color: var(--cor-texto-principal);
}
p, .page-subtitle, .text-muted {
    color: var(--cor-texto-secundario);
}
hr {
    background-color: var(--cor-borda);
}

/* Aplicando aos campos de formulário */
.form-control, .form-select, input, select {
    background-color: var(--cor-input-fundo);
    border: 1px solid var(--cor-input-borda);
    color: var(--cor-texto-principal);
}
.form-control:focus, .form-select:focus, input:focus, select:focus {
    background-color: var(--cor-input-fundo);
    color: var(--cor-texto-principal);
}

/* Específico para o Dark Mode */
body.dark-mode .form-control::placeholder {
    color: var(--cor-texto-secundario);
}
body.dark-mode .form-select {
    /* Adiciona um ícone de seta branco para o select no dark mode */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Navbar Customizada Global */
.custom-navbar {
    background-color: var(--cor-fundo-card);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.custom-navbar .nav-link, 
.custom-navbar .navbar-brand {
    color: var(--cor-texto-secundario);
    font-weight: 500;
}
.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus {
    color: var(--cor-texto-principal);
}

/* Dropdown Navbar (Dark Mode Fixes) */
body.dark-mode .dropdown-menu {
    background-color: var(--cor-fundo-card);
    border-color: var(--cor-borda);
}
body.dark-mode .dropdown-item {
    color: var(--cor-texto-primario) !important;
}
body.dark-mode .dropdown-item:hover {
    background-color: rgba(255,255,255,0.05);
    color: #fff !important;
}
body.dark-mode .dropdown-divider {
    border-top-color: var(--cor-borda);
}

/* Atualiza a cor de fundo da navbar superior */
body.dark-mode #page-content-wrapper .navbar {
    background-color: var(--cor-fundo-card) !important;
    border-bottom: 1px solid var(--cor-borda) !important;
}


#wrapper {
    display: flex; /* Adicionado para garantir o layout flex */
}

#sidebar-wrapper {
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: var(--sidebar-bg);
    transition: width 0.25s ease, margin-left 0.25s ease;
    display: flex;
    flex-direction: column;
    z-index: 1030;
}

/* --- ESTADOS DA SIDEBAR --- */

/* 1. MODO COMPACTO (Aplica-se em telas grandes) */
@media (min-width: 768px) {
    body.sb-sidenav-compacted #sidebar-wrapper {
        width: var(--sidebar-width-compact);
        position: relative;
        overflow: visible !important;
    }
    body.sb-sidenav-compacted #sidebar-wrapper .list-group {
        overflow: visible !important;
    }
    body.sb-sidenav-compacted .sidebar-text,
    body.sb-sidenav-compacted .sidebar-heading-custom,
    body.sb-sidenav-compacted .has-submenu::after {
        display: none;
        opacity: 0;
    }
    body.sb-sidenav-compacted .sidebar-heading .ms-2 { display: none; }
    
    /* Submenus as Flyouts attached to the sidebar */
    body.sb-sidenav-compacted #sidebar-wrapper .collapse {
        display: none !important; /* Hide by default, ignore Bootstrap .show */
        position: absolute;
        left: calc(100% - 5px); /* Slight overlap to prevent gap */
        background-color: var(--sidebar-bg);
        border-radius: 0 0.5rem 0.5rem 0;
        box-shadow: 4px 0 10px rgba(0,0,0,0.2);
        z-index: 1000;
        width: 220px;
        padding: 0.5rem;
        transform: translateY(-45px); /* Align with parent menu item */
    }
    /* Invisible bridge to catch hovers between menu item and flyout */
    body.sb-sidenav-compacted #sidebar-wrapper .collapse::after {
        content: '';
        position: absolute;
        left: -15px;
        top: 0;
        bottom: -45px;
        width: 15px;
        background: transparent;
    }
    body.sb-sidenav-compacted #sidebar-wrapper .list-group-item.has-submenu:hover + .collapse,
    body.sb-sidenav-compacted #sidebar-wrapper .collapse:hover {
        display: block !important;
    }
    body.sb-sidenav-compacted #sidebar-wrapper .collapse .sidebar-text {
        display: inline !important;
        opacity: 1 !important;
    }
    body.sb-sidenav-compacted #sidebar-wrapper .submenu-item {
        padding-left: 1.25rem !important;
    }
    
    /* Fix Periodo Ativo in compact mode */
    body.sb-sidenav-compacted .periodo-ativo-card {
        padding: 0.5rem !important;
        margin: 0.75rem 0.5rem 1rem 0.5rem !important;
        justify-content: center;
        flex-direction: column;
        gap: 0.25rem;
    }
    body.sb-sidenav-compacted .periodo-icon {
        margin-right: 0 !important;
        width: 30px !important;
        height: 30px !important;
    }
    body.sb-sidenav-compacted .periodo-texts {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    body.sb-sidenav-compacted .value-periodo {
        font-size: 0.65rem !important;
        margin-top: 0.1rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.1 !important;
    }
}

/* 2. MODO ESCONDIDO (Aplica-se em telas pequenas) */
@media (max-width: 767.98px) {
    #sidebar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1040; /* Acima do overlay que é 1039 */
        margin-left: calc(var(--sidebar-width) * -1);
        transition: margin-left 0.3s ease;
    }
    /* O !important e dupla hierarquia (#wrapper #sidebar) ganham do CSS global legado! */
    body.sb-sidenav-toggled #sidebar-wrapper,
    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
        margin-left: 0 !important;
    }
}

/* --- COMPONENTES DA SIDEBAR --- */

/* Corpo e Rodapé */
#sidebar-wrapper .list-group { flex-grow: 1; overflow-y: auto; }
#sidebar-wrapper .sidebar-footer { flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.1); }

/* Cabeçalho e Títulos de Grupo */
#sidebar-wrapper .sidebar-heading { padding: 1.5rem 1.25rem; font-size: 1.2rem; font-weight: 700; color: white; display: flex; align-items: center; }
#sidebar-wrapper .logo-menu { height: 32px; width: 32px; }
#sidebar-wrapper .sidebar-heading-custom { padding: 1.5rem 1.25rem 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--sidebar-heading-color); text-transform: uppercase; letter-spacing: 0.1rem; }
#sidebar-wrapper .periodo-ativo-info { padding: 0.75rem 1.5rem; background-color: rgba(255, 255, 255, 0.05); color: white; display: flex; align-items: center; gap: 15px; }

/* Estilos dos Itens do Menu */
#sidebar-wrapper .list-group-item {
    background-color: transparent;
    color: var(--sidebar-link-color);
    border: none;
    padding: 0.8rem 1rem;
    margin: 0.15rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#sidebar-wrapper .list-group.btn-whatsapp:hover {
    background-color: var(--btn-soft-hover);
    color: #0b7843;
}


/* =========================================================================
   TIMELINE (INQUILINOS ANTIGOS)
   ========================================================================= */
.timeline {
    position: relative;
    padding-left: 30px;
    list-style: none;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 2px;
    background-color: #e9ecef;
}

body.dark-mode .timeline::before {
    background-color: #343a40;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    top: 15px;
    left: -22px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #6c757d;
    border: 2px solid #fff;
    z-index: 1;
}

body.dark-mode .timeline-marker {
    border-color: #1a1d20;
}

.timeline-vago .timeline-marker {
    background-color: #f59f00; /* Laranja */
}

.timeline-atual .timeline-marker {
    background-color: #2b8a3e; /* Verde */
}

.timeline-antigo .timeline-marker {
    background-color: #868e96; /* Cinza */
}

.timeline-content {
    background-color: var(--cor-fundo-card, #fff);
    border: 1px solid var(--cor-borda, #e0e0e0) !important;
    border-radius: 0.5rem;
}
#sidebar-wrapper .list-group-item:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-active-color);
    transform: translateX(4px);
}
#sidebar-wrapper .list-group-item.active {
    background: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-color);
    font-weight: 600;
    border-left: 3px solid var(--sidebar-link-active-border);
    padding-left: calc(1rem - 3px);
    box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.05);
}

/* SETINHAS DOS SUBMENUS (CORRIGIDO) */
#sidebar-wrapper .has-submenu::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    transition: transform 0.2s ease-in-out, opacity 0.3s ease;
}
#sidebar-wrapper .has-submenu[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Itens de Submenu */
#sidebar-wrapper .submenu-item {
    padding-left: 2rem;
    font-size: 0.88rem;
    background-color: transparent;
    position: relative;
    border-radius: 0.5rem;
}
#sidebar-wrapper .collapse {
    position: relative;
}
#sidebar-wrapper .collapse::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 5px;
    bottom: 12px;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

/* ================================================ */
/* CSS: A NOVA SIDEBAR INTELIGENTE E COMPACTA (VERSÃO FINAL) */
/* ================================================ */

/* --- ESTILOS DO CONTEÚDO PRINCIPAL --- */
#page-content-wrapper {
    min-width: 100vw;
}

/* Efeito de encolher/expandir a sidebar */
body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: -250px;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
        margin-left: -250px;
    }
}

#sidebarToggle {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    color: #495057;
}

#sidebarToggle:hover {
    background-color: #d3d9df;
}
/* Container geral da página de formulário */
.form-page-container-centered {
    width: 100%;
    max-width: 1100px; /* Largura máxima para o conteúdo do formulário */
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 100px; /* Espaço para a barra de ações no rodapé */
}

/* Wrapper para os cards do formulário */
.form-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espaço entre os cards */
}

/* Espaçamento para cada grupo de campo de formulário */
.modern-form-group {
    margin-bottom: 1rem;
}

/* Barra de ações fixa no rodapé */
.form-actions-footer {
    position: fixed;
    bottom: 0;
    left: 250px; /* Largura da sua sidebar */
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 10px 15px; /* Reduzido para ganhar espaço vertical */
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.form-actions-footer .actions-left,
.form-actions-footer .actions-center,
.form-actions-footer .actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-actions-footer .btn {
    white-space: nowrap; /* Impede que o texto do botão quebre e fique gigante verticalmente */
}

/* Ajuste para telas pequenas onde a sidebar some */
@media (max-width: 1200px) {
    .form-actions-footer {
        justify-content: center;
    }
    .form-actions-footer .btn .btn-text {
        display: none;
    }
    .form-actions-footer .btn i.me-1,
    .form-actions-footer .btn i.me-2 {
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .form-actions-footer {
        left: 0;
        padding: 8px 10px;
        flex-direction: column;
    }
    .form-actions-footer .actions-left,
    .form-actions-footer .actions-center,
    .form-actions-footer .actions-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Adaptação das suas abas para o novo card */
.tabs-list {
    border-bottom: 1px solid #dee2e6;
}
.tab-link {
    background: none;
    border: none;
    padding: 10px 15px;
    border-bottom: 3px solid transparent;
}
.tab-item.active .tab-link {
    border-bottom-color: #667eea;
    color: #667eea;
}

/* Tabela moderna para a lista de imóveis */
.modern-table {
    width: 100%;
    border-collapse: collapse;
}
.modern-table thead th {
    background-color: #f8f9fa; padding: 12px;
    font-weight: 600; color: #495057;
    border-bottom: 2px solid #dee2e6; text-align: left;
}
.modern-table tbody td {
    padding: 12px; border-bottom: 1px solid #f1f3f4;
}
.modern-table tbody tr:last-child td { border-bottom: none; }
.modern-table tbody tr:hover { background-color: #f8f9fa; }

/* Lista de documentos */
.document-list-modern {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-page-container-centered {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 120px; /* Espaço para a barra de ações no rodapé */
}

/* ===================================================== */
/* ESTILOS PARA FORMULÁRIOS MODERNOS (CONTEÚDO)        */
/* ===================================================== */

.main-content-modern {
    padding: 2rem;
}

.page-title-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-title-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.page-title { margin-bottom: 0; }
.page-subtitle { margin-top: 5px; }

/* Para deixar todos os campos do formulário com o estilo do Bootstrap */
.card-body input,
.card-body select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.card-body input:focus,
.card-body select:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* Estilos para a busca instantânea no rodapé */
.footer-search-container {
    position: relative;
    width: 350px;
}

.footer-search-container .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.footer-search-container .form-control {
    padding-left: 40px !important;
}

.search-results-list {
    position: absolute;
    bottom: 100%; /* Posiciona a lista acima do input */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1050; /* Garante que fique acima de outros elementos */
    display: none; /* Começa escondido */
}

.search-results-list a {
    display: block;
    padding: 10px 15px;
    color: #212529;
    text-decoration: none;
    border-bottom: 1px solid #f1f3f4;
}
.search-results-list a:last-child {
    border-bottom: none;
}
.search-results-list a:hover {
    background-color: #f8f9fa;
}
.search-results-list a small {
    display: block;
    color: #6c757d;
}
.search-results-list .no-results {
    padding: 15px;
    color: #6c757d;
    text-align: center;
}

/* 1. AJUSTE: Ícones do Submenu com menos margem */
#sidebar-wrapper .submenu-item i.fa-fw {
    margin-right: 0.75rem !important; /* Diminui o espaço (era me-2 ou 1rem) */
}

/* 2. AJUSTE: Barra de ações acompanha a sidebar */
.form-actions-footer {
    /* Adiciona uma transição suave para a propriedade 'left' */
    transition: left 0.25s ease-out;
}
body.sb-sidenav-compacted .form-actions-footer {
    /* Quando a sidebar estiver compacta, ajusta a posição da barra */
    left: var(--sidebar-width-compact);
}

/* 4. AJUSTE: Aumentar a barra de busca */
.footer-search-container {
    width: 100%;
    max-width: 450px;
}

@media (max-width: 1200px) {
    .footer-search-container {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .footer-search-container {
        max-width: 100%;
    }
}

.actions-center .btn-group .btn {
    background-color: #e9ecef; /* Um cinza um pouco mais escuro que o fundo */
    border-color: #ced4da;     /* Uma borda mais visível */
    color: #495057;            /* Cor do ícone mais escura para contraste */
}

.actions-center .btn-group .btn:hover {
    background-color: #d3d9df; /* Fica ainda mais escuro ao passar o mouse */
    border-color: #b1b9c1;
}

.toast-container {
    z-index: 1100; /* Um valor alto para garantir que fique na frente de tudo */
}

/* ========================================================= */
/* REDESIGN GLOBAL: TABELAS PROFISSIONAIS                  */
/* ========================================================= */
.table-professional {
    border-collapse: collapse;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden; /* Garante que o border-radius funcione na tabela */
    border: 1px solid var(--cor-borda);
}
.table-professional thead th {
    background-color: var(--cor-fundo-principal);
    border-bottom: 2px solid var(--cor-borda);
    padding: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cor-texto-secundario);
    text-align: left;
}
.table-professional tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-card);
}
.table-professional tbody tr:last-child td {
    border-bottom: none;
}
/* Efeito "zebra" para melhor leitura */
.table-professional.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.02);
}
body.dark-mode .table-professional.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02);
}

.table-professional.table-hover tbody tr:hover {
    background-color: var(--sidebar-link-hover-bg);
}

/* ========================================================= */
/* REDESIGN GLOBAL: DROPZONE PROFISSIONAL                  */
/* ========================================================= */
.dropzone-professional {
    border: 2px dashed var(--cor-input-borda);
    border-radius: 0.5rem;
    background: transparent;
    transition: all 0.3s ease;
    padding: 2rem;
}
.dropzone-professional:hover {
    border-color: var(--sidebar-link-active-border);
    background: rgba(13, 110, 253, 0.05); /* Um azul bem sutil */
}
.dropzone-professional .dz-message {
    color: var(--cor-texto-secundario);
    font-weight: 500;
}
.dropzone-professional .dz-message .dz-button {
    color: var(--sidebar-link-active-border);
    font-weight: 600;
}

/* Base para Light Mode + Seta Customizada */
select.form-control,
select.form-select {
    /* Remove a aparência padrão do navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Adiciona nossa seta customizada (SVG cinza escuro) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem; /* Espaço para a seta não sobrepor o texto */
}

.status-select-sm.status-disponivel {
    background-color: #d1e7dd; /* Verde claro do Bootstrap */
    border-color: #a3cfbb;
}
.status-select-sm.status-alugado {
    background-color: #60c065; /* Vermelho claro do Bootstrap */
    border-color: #4b834f;
}
.status-select-sm.status-indisponivel {
    background-color: #ff3b3b; /* Cinza claro do Bootstrap */
    border-color: #a12020;
}

/* =============================================== */
/* ESTILOS MODERNOS PARA DROPZONE E LISTA DE DOCS  */
/* =============================================== */

.dropzone-professional {
    border: 2px dashed #dee2e6;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    transition: background-color 0.2s ease-in-out;
}

.dropzone-professional:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.document-list-modern .list-group-item {
    border-left: 4px solid #0d6efd; /* Borda azul para destaque */
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.document-list-modern .list-group-item:hover {
    background-color: #f8f9fa;
}

.document-list-modern a {
    text-decoration: none;
    font-weight: 500;
}

.document-list-modern small {
    font-size: 0.8em;
}

/* ========================================================== */
/* ESTILOS MODERNOS PARA ITENS DE DOCUMENTO                     */
/* ========================================================== */

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espaçamento entre os elementos */
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem !important;
    border: 1px solid #dee2e6;
    border-left: 4px solid #0d6efd; /* Borda azul para destaque */
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
}

.document-item:hover {
    background-color: #f8f9fa;
}

.document-icon {
    font-size: 2rem; /* Tamanho grande para o ícone */
}

.document-info {
    flex-grow: 1; /* Faz esta div ocupar todo o espaço restante */
}

.document-info .document-name {
    font-weight: 600;
    color: #212529;
    text-decoration: none;
}

.document-info .document-name:hover {
    text-decoration: underline;
}

.document-info .document-date {
    font-size: 0.8rem;
    color: #6c757d;
    display: block; /* Para que fique abaixo do nome */
}

/* ========================================================= */
/* REDESIGN GLOBAL: LISTA DE DOCUMENTOS PROFISSIONAL       */
/* ========================================================= */

.document-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: transparent;
    border: 1px solid var(--cor-borda);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
}
.document-item:hover {
    background-color: rgba(0,0,0,0.03);
}
body.dark-mode .document-item:hover {
    background-color: rgba(255,255,255,0.05);
}

.document-icon {
    font-size: 1.5rem;
    color: var(--cor-texto-secundario);
    margin-right: 1rem;
}
.document-icon .fa-file-pdf { color: #e74c3c; }
.document-icon .fa-file-image { color: #3498db; }

.document-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.document-name {
    font-weight: 500;
    color: var(--cor-texto-principal);
    text-decoration: none;
}
.document-name:hover {
    text-decoration: underline;
}
.document-date {
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
}

.document-delete-btn {
    color: var(--cor-texto-secundario);
    background-color: transparent;
    border: none;
    transition: all 0.2s ease;
}
.document-delete-btn:hover {
    color: #e74c3c; /* Vermelho perigo */
    background-color: rgba(231, 76, 60, 0.1);
    transform: scale(1.1);
}

/* Esconde o checkbox 'DELETE' do formset de proprietários */
.propri-row input[type="checkbox"][name$="-DELETE"] {
    display: none;
}

/* ======================================================================== */
/* CSS FINAL E POLIDO PARA O FULLCALENDAR */
/* ======================================================================== */

/* A moldura geral do calendário */
#calendario-card {
    background-color: #ffffff;
    border: 0px solid #e9ecef;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

#calendario-container .fc {
    border: none !important; /* Garante que nenhuma borda interna apareça */
    font-family: 'Inter', sans-serif;
}

#calendario-container .fc,
#calendario-container th,
#calendario-container .fc th,
#calendario-container .fc-scrollgrid,
.fc-theme-standard td,
#calendario-container .fc-daygrid-day {
    border: none !important;
}

/* O cabeçalho vermelho */
#calendario-container .fc-header-toolbar {
    background-color: #e53935;
    color: white;
    padding: 0.8rem 1rem;
    margin: 0 !important;
}

/* Título (Mês e Ano) com o ícone */
#calendario-container .fc-toolbar-title {
    color: white;
    font-size: 1.4em;
    font-weight: 600;
    display: flex;
    align-items: center;
}
#calendario-container .fc-toolbar-title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f073"; /* Ícone do calendário */
    margin-right: 10px;
    font-size: 1em;
}

/* Botões de navegação */
#calendario-container .fc-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    transition: background-color 0.2s;
}
#calendario-container .fc-button:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}
#calendario-container .fc-icon {
    color: white;
}
#calendario-container .fc-toolbar-chunk:last-child {
    display: flex;
    gap: 5px;
}

/* Dias da semana (DOM, SEG...) */
#calendario-container .fc-col-header-cell-cushion {
    text-decoration: none;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.8em;
    padding-bottom: 10px;
}

/* Grelha dos dias */
#calendario-container .fc-daygrid-day-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px; /* Garante uma altura mínima para cada dia */
}

/* Número do dia */
#calendario-container .fc-daygrid-day-number {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    width: 30px;
    height: 30px;
    line-height: 20px; /* Alinha o número verticalmente */
    text-align: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

/* Dia de Hoje */
#calendario-container .fc-day-today {
    background: none !important;
}
#calendario-container .fc-day-today .fc-daygrid-day-number {
    background-color: #2c3e50;
    color: white;
}

/* Dias de outros meses */
#calendario-container .fc-day-other {
    opacity: 0.35;
}

/* Esconde o elemento de evento padrão do FullCalendar */
#calendario-container .fc-daygrid-event-harness {
    display: none !important;
}
.fc-theme-standard .fc-scrollgrid{
    border: 0px;
}
.custom-alert-icon {
    font-size: 0.7em; /* Controla o tamanho geral do ícone */
    vertical-align: middle; /* Alinha o ícone verticalmente com o texto */
}

    /* Estilos da página, como body, page-container, etc, permanecem os mesmos */
    body { background-color: #f8f9fa; }
    .page-container {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 30px;
        padding: 25px;
        max-width: 1600px;
        margin: auto;
    }
    .main-column h1 { font-weight: 700; color: #343a40; }
    .main-column p { color: #6c757d; font-size: 1.1rem; }

    .pagamento-card {
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-left: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.07);
        display: flex;
        overflow: hidden;
        margin-bottom: 20px;
        transition: all 0.2s ease-in-out;
    }
    .pagamento-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    .status-bar { width: 8px; flex-shrink: 0; }
    .card-main-content {
        padding: 20px;
        flex-grow: 1;
        display: grid;
        grid-template-areas: "header valor" "details details" "form form" "footer footer";
        grid-template-columns: 1fr auto;
        gap: 15px;
    }
    .card-header-info { grid-area: header; }
    .card-valor { grid-area: valor; text-align: right; }
    .card-details { grid-area: details; }
    .card-form { grid-area: form; }
    .card-footer-actions { grid-area: footer; }
    .card-header-info .titulo { font-size: 1.1rem; font-weight: 600; color: #212529; margin: 0; display: flex; align-items: center; }
    .card-header-info .subtitulo { font-size: 0.85rem; color: #6c757d; margin: 0; }
    .card-valor .valor { font-size: 1.5rem; font-weight: 700; color: #343a40; }
    .card-valor .status-badge { font-size: 0.75rem; font-weight: 500; }
    .card-details p { margin: 0; font-size: 0.9rem; display: flex; align-items: center; }
    .card-details .data { color: #6c757d; }
    .card-form {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        border: 1px solid #e9ecef;
    }
    .sidebar-column { position: sticky; top: 20px; }
    .summary-card, .filters-card {
        background-color: #fff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.07);
        margin-bottom: 25px;
    }
    .summary-card h4, .filters-card h4 {
        margin-top: 0; margin-bottom: 20px; font-weight: 600; color: #495057;
        border-bottom: 1px solid #dee2e6; padding-bottom: 10px;
    }

    /* === ESTILOS CORRIGIDOS E NOVOS === */
    .btn-pagar-custom {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
    }
    .btn-salvar-custom { /* Botão Outline, mais elegante */
        background-color: transparent;
        border: 1px solid #764ba2;
        color: #764ba2;
    }
    .btn-salvar-custom:hover {
        background-color: #764ba2;
        color: white;
    }
    .btn-ver-detalhes {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        margin-left: 10px !important;
        vertical-align: middle;
        padding: 2px 8px !important; /* Tamanho menor */
        border-radius: 5px !important;
        background-color: #e9ecef !important;
        border: 1px solid #dee2e6 !important;
        color: #495057 !important;
    }
    .btn-ver-detalhes:hover {
        background-color: #dee2e6 !important;
    }
    .modal-header-custom {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .table-hover tbody tr:hover {
        background-color: #f1f3f5;
    }
    
    @media (max-width: 1200px) {
        .page-container { grid-template-columns: 1fr; }
        .sidebar-column { position: static; }
    }
    @media (max-width: 768px) {
        .card-main-content { grid-template-areas: "header" "valor" "details" "form" "footer"; grid-template-columns: 1fr; }
        .card-valor { text-align: left; }
    }
        body { background-color: #f8f9fa; }
    .page-container {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 30px;
        padding: 25px;
        max-width: 1600px;
        margin: auto;
    }
    .main-column h1 { font-weight: 700; color: #343a40; }
    .main-column p { color: #6c757d; font-size: 1.1rem; }
    /* ... (outros estilos base que já tínhamos) ... */
    .pagamento-card {
        background-color: #fff; border: 1px solid #dee2e6; border-left: none;
        border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.07);
        display: flex; overflow: hidden; margin-bottom: 20px;
        transition: all 0.2s ease-in-out;
    }
    .pagamento-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    .status-bar { width: 8px; flex-shrink: 0; }
    .card-main-content { padding: 20px; flex-grow: 1; display: grid; grid-template-areas: "header valor" "details details" "form form" "footer footer"; grid-template-columns: 1fr auto; gap: 15px; }
    .card-header-info { grid-area: header; }
    .card-valor { grid-area: valor; text-align: right; }
    .card-details { grid-area: details; }
    .card-form { grid-area: form; }
    .card-footer-actions { grid-area: footer; }
    .card-header-info .titulo { font-size: 1.1rem; font-weight: 600; color: #212529; margin: 0; display: flex; align-items: center; }
    .card-header-info .subtitulo { font-size: 0.85rem; color: #6c757d; margin: 0; }
    .card-valor .valor { font-size: 1.5rem; font-weight: 700; color: #343a40; }
    .card-valor .status-badge { font-size: 0.75rem; font-weight: 500; }
    .card-details p { margin: 0; font-size: 0.9rem; display: flex; align-items: center; }
    .card-details .data { color: #6c757d; }
    .card-form { background-color: #f8f9fa; border-radius: 8px; padding: 15px; border: 1px solid #e9ecef; }
    .sidebar-column { position: sticky; top: 20px; }
    .summary-card, .filters-card {
        background-color: #fff; border-radius: 10px; padding: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.07); margin-bottom: 25px;
    }
    .summary-card h4, .filters-card h4 {
        margin-top: 0; margin-bottom: 20px; font-weight: 600; color: #495057;
        border-bottom: 1px solid #dee2e6; padding-bottom: 10px;
    }

    /* === NOVOS ESTILOS PARA BOTÕES DE AÇÃO NA SIDEBAR === */
    .btn-gerar-contas {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        border: none;
        color: white;
    }
    .btn-nova-conta {
        background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
        border: none;
        color: white;
    }
    .btn-pagar-custom { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; }
    .btn-salvar-custom { background-color: transparent; border: 1px solid #764ba2; color: #764ba2; }
    .btn-salvar-custom:hover { background-color: #764ba2; color: white; }
    .btn-ver-detalhes { font-size: 0.8rem !important; font-weight: 600 !important; margin-left: 10px !important; vertical-align: middle; padding: 2px 8px !important; border-radius: 5px !important; background-color: #e9ecef !important; border: 1px solid #dee2e6 !important; color: #495057 !important; text-decoration: none !important; }
    .btn-ver-detalhes:hover { background-color: #dee2e6 !important; }
    .modal-header-custom { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
    .table-hover tbody tr:hover { background-color: #f1f3f5; }
    
    @media (max-width: 1200px) { .page-container { grid-template-columns: 1fr; } .sidebar-column { position: static; } }
    @media (max-width: 768px) { .card-main-content { grid-template-areas: "header" "valor" "details" "form" "footer"; grid-template-columns: 1fr; } .card-valor { text-align: left; } }


    /* ==================================================================== */
/* === DESIGN MODERNO E UNIFICADO PARA MODAIS === */
/* ==================================================================== */

/* --- Estilo Base (Light Mode) --- */
.modal-moderno .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.modal-moderno .modal-header {
    border-bottom: none;
    padding: 1.25rem 1.5rem;
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.modal-moderno .modal-header .modal-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.modal-moderno .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Deixa o X branco */
    box-shadow: none !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.modal-moderno .modal-header .btn-close:hover {
    opacity: 1;
}
.modal-moderno .modal-body {
    padding: 1.5rem;
}
.modal-moderno .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.modal-moderno .form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

/* --- Cores Específicas dos Cabeçalhos --- */
.modal-moderno .header-primary { background-color: #0d6efd; } /* Azul para "Criar Conta" */
.modal-moderno .header-info { background-color: #0dcaf0; } /* Ciano para "Manutenção" */
.modal-moderno .header-secondary { background-color: #6c757d; } /* Cinza para "Gerenciar Tipos" */

/* --- Estilo Base (Light Mode) --- */
.modal-moderno .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #fff; /* Fundo padrão para light mode */
}
.modal-moderno .modal-header {
    border-bottom: none;
    padding: 1.25rem 1.5rem;
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.modal-moderno .modal-header .modal-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.modal-moderno .modal-header .close { /* Para o botão 'x' antigo */
    opacity: 0.8;
    text-shadow: none;
    font-size: 1.5rem;
}
.modal-moderno .modal-header .close:hover {
    opacity: 1;
}
.modal-moderno .modal-body {
    padding: 1.5rem;
}
.modal-moderno .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.modal-moderno .form-group {
    margin-bottom: 1rem;
}
.modal-moderno .form-group label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

/* --- Cores Específicas dos Cabeçalhos --- */
.modal-moderno .deposito-header { background-color: #198754; } /* Verde para Registrar Pagamento */
.modal-moderno .sugestao-header { background-color: #fd7e14; } /* Laranja para Sugestões */

.cheque-logo-container {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f1f1f1;
    border: 1px solid #e9ecef;
    overflow: hidden; /* Garante que a imagem fique contida no círculo */
}
.cheque-logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cheque-logo-container i {
    color: #adb5bd;
}

    :root {
        --cor-fundo-pagina: #f8f9fa;
        --cor-fundo-card: #ffffff;
        --cor-texto-primario: #212529;
        --cor-texto-secundario: #6c757d;
        --cor-borda: #e9ecef;
        --cor-primaria: #0d6efd;
        --cor-sucesso: #198754;
        --cor-perigo: #dc3545;
    }
    body.dark-mode {
        --cor-fundo-pagina: #161922;
        --cor-fundo-card: #202940;
        --cor-texto-primario: #e9ecef;
        --cor-texto-secundario: #adb5bd;
        --cor-borda: #323a54;
    }
    
    body.dark-mode {
    --cor-fundo-pagina: #161922;
    --cor-fundo-card: #202940;
    --cor-texto-primario: #e9ecef;
    --cor-texto-secundario: #adb5bd;
    --cor-borda: #323a54;
    }
    
    .extrato-header { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; }
    .header-info { display: flex; align-items: center; flex-grow: 1; }
    .bank-logo-large { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cor-fundo-card); margin-right: 1rem; border: 1px solid var(--cor-borda); }
    .bank-logo-large img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
    .bank-logo-large i { font-size: 1.5rem; color: var(--cor-texto-secundario); }
    .extrato-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; color: var(--cor-texto-primario); }
    .extrato-header p { margin: 0; color: var(--cor-texto-secundario); }
    .header-saldo { text-align: right; }
    .header-saldo small { font-size: 0.8rem; text-transform: uppercase; color: var(--cor-texto-secundario); font-weight: 500; }
    .header-saldo strong { font-size: 2rem; font-weight: 700; }
    .header-actions .btn { border-radius: 50%; width: 40px; height: 40px; }

    /* Card da Tabela */
    .extrato-card { background-color: var(--cor-fundo-card); border-radius: 0.75rem; border: 1px solid var(--cor-borda); box-shadow: 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.07); }
    .table-extrato-v2 { color: var(--cor-texto-primario); margin-bottom: 0; }
    .table-extrato-v2 thead th { border-bottom: 2px solid var(--cor-borda); color: var(--cor-texto-secundario); font-size: 0.75rem; text-transform: uppercase; font-weight: 600; padding: 1rem; }
    .table-extrato-v2 tbody tr:hover { background-color: var(--cor-fundo-pagina); }
    .table-extrato-v2 td { vertical-align: middle; padding: 0.75rem 1rem; border-top: 1px solid var(--cor-borda); }
    
    /* Coluna Data (centralizada) */
    .table-extrato-v2 th:first-child, .table-extrato-v2 td:first-child { text-align: center; }
    .date-cell { display: flex; flex-direction: column; text-align: center; line-height: 1.2; }
    .date-cell strong { font-size: 1rem; font-weight: 600; color: var(--cor-texto-primario); }
    .date-cell span { font-size: 0.8rem; text-transform: uppercase; color: var(--cor-texto-secundario); }
    
    /* Coluna Descrição (ícones visíveis) */
    .icon-cell { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 1rem; color: #fff !important; }
    .icon-cell.receita { background-color: var(--cor-sucesso); }
    .icon-cell.despesa, .icon-cell.cheque { background-color: var(--cor-perigo); }
    .descricao-principal { font-weight: 500; color: var(--cor-texto-primario); }

    /* Coluna Categoria */
    .badge-categoria { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.6rem; border-radius: 20px; }
    .badge-categoria-none { font-style: italic; color: var(--cor-texto-secundario); }
    
    /* Coluna Valor (cores corrigidas) */
    .valor-cell { font-weight: 600; font-size: 0.9rem; }
    .valor-cell.receita { color: var(--cor-sucesso) !important; }
    .valor-cell.despesa { color: var(--cor-perigo) !important; }
    .saldo-cell { color: var(--cor-texto-secundario); font-weight: 500; }
    
    /* Ações */
    .action-icon-btn { background-color: transparent; border: none; color: var(--cor-texto-secundario); }

    /* Botões Flutuantes (FAB) */
    .fab-container { position: fixed; bottom: 30px; right: 30px; z-index: 100; }
    .fab-options { display: flex; flex-direction: column; align-items: center; gap: 1rem; position: absolute; bottom: 50px; right: 0; visibility: hidden; opacity: 0; transition: all 0.3s ease; transform: translateY(10px); }
    .fab-main.active + .fab-options { visibility: visible; opacity: 1; transform: translateY(0); }
    .fab-option { width: 48px; height: 48px; background-color: #343a40; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s; }
    .fab-option:hover { transform: scale(1.1); }
    
    /* Cabeçalho */
    .extrato-header { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; }
    .header-info { display: flex; align-items: center; flex-grow: 1; }
    /* ... (outros estilos do header que já estão bons) ... */
    .header-saldo { text-align: right; margin-left: auto; /* Joga o saldo para a direita */ }
    
    /* Tabela e Conteúdo */

    /* CORREÇÃO 1: ÍCONES REDONDOS E NÃO ACHATADOS */
    .icon-cell { 
        width: 32px; height: 32px; 
        flex-shrink: 0; /* Impede que o ícone seja espremido */
        display: flex; align-items: center; justify-content: center; 
        border-radius: 50%; margin-right: 1rem; color: #fff !important; 
    }
    .icon-cell.receita { background-color: var(--cor-sucesso); }
    .icon-cell.despesa, .icon-cell.cheque { background-color: var(--cor-perigo); }

    /* O resto do estilo da tabela (cores de valor, data, etc.) que já funciona */
    .valor-cell.receita { color: var(--cor-sucesso) !important; }
    .valor-cell.despesa { color: var(--cor-perigo) !important; }
    /* ... etc ... */

    /* CORREÇÃO 2: BOTÃO FLUTUANTE (FAB) COM ANIMAÇÃO */
    .fab-container { position: fixed; bottom: 30px; right: 30px; z-index: 100; display: flex; flex-direction: column; align-items: center; }
    .fab-main {
        width: 56px; height: 56px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        cursor: pointer;
        transition: transform 0.3s ease;
        z-index: 2; /* Garante que fique sobre as opções */
    }
    .fab-main i { transition: transform 0.3s ease; }
    .fab-main.active i { transform: rotate(45deg); } /* Animação de rotação */

    .fab-options {
        display: flex; flex-direction: column; align-items: center; gap: 1rem;
        position: absolute;
        bottom: 70px;
        visibility: hidden; opacity: 0;
        transition: all 0.3s ease;
        transform: translateY(10px);
    }
    .fab-main.active + .fab-options { visibility: visible; opacity: 1; transform: translateY(0); }
    .fab-option { 
        width: 48px; height: 48px; 
        background-color: var(--cor-fundo-card);
        color: var(--cor-texto-secundario);
        border: 1px solid var(--cor-borda);
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s;
    }
    .fab-option:hover { transform: scale(1.1); background-color: var(--cor-primaria); color: #fff; }
    /* === CORREÇÃO FINAL: BOTÃO FLUTUANTE (FAB) COM ANIMAÇÃO === */
.fab-container { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 1050; /* Z-index alto para ficar sobre tudo */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.fab-main {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 2;
}
.fab-main i { 
    transition: transform 0.3s ease; 
}
.fab-main.active i { 
    transform: rotate(45deg); /* Animação de rotação */
}

.fab-options {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    position: absolute;
    bottom: 70px; /* Posição inicial acima do botão principal */
    visibility: hidden; 
    opacity: 0;
    transition: all 0.2s ease-out; /* Animação de aparição */
    transform: translateY(10px);
}

/* ESTA É A REGRA CORRIGIDA QUE FAZ A MÁGICA ACONTECER */
.fab-options.show { 
    visibility: visible; 
    opacity: 1; 
    transform: translateY(0);
}

.fab-option { 
    width: 48px; height: 48px; 
    background-color: var(--cor-fundo-card);
    color: var(--cor-texto-secundario);
    border: 1px solid var(--cor-borda);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s;
}
.fab-option:hover { 
    transform: scale(1.1); 
    background-color: var(--cor-primaria); 
    color: #fff;
    border-color: var(--cor-primaria);
}

.icon-cell.cheque{
    background-color: #0d6efd;
}

/* === BOTÃO FLUTUANTE (FAB) - VERSÃO FINAL CORRIGIDA === */
.fab-container { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 1050;
    display: flex; 
    flex-direction: column-reverse; /* Empilha as opções ACIMA do botão */
    align-items: center; 
    gap: 1rem;
}

.fab-main {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}
.fab-main i { 
    transition: transform 0.3s ease; 
}
.fab-main.active i { 
    transform: rotate(45deg); /* Animação de rotação */
}

.fab-options {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.5) translateY(50px); /* Começa pequeno e abaixo */
    opacity: 0;
    visibility: hidden;
}

/* REGRA CORRIGIDA: Usa a classe .active no container para mostrar as opções */
.fab-container:has(.fab-main.active) .fab-options {
    visibility: visible; 
    opacity: 1; 
    transform: scale(1) translateY(0); /* Anima para o tamanho e posição final */
}

.fab-option { 
    width: 48px; height: 48px; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s;
    background-color: var(--cor-fundo-card);
    color: var(--cor-texto-secundario);
    border: 1px solid var(--cor-borda);
}
.fab-option i { font-size: 1.1rem; }
.fab-deposito { color: var(--cor-sucesso); }
.fab-pagamento { color: var(--cor-perigo); }
.fab-cheque { color: var(--cor-texto-secundario); }
.fab-deposito:hover { background-color: var(--cor-sucesso); color: #fff; border-color: var(--cor-sucesso); }
.fab-pagamento:hover { background-color: var(--cor-perigo); color: #fff; border-color: var(--cor-perigo); }
.fab-cheque:hover { background-color: var(--cor-texto-secundario); color: #fff; border-color: var(--cor-texto-secundario); }
.desc-multiline {
    display: flex;
    flex-direction: column;
}
.desc-line-1 {
    font-weight: 500;
    color: var(--cor-texto-secundario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px; /* Ajuste a largura máxima conforme necessário */
}
.desc-line-2 {
    font-weight: 600;
    color: var(--cor-texto-primario);
}
.sugestao-link-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: #0d6efd;
    background-color: #e3f2fd;
    border: 1px solid #bde0fe;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sugestao-link-badge:hover {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}
body.dark-mode .sugestao-link-badge {
    background-color: rgba(13, 110, 253, 0.2);
    border-color: rgba(13, 110, 253, 0.4);
    color: #6ea8fe;
}
body.dark-mode .sugestao-link-badge:hover {
    background-color: #0d6efd;
    color: #fff;
}
body.dark-mode .table {
    --bs-table-bg: transparent; /* Remove o fundo branco padrão do bootstrap */
    --bs-table-color: var(--cor-texto-primario);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05); /* Um cinza translúcido para o hover */
    --bs-table-hover-color: var(--cor-texto-primario);
}
    .header-sugestao {
        background-color: #f39c12; /* Laranja do seu dashboard */
        color: #fff;
    }
/* --- Botões de Ação Circulares (Editar, Excluir, etc.) --- */
.action-buttons-group {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.btn-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    color: #fff !important; /* Garante que o ícone seja branco */
    text-decoration: none; /* Remove sublinhado se for um link */
}

.btn-action-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-action-icon.primary { background-color: #0d6efd; }
.btn-action-icon.success { background-color: #198754; }
.btn-action-icon.danger { background-color: #dc3545; }
.btn-action-icon.warning { background-color: #ffc107; }

/* --- Badges de Status (Emitido, Compensado, etc.) --- */
.status-badge {
    padding: 0.25em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem; /* pill shape */
}

.status-badge.status-secondary { background-color: #6c757d; }
.status-badge.status-warning { background-color: #ffc107; color: #212529; }
.status-badge.status-success { background-color: #198754; }
.status-badge.status-danger { background-color: #dc3545; }

/* --- Badge de Vencido (usado na lista de cheques) --- */
.vencido-badge {
    font-size: 0.7rem;
    font-weight: bold;
    color: #dc3545;
    margin-top: 4px;
    display: inline-block;
}
.vencido-badge i {
    margin-right: 4px;
}
.btn-add {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(118, 75, 162, 0.3);
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(118, 75, 162, 0.4);
    color: #fff;
}

/* ESTILOS PARA O MODAL COM IFRAME */
.modal-iframe {
    /* CORRIGIDO: O modal DEVE começar escondido */
    display: none; 

    /* O JavaScript mudará para 'flex' para exibi-lo */
    align-items: center;
    justify-content: center;
    
    position: fixed; /* Posição sobre toda a tela */
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escurecido */
    padding: 1rem; /* Espaçamento das bordas da tela */
    overflow-y: auto; /* Adiciona scroll se a tela for muito pequena */
}

.modal-iframe-content {
    background-color: #fefefe; /* Fundo padrão, será sobrescrito pelo tema no iframe */
    width: 100%;
    max-width: 1200px;
    
    /* Removemos altura fixa ou máxima para deixar o JS controlar */
    
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    
    /* Permite que o iframe cresça e preencha o espaço */
    display: flex;
    flex-direction: column;
    
    /* Importante: permite que o conteúdo encolha se necessário, sem quebrar o layout */
    min-height: 0; 
}

.modal-iframe-header {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    flex-shrink: 0; /* Impede que o cabeçalho encolha */
}

.modal-iframe-body {
    flex-grow: 1; /* Ocupa todo o espaço restante */
    padding: 0;
    overflow: hidden; /* Garante que o iframe respeite as bordas */
    
    /* Importante para o iframe se ajustar */
    display: flex;
    flex-direction: column;
}

#iframe-edicao-recibo {
    width: 100%;
    flex-grow: 1; /* Faz o iframe crescer para preencher o body do modal */
    border: none;
    transition: height 0.3s ease-in-out; /* Animação suave da altura */
}

.close-iframe {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-iframe:hover,
.close-iframe:focus {
    color: #f1f1f1;
    text-decoration: none;
    cursor: pointer;
}

.modal-iframe-body {
    flex-grow: 1; /* Ocupa todo o espaço restante */
    padding: 0;
    overflow: hidden;
}

#iframe-edicao-recibo {
    width: 100%;
    height: 100%;
    border: none;
}

.progressbar .step.active i {
    background: var(--wizard-primary);
    color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.1); /* círculo externo */
}

    /* Por padrão, o badge do submenu (expandido) fica escondido */
    .badge-secretaria-expanded {
        display: none;
    }

    /* QUANDO O MENU ESTÁ EXPANDIDO... */
    /* O link do menu perde a classe '.collapsed' */
    
    /* 1. Esconde o badge principal (do lado de 'Secretária') */
    a[href="#submenu-secretaria"]:not(.collapsed) .badge-secretaria-collapsed {
        display: none;
    }

    /* 2. Mostra o badge do submenu (do lado de 'Novas fichas') */
    #submenu-secretaria.show .badge-secretaria-expanded {
        display: inline-block;
    }






















/* ========================================================= */
/* CSS: DARK MODE             */
/* ========================================================= */



body.dark-mode .form-label {
    color: var(--cor-texto-secundario);
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--cor-input-fundo);
    border-color: var(--cor-input-borda);
    color: var(--cor-texto-principal);
}

body.dark-mode .form-control:disabled {
    background-color: #2a2a2a; /* Um pouco diferente do fundo para dar contraste */
    opacity: 0.7;
}

body.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body.dark-mode .form-actions-footer {
    background-color: var(--cor-fundo-card);
    border-top-color: var(--cor-borda);
}

body.dark-mode .actions-center .btn-light {
    background-color: #343a40;
    border-color: #495057;
    color: var(--cor-texto-principal);
}
body.dark-mode .actions-center .btn-light:hover {
    background-color: #495057;
    border-color: #6c757d;
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--cor-texto-secundario);
    border-bottom-color: transparent;
}
body.dark-mode .nav-tabs .nav-link.active {
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-card);
    border-color: var(--cor-borda) var(--cor-borda) var(--cor-fundo-card);
}

body.dark-mode .card-title,
body.dark-mode h5,
body.dark-mode .page-subtitle {
    color: var(--cor-texto-secundario);
}
body.dark-mode .card-title {
    border-bottom-color: var(--cor-borda);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="date"],
body.dark-mode input[type="number"],
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--cor-input-fundo) !important;
    border-color: var(--cor-input-borda) !important;
    color: var(--cor-texto-principal) !important;
}

body.dark-mode .dropzone {
    background: var(--cor-input-fundo);
    border-color: var(--cor-input-borda);
}
body.dark-mode .dropzone .dz-message {
    color: var(--cor-texto-secundario);
}

body.dark-mode .text-muted {
    color: var(--cor-texto-secundario) !important;
}
body.dark-mode .text-muted i {
    color: var(--cor-texto-secundario);
}

body.dark-mode .table {
    color: var(--cor-texto-principal);
    border-color: var(--cor-borda);
}
body.dark-mode .table thead th {
    background-color: #343a40;
}
body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--cor-texto-principal);
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode select.form-control,
body.dark-mode select.form-select {
    /* Força as cores do nosso tema escuro */
    background-color: var(--cor-input-fundo) !important;
    border-color: var(--cor-input-borda) !important;
    color: var(--cor-texto-principal) !important;

    /* Troca a seta para uma versão cinza claro */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Ajustes para o modo escuro (opcional, mas recomendado) */
body.dark-mode .document-item {
    background-color: #343a40;
    border-color: #495057;
    border-left-color: #4dabf7;
}
body.dark-mode .document-item:hover {
    background-color: #495057;
}
body.dark-mode .document-info .document-name {
    color: #f8f9fa;
}
body.dark-mode .document-info .document-date {
    color: #adb5bd;
}

/* Fundo principal do dashboard */
body.dark-mode .dashboard-container {
    background-color: var(--cor-fundo-principal);
}

/* Título "Dashboard Financeiro" e "Painel de Gestão" */
body.dark-mode .dashboard-container h1,
body.dark-mode .main-content-col h2 {
    color: var(--cor-texto-principal);
}

/* Cards de KPI (Saldo, A Receber, etc.) */
body.dark-mode .kpi-card {
    background-color: var(--cor-fundo-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
body.dark-mode .kpi-card__info .title {
    color: var(--cor-texto-secundario);
}
body.dark-mode .kpi-card__info .value {
    color: var(--cor-texto-principal);
}
body.dark-mode .kpi-card__info .sub-value {
    color: var(--cor-texto-secundario);
}

/* Novos Cards de Pagamento */
body.dark-mode .pagamento-card-novo {
    background-color: var(--cor-fundo-card);
    border-color: var(--cor-borda);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
body.dark-mode .pagamento-card-novo:hover {
    background-color: #3a3a3a; /* Um pouco mais claro no hover */
}
body.dark-mode .info-texto h6 {
    color: var(--cor-texto-principal);
}
body.dark-mode .valor-principal h5 {
    color: var(--cor-texto-principal);
}
body.dark-mode .status-pendente {
    color: #adb5bd; /* Cinza claro */
}
body.dark-mode .status-pago {
    color: #20c997; /* Verde-água */
}
body.dark-mode .acoes-principal .btn-light {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}
body.dark-mode .acoes-principal .btn-light:hover {
    background-color: #6c757d;
}

/* Formulário de edição dentro do card */
body.dark-mode .card-form-edit {
    background-color: var(--cor-fundo-principal); /* Fundo um pouco mais escuro */
    border-top-color: var(--cor-borda);
}
body.dark-mode .form-actions-edit .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* Módulos da Barra Lateral (Avisos, Contas, Resumo) */
body.dark-mode .summary-module,
body.dark-mode .filters-card {
    background-color: var(--cor-fundo-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
body.dark-mode .summary-module h3,
body.dark-mode .filters-card h4 {
    color: var(--cor-texto-principal);
    border-bottom-color: var(--cor-borda);
}
body.dark-mode .lista-simples-item {
    border-bottom-color: var(--cor-borda);
}
body.dark-mode .lista-simples-item .info .nome {
    color: var(--cor-texto-principal);
}
body.dark-mode .lista-simples-item .info .sub {
    color: var(--cor-texto-secundario);
}
body.dark-mode .lista-simples-item .valor {
    color: var(--cor-texto-principal);
}
body.dark-mode .alerta-maximo-card {
    background-color: rgba(211, 47, 47, 0.1); /* Fundo vermelho translúcido */
    border-left-color: #d32f2f;
}
body.dark-mode .alerta-card__header strong {
    color: var(--cor-texto-principal);
}
body.dark-mode .mensagem_alerta {
    color: var(--cor-texto-secundario);
}
body.dark-mode .summary-card span {
    color: var(--cor-texto-secundario);
}
body.dark-mode .summary-card .summary-value {
    color: var(--cor-texto-principal);
}

/* Calendário */
body.dark-mode #calendario-card {
    background-color: var(--cor-fundo-card) !important;
}
body.dark-mode .fc .fc-toolbar-title {
    color: var(--cor-texto-principal);
}
body.dark-mode .fc .fc-daygrid-day-number {
    color: var(--cor-texto-secundario);
}
body.dark-mode .fc .fc-col-header-cell-cushion {
    color: var(--cor-texto-secundario);
}
body.dark-mode .fc-theme-standard td, 
body.dark-mode .fc-theme-standard th {
    border-color: var(--cor-borda);
}
body.dark-mode .fc-day-today {
    background-color: rgba(0, 123, 255, 0.15) !important;
}

/* Select2 */
body.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #3a3a3a;
    border-color: var(--cor-borda);
}
body.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #007bff;
    color: white;
}
body.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: var(--cor-texto-principal);
}
body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--cor-input-fundo);
    border-color: var(--cor-input-borda);
    color: var(--cor-texto-principal);
}

/* O alvo principal: o container com a "moldura branca" */
body.dark-mode .main-content-modern .dashboard-container {
    background-color: var(--cor-fundo-principal) !important; /* Força a cor de fundo */
}

/* Garante que o fundo do body também esteja escuro */
body.dark-mode {
    background-color: var(--cor-fundo-principal);
}

/* Títulos "Dashboard Financeiro" e "Painel de Gestão" */
body.dark-mode .dashboard-container h1,
body.dark-mode .main-content-col h2 {
    color: var(--cor-texto-principal);
}

/* Cards de KPI (Saldo, A Receber, etc.) */
body.dark-mode .kpi-card {
    background-color: var(--cor-fundo-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-color: var(--cor-borda) !important;
}
body.dark-mode .kpi-card__info .title {
    color: var(--cor-texto-secundario);
}
body.dark-mode .kpi-card__info .value {
    color: var(--cor-texto-principal);
}
body.dark-mode .kpi-card__info .sub-value {
    color: var(--cor-texto-secundario);
}

/* Cards de Pagamento */
body.dark-mode .pagamento-card-novo {
    background-color: var(--cor-fundo-card);
    border-color: var(--cor-borda);
}

/* Módulos da Barra Lateral (Avisos, Contas, Resumo) */
body.dark-mode .summary-module,
body.dark-mode .filters-card {
    background-color: var(--cor-fundo-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
body.dark-mode .summary-module h3,
body.dark-mode .filters-card h4 {
    color: var(--cor-texto-principal);
    border-bottom-color: var(--cor-borda);
}

/* Calendário - Correção dos dias da semana */
body.dark-mode .fc .fc-col-header-cell-cushion { /* Alvo: texto 'dom, seg, ter...' */
    color: var(--cor-texto-secundario) !important;
}

/* Manter outras regras do calendário que já funcionam */
body.dark-mode .fc .fc-toolbar-title {
    color: var(--cor-texto-principal);
}
body.dark-mode .fc .fc-daygrid-day-number {
    color: var(--cor-texto-secundario);
}
body.dark-mode .fc-theme-standard td, 
body.dark-mode .fc-theme-standard th {
    border-color: var(--cor-borda);
}
body.dark-mode .fc-theme-standard th {
    background-color: var(--cor-fundo-card); /* Usa a mesma cor de fundo dos cards */
}

body.dark-mode .alert-slider-wrapper .swiper-button-prev,
body.dark-mode .alert-slider-wrapper .swiper-button-next {
    background-color: #495057; /* Um cinza escuro do tema */
    color: #f8f9fa; /* Cor do ícone da seta (branco) */
    border-color: var(--cor-borda);
}

body.dark-mode .alert-slider-wrapper .swiper-button-prev:hover,
body.dark-mode .alert-slider-wrapper .swiper-button-next:hover {
    background-color: #6c757d; /* Um cinza um pouco mais claro no hover */
    color: #ffffff;
}
/* Alvo principal do select quando um item é selecionado */
body.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--cor-input-fundo) !important;
    border-color: var(--cor-input-borda) !important;
    color: var(--cor-texto-principal) !important;
}

/* Cor do texto do item selecionado */
body.dark-mode .select2-container--bootstrap-5 .select2-selection-rendered,
body.dark-mode .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--cor-texto-principal) !important;
}

/* Cor da seta do dropdown */
body.dark-mode .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: var(--cor-texto-secundario) transparent transparent transparent !important;
}

/* Fundo do painel que abre com as opções */
body.dark-mode .select2-dropdown {
    background-color: #3a3a3a; /* Um cinza escuro para o painel */
    border-color: var(--cor-borda);
}

/* Campo de busca dentro do dropdown */
body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--cor-input-fundo);
    border-color: var(--cor-input-borda);
    color: var(--cor-texto-principal);
}

/* Cor do texto das opções na lista */
body.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: var(--cor-texto-principal);
}

/* Cor da opção quando o mouse passa por cima ou está selecionada */
body.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #0d6efd; /* Azul do Bootstrap */
    color: white;
}
/* Corpo da notificação toast */
body.dark-mode .toast-body {
    background-color: var(--cor-fundo-card); /* Usa a cor de fundo dos cards */
    color: var(--cor-texto-principal); /* Usa a cor de texto principal */
}

/* Garante que o botão de fechar seja visível */
body.dark-mode .toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Estilos para Dark Mode --- */
body.dark-mode .modal-moderno .modal-content {
    background-color: var(--cor-fundo-card);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
body.dark-mode .modal-moderno .modal-body {
    color: var(--cor-texto-principal);
}
body.dark-mode .modal-moderno .modal-footer {
    background-color: var(--cor-fundo-principal); /* Fundo mais escuro */
    border-top-color: var(--cor-borda);
}
body.dark-mode .modal-moderno .form-label {
    color: var(--cor-texto-secundario);
}


/* --- Estilos para Dark Mode --- */
body.dark-mode .modal-moderno .modal-content {
    background-color: var(--cor-fundo-card);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
body.dark-mode .modal-moderno .modal-body {
    color: var(--cor-texto-principal);
}
body.dark-mode .modal-moderno .modal-footer {
    background-color: var(--cor-fundo-principal);
    border-top-color: var(--cor-borda);
}
body.dark-mode .modal-moderno .form-group label {
    color: var(--cor-texto-secundario);
}
body.dark-mode .modern-input {
    background-color: var(--cor-input-fundo) !important;
    border-color: var(--cor-input-borda) !important;
    color: var(--cor-texto-principal) !important;
}

    /* Definição das variáveis de cor para os temas */
    :root {
        --cor-fundo-pagina: #f8f9fa;
        --cor-fundo-card: #ffffff;
        --cor-texto-primario: #212529;
        --cor-texto-secundario: #6c757d;
        --cor-borda: #e9ecef;
    }

    body.dark-mode {
        --cor-fundo-pagina: #161922;
        --cor-fundo-card: #202940;
        --cor-texto-primario: #e9ecef;
        --cor-texto-secundario: #adb5bd;
        --cor-borda: #323a54;
    }
    
    /* Regras Globais para o Dark Mode */
    body.dark-mode {
        background-color: var(--cor-fundo-pagina);
        color: var(--cor-texto-primario);

        /* Nova Sidebar Cores no Dark Mode */
        --sidebar-bg: #12151c;
        --sidebar-link-hover-bg: #1b212c;
        --sidebar-heading-color: #7b8898;
    }
    
    .layout-centered, .layout-centered-list, .dashboard-container {
        background-color: var(--cor-fundo-pagina) !important;
    }

    body.dark-mode .page-title-header,
    body.dark-mode .filter-card-modern,
    body.dark-mode .list-card-modern,
    body.dark-mode .form-card-modern,
    body.dark-mode .summary-module,
    body.dark-mode .kpi-card,
    body.dark-mode .card {
        background-color: var(--cor-fundo-card);
        border-color: var(--cor-borda);
    }
    
    body.dark-mode .page-title,
    body.dark-mode .kpi-card__info .value,
    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
    body.dark-mode .table,
    body.dark-mode .form-label,
    body.dark-mode .fw-bold {
        color: var(--cor-texto-primario);
    }

    body.dark-mode .page-subtitle,
    body.dark-mode .text-muted,
    body.dark-mode .kpi-card__info .title {
        color: var(--cor-texto-secundario) !important;
    }

    body.dark-mode .table {
        --bs-table-bg: var(--cor-fundo-card);
        --bs-table-color: var(--cor-texto-primario);
        --bs-table-border-color: var(--cor-borda);
        --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    }
    
    body.dark-mode .nav-tabs .nav-link {
        color: var(--cor-texto-secundario);
    }
    body.dark-mode .nav-tabs .nav-link:hover {
        background-color: var(--cor-borda);
        color: var(--cor-texto-primario);
        border-color: transparent transparent var(--cor-borda) transparent;
    }
    body.dark-mode .nav-tabs .nav-link.active {
        background-color: var(--cor-fundo-card);
        color: var(--cor-texto-primario);
        border-color: var(--cor-borda);
        border-bottom-color: var(--cor-fundo-card);
    }

    body.dark-mode .list-group-item {
        background-color: var(--cor-fundo-card);
        border-color: var(--cor-borda);
        color: var(--cor-texto-primario);
    }
    body.dark-mode .list-group-item-action:hover,
    body.dark-mode .list-group-item-action:focus {
        background-color: var(--cor-borda);
        color: var(--cor-texto-primario);
    }

    body.dark-mode .modal-content {
        background-color: var(--cor-fundo-card);
    }
    
    body.dark-mode .page-title-header {
        background-color: transparent;
        box-shadow: none;
        border-bottom: 1px solid var(--cor-borda);
        margin-bottom: 1.5rem;
    }

    /* ======================================================= */
    /* === NOVAS REGRAS PARA CORRIGIR FORMULÁRIOS === */
    /* ======================================================= */
    
    /* 1. Corrige o fundo dos addons (R$, %, etc.) */
    body.dark-mode .input-group-text {
        background-color: #344062; /* Um azul/cinza escuro diferente do campo */
        color: var(--cor-texto-secundario);
        border-color: #404a6e;
    }

    /* 2. Garante a cor do texto e da seta nos selects */
    body.dark-mode .form-select {
        background-color: #2b3854;
        border-color: #404a6e;
        color: var(--cor-texto-primario);
        /* Seta do select na cor clara para ser visível no fundo escuro */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    /* 3. Garante a cor correta dos campos de texto */
    body.dark-mode .form-control {
        background-color: #2b3854;
        border-color: #404a6e;
        color: var(--cor-texto-primario);
    }
    body.dark-mode .form-control:disabled, body.dark-mode .form-control[readonly] {
        background-color: #202940; /* Cor de fundo para campos desabilitados */
    }

    /* 4. (Bónus) Corrige a aparência dos toggles/switches */
    body.dark-mode .form-check-input {
         background-color: #344062;
         border-color: #404a6e;
    }
    body.dark-mode .form-check-input:checked {
        background-color: #0d6efd; /* Cor primária do Bootstrap */
        border-color: #0d6efd;
    }

    .form-check-label{
        color: var(--cor-texto-primario)
    }

body.dark-mode .table-professional thead th {
        background-color: #131927;
}


/* Card base */
.pc-card{
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pc-card:hover{ box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* Cabeçalho */
.pc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pc-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.pc-title{ min-width:0; }
.pc-name{ font-weight:600; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-sub{ font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Avatar */
.pc-avatar{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.pc-avatar-ok{ background: rgba(25,135,84,.12); color:#198754; }
.pc-avatar-warn{ background: rgba(220,53,69,.12); color:#dc3545; }

/* Ícone do WhatsApp (apenas ícone) */
.pc-wa-btn{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:rgba(25,135,84,.12); color:#198754; cursor:pointer;
}
.pc-wa-btn:hover{ background: rgba(25,135,84,.18); }

/* Badges de status */
.pc-status{
  padding:.22rem .55rem; border-radius:999px; font-size:.8rem; font-weight:600;
}
.pc-status--ok{ background: rgba(25,135,84,.10); color:#198754; }
.pc-status--warn{ background: rgba(220,53,69,.12); color:#dc3545; }

/* Corpo */
.pc-body{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--bs-border-color); }

/* Grade 2 linhas:
   - mobile: 2 colunas
   - md (≥768px): 3 colunas
   - lg (≥992px): 4 colunas
   O TOTAL fica fixo na 2ª linha, última coluna disponível.
*/
.pc-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px 24px;
  grid-auto-rows: auto;
  align-items:center;
}
@media (min-width: 768px){
  .pc-grid2{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (min-width: 992px){
  .pc-grid2{ grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}

.pc-kv{ display:flex; align-items:baseline; gap:10px; }
.pc-label{ color: var(--bs-secondary-color); }
.pc-value{ font-weight:600; white-space:nowrap; }

/* TOTAL fixo no fim da 2ª linha — ajustamos a coluna conforme o breakpoint */
.pc-total{
  display:flex; align-items:baseline; gap:10px; justify-self:end;
  grid-row: 2;
}
.pc-total-label{ color: var(--bs-secondary-color); font-weight:500; }
.pc-total-value{ font-weight:700; white-space:nowrap; }

/* mapear a coluna do TOTAL por breakpoint */
@media (max-width: 767.98px){
  .pc-total{ grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .pc-total{ grid-column: 3; }
}
@media (min-width: 992px){
  .pc-total{ grid-column: 4; }
}

/* garante que nada “vaze” do card */
.pc-card{ overflow: hidden; }

/* grade de 2 linhas */
.pc-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px 24px;
  grid-auto-rows: auto;
  align-items:center;
}

/* em md e lg aumentamos colunas */
@media (min-width: 768px){  .pc-grid2{ grid-template-columns: repeat(3, minmax(180px, 1fr)); } }
@media (min-width: 992px){  .pc-grid2{ grid-template-columns: repeat(4, minmax(180px, 1fr)); } }

/* linhas comuns */
.pc-kv{ display:flex; align-items:baseline; gap:10px; }
.pc-label{ color: var(--bs-secondary-color); }
.pc-value{ font-weight:600; white-space:nowrap; }

/* TOTAL: sempre na 2ª linha, última coluna da grade */
.pc-total{
  display:flex; align-items:baseline; gap:10px;
  grid-row: 2;
  grid-column: -1;       /* <- “última coluna” */
  justify-self: end;     /* alinha ao fim da célula */
}
.pc-total-label{ color: var(--bs-secondary-color); font-weight:500; }
.pc-total-value{ font-weight:700; white-space:nowrap; }

.pc-wa-btn{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(25,135,84,.35);
  background: rgba(25,135,84,.10);
  color:#198754;
}
.pc-wa-btn:hover{ background: rgba(25,135,84,.18); }

/* Pills de tags */
.tags-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.btn.tag-pill{
  border-radius:999px;           /* pílula */
  padding:.35rem .75rem;
  line-height:1;
  border-width:1px;
}
.btn-check:checked + .btn.tag-pill{
  color:#fff;
  background:var(--cor-primaria, #0d6efd);
  border-color:var(--cor-primaria, #0d6efd);
}
.btn-check + .btn.tag-pill:hover{
  transform:translateY(-1px);
}

/* Aba waitlist */
#tab-waitlist .badge { font-weight:600; }
#tab-waitlist .btn-group .btn { white-space: nowrap; }

/* --- ESTILOS PARA O FORMULÁRIO DE LISTA DE ESPERA --- */
.waitlist-form .form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--medium-gray);
}
.waitlist-form .form-control {
    border: 1px solid var(--border-color);
    padding: 12px;
    transition: all 0.2s ease;
}
.waitlist-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(229, 35, 32, 0.15); /* Sombra com a cor primária */
}
.waitlist-form .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.waitlist-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(229, 35, 32, 0.2);
}

/* --- REFINAMENTO DOS ÍCONES DA FICHA RÁPIDA --- */
.stacked-feature-item {
    width: 150px; /* Largura fixa para melhor alinhamento */
}
.stacked-feature-item i {
    font-size: 1.1rem;
    width: 20px; /* Garante alinhamento dos ícones */
    text-align: center;
}

  .comod-chip { display:inline-flex; align-items:center; gap:.35rem; margin-right:1rem; }
  .comod-chip i { opacity:.75; }

/* ========================================================= */
/* PREMIUM SOFT UI GLOBAL OVERRIDES: BUTTONS, BADGES, TABLES */
/* ========================================================= */

/* Global Button Styling */
.btn:not(.btn-link):not(.btn-close):not(.btn-sm):not(.fc-button) {
    border-radius: 50rem !important; /* Pill shape */
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-sm {
    border-radius: 50rem !important;
    padding: 0.25rem 0.8rem;
}
.btn:not(.btn-link):not(.btn-close):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Global Badge Styling */
.badge {
    border-radius: 50rem !important;
    padding: 0.35em 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Global Table & DataTables Styling */
.table, .dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    margin-bottom: 1rem;
}
.table thead th, .dataTable thead th {
    background-color: var(--cor-fundo-principal);
    border-bottom: 2px solid var(--cor-borda) !important;
    padding: 1rem 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--cor-texto-secundario);
    border-top: none !important;
}
.table tbody td, .dataTable tbody td {
    padding: 1rem 1.2rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-card);
    transition: background-color 0.2s;
}
.table tbody tr:last-child td {
    border-bottom: none !important;
}
.table-hover tbody tr:hover td, .dataTable.table-hover tbody tr:hover td {
    background-color: rgba(13, 110, 253, 0.03) !important;
}