/* frontend/assets/custom.css */

/* --- Fontes e Estilos Base --- */
body {
font-family: 'Inter', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
overflow-x: hidden; /* Previne scroll horizontal */
}

/* --- Variáveis de Tema --- */
:root {
--primary-color: #B80C63; /* Pixerama Pink */
--secondary-color: #032969; /* Pixerama Blue */
--success-color: #961254; /* Verde padrão do Bootstrap */


--light-bg: #f8f9fa;
--light-text: #212529;
--light-card-bg: #ffffff;
--light-navbar-bg: #ffffff;
--light-border: rgba(0,0,0,.1);

--alert-info-bg: #e9f5fb;
--alert-info-border: #b3e0ff;
--alert-info-text: #055160;

--btn-primary-focus-bg: #900a4d;
--btn-primary-focus-border: #900a4d;

--dark-bg: #121212;
--dark-text: #e2e8f0;
--dark-card-bg: #1e1e1e;
--dark-navbar-bg: #1e1e1e;
--dark-border: rgba(255,255,255,.15);

--dark-dropdown-item-bg: #333333;

}

/* --- FUNDO DA PÁGINA DE LOGIN --- */
.login-page-bg {
    background: linear-gradient(-45deg, var(--primary-color), var(--secondary-color), var(--primary-color), var(--secondary-color));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: var(--light-text);
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#login-button{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* --- Aplicação do Tema --- */
body {
    background-color: var(--light-bg);
    color: var(--light-text);
}
.card{
    background-color: var(--light-card-bg) !important;
    border-color: var(--light-border) !important;
}

.navbar, .modal-content {
    background-color: var(--light-card-bg) !important;
    color: var(--light-text) !important;
    border-color: var(--light-border) !important;
}
.dropdown-menu {
    background-color: var(--light-card-bg);
}
.dropdown-item:hover {
    background-color: var(--light-bg);
}

body.dark-theme {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

body.dark-theme .navbar,
body.dark-theme .modal-content {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme .dropdown-menu {
    background-color: var(--dark-card-bg);
}
body.dark-theme .dropdown-item {
    color: var(--dark-text);
}
body.dark-theme .dropdown-item:hover {
    background-color: var(--dark-dropdown-item-bg);
}
body.dark-theme .table {
    color: var(--dark-text);
}
body.dark-theme .form-control, body.dark-theme .Select-control {
    background-color: var(--dark-dropdown-item-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

body.dark-theme select,
body.dark-theme select option,
body.dark-theme .Select-menu-outer,
body.dark-theme .Select-option {
    color: #FFF !important;
    background-color: var(--dark-dropdown-item-bg) !important;
}
body.dark-theme input::placeholder{
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* --- Layout Principal e Sidebar --- */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    padding: 1rem;
    transition: all 0.3s;
    z-index: 1031;
    background-color: var(--primary-color);
    color: white;
}

#page-content {
    margin-left: 250px;
    transition: margin-left 0.3s;
    width: calc(100% - 250px);
}

.logo-container {
    background-color: white;
    border-radius: 8px;
}

/* Estilo dos Breadcrumbs */
#breadcrumbs {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
}

.card-body h4{
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
}

#home-table-container th{
    background-color: var(--primary-color);
    color: white;
    font-weight: lighter;
}

/* --- CORREÇÃO DO Z-INDEX DA NAVBAR --- */
/*
  Aumentamos o z-index da navbar para garantir que ela
  e seu dropdown fiquem sempre acima da barra de filtros.
*/
.navbar.sticky-top {
    z-index: 1030;
}
/* --- FIM DA CORREÇÃO --- */


@media (max-width: 992px) {
    #sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    #page-content {
        margin-left: 0;
        width: 100%;
    }
    #main-container.sidebar-toggled #sidebar {
        transform: translateX(0);
    }
    #sidebar #sidebar-close-btn {
        display: block !important;
        position: absolute;
        top: 1rem;
        right: 1rem;
        background-color: var(--primary-color);
        color: white;
        border: none;
        z-index: 10000;
    }
    #sidebar #sidebar-close-btn i {
        font-size: 1rem;
    }
}

@media (min-width: 993px) {
    #sidebar #sidebar-close-btn {
        display: none !important;
    }
}

/* --- Links da Sidebar --- */
#sidebar .nav-link,
#sidebar .nav-link-custom {
    color: #FFFFFF !important;
}
#sidebar .nav-link:hover, 
#sidebar .nav-link.active,
#sidebar .nav-link-custom:hover, 
#sidebar .nav-link-custom.active {
    background-color: rgba(255, 255, 255, 0.1);
}
#sidebar .nav-link-sub {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 0.9em;
}

#submenu-analise-arrow {
    transition: transform 0.3s;
}
#submenu-analise-arrow.rotate-180 {
    transform: rotate(180deg);
}


/* --- CORREÇÃO PARA TABELAS NO MODO ESCURO --- */
body.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner table,
body.dark-theme .dash-spreadsheet-container .dash-header th,
body.dark-theme .dash-spreadsheet-container .dash-cell {
    color: var(--light-text) !important;
}
body.dark-theme .dash-spreadsheet-container .dash-header th {
    background-color: #f8f9fa !important;
}
body.dark-theme .dash-spreadsheet-container .dash-cell {
    background-color: var(--light-card-bg) !important;
    border-color: var(--light-border) !important;
}
body.dark-theme .previous-page,
body.dark-theme .next-page,
body.dark-theme .page-number,
body.dark-theme .first-page,
body.dark-theme .last-page {
    background-color: var(--dark-dropdown-item-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}
body.dark-theme .current-page-number {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Corrige a cor do texto no menu de perfil para o tema escuro */
body.dark-theme .dropdown-menu .fw-bold {
    color: var(--dark-text) !important;
}
body.dark-theme .dropdown-menu .text-muted {
    color: #adb5bd !important;
}

.navbar .dropdown-menu {
    position: absolute !important;
}

/* --- ESTILOS PARA A BARRA DE FILTROS FLUTUANTE (CORRIGIDO) --- */
#filter-bar-container {
    position: -webkit-sticky;
    position: sticky;
    top: 72px; /* Altura da navbar (56px) + espaçamento (16px) */
    z-index: 1020;
    
    /* Adiciona um fundo para não ficar transparente ao rolar */
    background-color: var(--light-bg);
    
    /* Garante que a barra de filtros tenha um padding interno,
       mas não afete o fluxo do conteúdo abaixo dela. */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Adiciona um fundo para a barra de filtros no tema escuro */
body.dark-theme #filter-bar-container {
    background-color: var(--dark-bg);
}

/* --- ESTILOS PARA INPUTS NO TEMA ESCURO --- */
body.dark-theme #filter-property-id,
body.dark-theme #similar-property-id {
    color: #FFFFFF;
}
body.dark-theme #filter-property-id::placeholder,
body.dark-theme #similar-property-id::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}


/* --- CORREÇÃO DO BOTÃO DE FECHAR DO MODAL NO TEMA ESCURO --- */
body.dark-theme .modal-header .btn-close {
    filter: invert(1) brightness(2);
}


.card-primary-bg {
    /* Usa a variável de cor que definimos no config.py */
    background-color: var(--primary-color) !important;
    color: white !important;
}


/* --- CORREÇÃO PARA O FILTRO DROPDOWN --- */
/* --- CORREÇÃO FINAL PARA O FILTRO DROPDOWN --- */
.Select-menu-outer .Select-option {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;

    /* Garante que textos longos quebrem em várias linhas legíveis */
    white-space: normal !important;
    word-break: break-word !important;
}


/* aplica à lista virtualizada e ao fallback não virtualizado */
.wrap-options .VirtualizedSelectOption,
.wrap-options .Select-option {
    white-space: normal !important;
    word-break: break-word !important;   /* quebra palavras longas */
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
}

/* (opcional) hifenização melhor em PT-BR */
.wrap-options .VirtualizedSelectOption,
.wrap-options .Select-option {
    hyphens: auto;
}





/* --- ATUALIZAÇÃO: LÓGICA PARA SIDEBAR RESPONSIVA --- */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1031; /* Fica abaixo da sidebar mas acima do conteúdo */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

@media (max-width: 991.98px) {

    #sidebar-toggle-fullscreen-btn {
        display: none !important;
    }

    #sidebar {
        transform: translateX(-100%);
    }
    #page-content {
        margin-left: 0;
        width: 100%;
    }
    #main-container.sidebar-toggled #sidebar {
        transform: translateX(0);
    }
    /* Mostra o fundo escurecido quando a sidebar está aberta */
    #main-container.sidebar-toggled #sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
    /* Quando a sidebar estiver aberta em ecrãs pequenos... */
    #main-container.sidebar-toggled .navbar {
        /* Torna o fundo da navbar transparente */
        background-color: transparent !important;
        /* Remove a sombra para que não pareça estar a flutuar */
        box-shadow: none !important;
        border-color: transparent !important;
        /* Garante que a transição seja suave */
        transition: background-color 0.3s ease;
    }
    
    /* Esconde o título (breadcrumbs) e o menu do utilizador para dar foco à sidebar */
    #main-container.sidebar-toggled #breadcrumbs,
    #main-container.sidebar-toggled .navbar .nav {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
}


/* --- LÓGICA DE FULLSCREEN PARA DESKTOP --- */

/* Aplica apenas em telas grandes (Desktop) */
@media (min-width: 993px) {

    #sidebar-toggle-fullscreen-btn {
        display: inline-flex !important; /* Exibe o botão no desktop */
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: white !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Adiciona transição suave à seta dentro do botão */
    #sidebar-toggle-fullscreen-btn i {
        transition: transform 0.3s ease;
    }

    /* Quando a sidebar some, a seta gira 180 graus (apontando para direita) */
    #main-container.sidebar-toggled #sidebar-toggle-fullscreen-btn i {
        transform: rotate(180deg);
    }

    /* Esconde a sidebar movendo para a esquerda */
    #main-container.sidebar-toggled #sidebar {
        transform: translateX(-100%);
    }

    /* Ajusta o conteúdo para largura total */
    #main-container.sidebar-toggled #page-content {
        margin-left: 0;
        width: 100%;
    }
    
    /* Garante que o botão de fechar do mobile não apareça no desktop */
    #sidebar #sidebar-close-btn {
        display: none !important;
    }
}


#sidebar-toggle-btn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}
/* Adiciona um efeito ao passar o mouse */
#sidebar-toggle-btn:hover {
    opacity: 0.8;
}


/* --- ESTILO PARA O DROPDOWN DOS FILTROS (ATUALIZADO) --- */
.Select-menu-outer .Select-option {
    padding: 10px 12px !important;
    line-height: 1.6 !important;
}

/* NOVO: Altera a cor de fundo ao passar o mouse (hover) e na seleção */
.Select-menu-outer .Select-option.is-focused {
    background-color: rgba(184, 12, 99, 0.1) !important; /* Cor primária com transparência */
    color: var(--light-text);
}

/* NOVO: Altera a cor de fundo da opção já selecionada */
.Select-menu-outer .Select-option.is-selected {
    background-color: var(--primary-color) !important;
    color: white !important;
}


.table-header{
    color: var(--primary-color);
    font-weight: bold;
}


/* --- NOVO: Estilo para o ícone de Loading (Spinner) --- */
/* Altera a cor dos pontos do spinner padrão do dcc.Loading */
._dash-loading .dash-spinner .dot {
    background-color: var(--primary-color) !important;
}





/* --- Estilos do Modo Escuro (COM CORREÇÕES) --- */
body.dark-theme {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}
/* Altera todos os cards, EXCETO os cards primários da home */
body.dark-theme .card:not(.card-primary-bg) {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme .modal-content,
body.dark-theme .navbar {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Garante que os cards da home mantenham sempre a cor primária */
.card-primary-bg {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* --- CORREÇÃO: Impede que as tabelas mudem de cor no modo escuro --- */
/* Mantém a cor do texto da tabela matriz no modo escuro */
body.dark-theme #matriz-container .table {
    color: var(--light-text);
}
/* Mantém o fundo branco das células da tabela matriz no modo escuro */
body.dark-theme #matriz-container .table td,
body.dark-theme #matriz-container .table th {
    background-color: white !important;
}
/* Mantém o estilo original do cabeçalho da matriz */
body.dark-theme #matriz-container .table thead th,
body.dark-theme #matriz-container .table tfoot th {
    background-color: var(--primary-color) !important;
    color: white !important;
}
/* Impede que a DataTable do Dash mude de cor no modo escuro */
body.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner table,
body.dark-theme .dash-spreadsheet-container .dash-header th,
body.dark-theme .dash-spreadsheet-container .dash-cell {
    color: var(--light-text) !important;
    background-color: white !important;
}
/* Mantém a cor original do cabeçalho da DataTable */
body.dark-theme #datatable-subtarefas .dash-header th {
     background-color: var(--primary-color) !important;
     color: white !important;
}



/* --- Estilo para o Spinner de Carregamento --- */

/* Altera a cor dos pontos do spinner para a cor primária da aplicação */
.dash-spinner .dot {
    background-color: var(--primary-color) !important;
}

#current-client-name{
    font-weight: bold;
    color: var(--primary-color);
}

body.dark-theme #current-client-name{
    color: white;
}

body.dark-theme #current-client-date{
    color: white;
}


#login-button { position: relative; }
#login-btn-spinner .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* Ajuste para spinner dentro do botão de login */
#login-button .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .15em;
    vertical-align: text-bottom; /* Alinha melhor com o texto */
    margin-right: 0.5rem; /* Espaço entre spinner e texto */
}



/* --- MODIFICADO: Adiciona regras de impressão no final do arquivo --- */
@media print {
    
    /* 1. Esconde a "Interface" (chrome) do app */
    #sidebar,
    .navbar, /* Esconde a navbar inteira (incluindo o botão de imprimir) */
    #filter-bar-container, /* Esconde o container dos filtros */
    #back-to-top-button,
    .modal,
    .modal-backdrop {
        display: none !important;
    }
    #top-actions-container {
        display: none !important;
    }

    /* 2. Força o conteúdo principal a ocupar a página inteira */
    #page-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 3. Reseta os estilos dos cards para impressão */
    .card, .card-body, .card-header {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        background-color: white !important; /* Força fundo branco */
        color: black !important; /* Força texto preto */
    }

    /* 4. Esconde elementos interativos dentro dos cards (botões de IA, etc) */
    .card-header .btn,
    .card-header .btn-group,
    .card-header .btn-group-vertical {
        display: none !important;
    }

    /* 5. Tenta evitar quebras de página no meio de um gráfico */
    .graph-card, 
    .card,
    #datatable-oportunidades,
    #datatable-propostas,
    #datatable-vendas {
        page-break-inside: avoid;
    }

    /* 6. Garante que os gráficos fiquem visíveis e com fundo branco */
    .js-plotly-plot,
    .plot-container,
    .plotly {
        background-color: white !important;
    }
    
    /* 7. Garante que o texto do tema escuro seja resetado para preto */
    body.dark-theme,
    body.dark-theme .card,
    body.dark-theme h1,
    body.dark-theme h2,
    body.dark-theme h3,
    body.dark-theme h4,
    body.dark-theme h5,
    body.dark-theme p {
        color: black !important;
    }
}
/* --- FIM DAS REGRAS DE IMPRESSÃO --- */



/* *[data-dash-is-loading="true"]{
    visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
    content: "Loading...";
    display: inline-block;
    color: magenta;
    visibility: visible;
} */


/* Estilo específico para o botão de toggle fullscreen */
#sidebar-toggle-fullscreen-btn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important; /* Isso torna a seta branca */
    
    /* Removemos o fundo transparente padrão se houver */
    opacity: 1; 
}

/* Efeito opcional ao passar o mouse (pode usar a cor secundária ou apenas mudar a opacidade) */
#sidebar-toggle-fullscreen-btn:hover {
    opacity: 0.9;
    /* background-color: var(--secondary-color) !important; <-- Descomente se quiser que fique azul ao passar o mouse */
}




/* --- SOBRESCREVENDO BOTÕES DO BOOTSTRAP --- */

/* 1. Botão Primary com Outline (outline=True) 
   Estado normal: Texto e Borda na cor primária, Fundo transparente */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Estado Hover/Active: Fundo preenche com a cor primária, Texto fica branco */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(184, 12, 99, 0.5) !important; /* Opcional: sombra de foco na cor do tema */
}

/* 2. Botão Primary Sólido (outline=False ou padrão)
   Caso você use botões preenchidos em outros lugares */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus {
    background-color: var(--btn-primary-focus-bg) !important; /* Um tom levemente mais escuro para o hover */
    border-color: var(--btn-primary-focus-border) !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: white !important;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}



/* --- FIM DOS ESTILOS PERSONALIZADOS --- */

/* --- AJUSTES DA NAVBAR RESPONSIVA --- */

/* Utility class que falta no Bootstrap 5 padrão: width auto apenas no desktop */
@media (min-width: 992px) {
    .w-lg-auto {
        width: auto !important;
    }
}

/* Ajustes finos de espaçamento nos subgrupos da navbar */
.navbar-middle-section {
    gap: 0.5rem; /* Espaço entre o grupo do cliente e os ícones quando lado a lado */
}

/* Garante que o dropdown do cliente não quebre layout em telas muito pequenas */
#client-selector-dropdown {
    min-width: 150px;
}

/* Remove a margem extra do switch dentro da navbar para alinhar melhor com os botões */
#theme-switch {
    margin-bottom: 0;
    min-height: auto;
}
#theme-switch .form-check-input {
    margin-top: 0;
    cursor: pointer;
}

/* Ajuste do botão toggle da sidebar no mobile */
#sidebar-toggle-btn {
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
}



/* ------------------------------------------------------------------------- */
/* --- CHATBOT STYLES (NOVO) --- */
/* ------------------------------------------------------------------------- */

/* Botão Flutuante */
#chatbot-toggle-btn {
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 1050;
    /* A cor de fundo é gerida pelo Bootstrap (color='primary'), que usa --primary-color */
}

/* Janela do Chat */
#chatbot-window {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    height: 500px;
    z-index: 1050;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    /* display: none; -> A visibilidade é controlada via estilo inline pelo callback do Dash */
}

/* Header do Chat - Força a cor primária e remove cantos retos inferiores */
#chatbot-window .card-header {
    background-color: var(--primary-color) !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Área de Histórico */
#chat-history-display {
    height: 350px;
    overflow-y: auto;
    padding-right: 5px;
    background-color: #fff;
}

body.dark-theme #chat-history-display {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

/* Scrollbar personalizada para o chat (opcional, mas elegante) */
#chat-history-display::-webkit-scrollbar {
    width: 6px;
}
#chat-history-display::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

body.dark-theme #chat-history-display::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
}

/* Balões de Mensagem - Estilo Base */
.chat-bubble {
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 80%;
    word-wrap: break-word;
    font-size: 0.9rem;
}

/* Balão do Usuário */
.chat-bubble-user {
    background-color: var(--primary-color);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}


/* Balão do Bot */
.chat-bubble-bot {
    background-color: #f1f0f0;
    color: #333;
    margin-right: auto;
    border-bottom-left-radius: 5px;
}

body.dark-theme .chat-bubble-bot {
    background-color: #333;
    color: #f1f0f0;
}