/* tokens base */
:root {
    --cor-branco-claro: #f4f4f4;
    --cor-preto: #000000;
    --cor-branco-puro: #ffffff;
    --cor-laranja-vibrante: #ff914d;
    --cor-laranja-pessego: #faba92;
    --cor-cinza-cafe: #3b3833;
    --cor-cinza-claro: #d3d3d3;
    --cor-cinza-escuro: #2c2c2c;
}

/* light theme */
body.light-theme {
    --fundo: var(--cor-branco-puro);
    --texto: var(--cor-cinza-cafe);
    --destaque: var(--cor-laranja-vibrante);
    --fundo-suave: var(--cor-branco-claro);
    --botoes: var(--cor-laranja-vibrante);
    --navbar-bg: var(--cor-laranja-vibrante);
    --navbar-text: var(--cor-branco-puro);
    --navbar-hover: var(--cor-laranja-pessego);

    --card-bg: var(--cor-branco-puro);
    --card-header-bg: var(--cor-laranja-vibrante);
    --table-header-bg: var(--cor-branco-claro);
    --table-row-bg: var(--cor-branco-puro);
    --table-hover-bg: var(--cor-laranja-pessego);
    --table-border-color: var(--fundo-suave); /* mantém borda suave */

    --chat-user-bg: var(--cor-cinza-claro);
    --chat-bot-bg: var(--cor-branco-claro);

    --modal-content-bg: var(--cor-branco-puro);
    --modal-header-bg: var(--cor-branco-claro);
    --modal-footer-bg: var(--cor-branco-claro);

    --card-header-info-bg: var(--cor-laranja-pessego);
    --card-header-info-text: var(--cor-branco-puro);

    --btn-outline-hover-bg: var(--cor-laranja-pessego);
    --btn-outline-hover-color: var(--cor-cinza-cafe);

    --input-bg: var(--cor-branco-puro);
    --input-text: var(--cor-cinza-cafe);
    --input-border: var(--fundo-suave);
}

/* dark theme */
body.dark-theme {
    --fundo: var(--cor-cinza-cafe);
    --texto: var(--cor-branco-claro);
    --destaque: var(--cor-laranja-vibrante);
    --fundo-suave: var(--cor-preto);
    --botoes: var(--cor-laranja-vibrante);

    --navbar-bg: var(--cor-laranja-vibrante);
    --navbar-text: var(--cor-branco-puro);
    --navbar-hover: var(--cor-laranja-pessego);

    --card-bg: var(--cor-cinza-escuro);           /* cinza escuro (#2c2c2c) */
    --card-header-bg: var(--cor-laranja-vibrante);

    --table-header-bg: var(--cor-cinza-cafe);
    --table-row-bg: var(--cor-cinza-escuro);
    --table-hover-bg: var(--cor-laranja-pessego);
    --table-border-color: var(--cor-branco-puro); /* borda branca */

    --chat-user-bg: var(--cor-cinza-escuro);
    --chat-bot-bg: var(--cor-cinza-cafe);

    --modal-content-bg: var(--cor-cinza-cafe);
    --modal-header-bg: var(--cor-preto);
    --modal-footer-bg: var(--cor-preto);

    --card-header-info-bg: var(--cor-laranja-pessego);
    --card-header-info-text: var(--cor-branco-claro);

    --btn-outline-hover-bg: var(--cor-laranja-pessego);
    --btn-outline-hover-color: var(--cor-branco-claro);

    --input-bg: var(--cor-cinza-cafe);
    --input-text: var(--cor-branco-claro);
    --input-border: var(--cor-branco-claro);
}

/* ================= Global ================= */
body {
    background-color: var(--fundo);
    color: var(--texto);
}

a {
    color: var(--destaque);
}

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

.btn-primary:hover {
    background-color: var(--destaque);
    border-color: var(--destaque);
}

.navbar {
    background: var(--navbar-bg);
}

.navbar-brand,
.navbar-brand span,
.nav-link {
    color: var(--navbar-text) !important;
}
.navbar-brand img {
    height: 40px;
    width: auto;
    max-height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)); /* opcional: contraste leve */
}

.nav-link:hover {
    color: var(--navbar-hover) !important;
}

.card {
    background-color: var(--card-bg);
    color: var(--texto);
    border: 1px solid var(--fundo-suave);
}

.card-header {
    background-color: var(--card-header-bg);
    color: var(--texto);
}

.card-header.bg-info {
    background-color: var(--card-header-info-bg) !important;
    color: var(--card-header-info-text) !important;
}

.card-header.bg-primary {
    background-color: var(--card-header-primary-bg) !important;
    color: var(--card-header-primary-text) !important;
}

.modal-content {
    background-color: var(--modal-content-bg);
    color: var(--texto);
}

.modal-header {
    background-color: var(--modal-header-bg);
    color: var(--texto);
    border-bottom: 1px solid var(--fundo-suave);
}

.modal-footer {
    background-color: var(--modal-footer-bg);
    border-top: 1px solid var(--fundo-suave);
}

.modal-title {
    color: var(--texto);
}

.btn-close {
    filter: invert(var(--bs-btn-close-white-filter));
}

.btn-outline-light {
    color: var(--btn-outline-color);
    border-color: var(--btn-outline-border);
}

.btn-outline-light:hover {
    background-color: var(--btn-outline-hover-bg);
    color: var(--btn-outline-hover-color);
    border-color: var(--btn-outline-hover-bg);
}

.btn-square {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ====== Form Controls ====== */
.form-control {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.form-control:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--destaque);
    box-shadow: 0 0 0 0.25rem rgba(255, 145, 77, 0.25);
}

/* Placeholder visível no dark */
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: var(--cor-branco-claro);
    opacity: 0.6;
}

/* ====== Table Styles ====== */
.table td, .table th {
    color: var(--texto) !important;
    border-color: var(--fundo-suave);
}

body.light-theme .table thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--texto) !important;
}

body.light-theme .table tbody tr {
    background-color: var(--table-row-bg) !important;
}

body.light-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-striped-bg) !important;
}

body.light-theme .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
}

body.dark-theme .table tbody tr {
    background-color: var(--table-row-bg) !important;
    color: var(--texto) !important;
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-striped-bg) !important;
}

body.dark-theme .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
}

/* ====== Chat ====== */
.mensagem {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 12px;
    word-wrap: break-word;
    font-size: 0.95rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: relative;
}

.mensagem-bot {
    align-self: flex-start;
    background-color: var(--chat-bot-bg);
    border-top-left-radius: 0;
    text-align: left;
}

.mensagem-usuario {
    align-self: flex-end;
    background-color: var(--chat-user-bg);
    border-top-right-radius: 0;
    text-align: right;
    margin-left: auto;
}

.hora-mensagem {
    font-size: 0.75rem;
    color: var(--texto);
    margin-top: 4px;
}

.conteudo-mensagem {
    white-space: pre-wrap;
}

/* ====== CORREÇÃO do Bootstrap ====== */
/* Força .list-group-item a respeitar o tema */
body.dark-theme .list-group-item,
body.light-theme .list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--texto) !important;
    border-color: var(--fundo-suave) !important;
}


body.dark-theme .form-text {
    color: var(--texto) !important;
    opacity: 0.7;
}

body.light-theme .form-text {
    color: var(--texto);
    opacity: 0.75;
}
body.dark-theme .text-muted {
    color: var(--texto) !important;
    opacity: 0.7;
}

body.light-theme .text-muted {
    color: var(--texto);
    opacity: 0.75;
}

body.dark-theme .form-select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

body.light-theme .form-select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

/* Tabelas no tema claro */
body.light-theme .table {
    background-color: var(--table-row-bg) !important;
    color: var(--texto) !important;
    border-color: var(--fundo-suave) !important;
}

/* Tabelas no tema escuro */
body.dark-theme .table {
    background-color: var(--table-row-bg) !important;
    color: var(--texto) !important;
    border-color: var(--fundo-suave) !important;
}

/* Garantir que células também herdem o tema */
body.dark-theme .table td,
body.dark-theme .table th,
body.light-theme .table td,
body.light-theme .table th {
    background-color: var(--table-row-bg) !important;
    color: var(--texto) !important;
    border-color: var(--fundo-suave) !important;
}

/* Linhas hover */
body.dark-theme .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
}

body.light-theme .table-hover tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
}

/* Chatbox scrollbar */
#chat-box {
    max-height: 60vh;       /* 60% da altura da tela */
    min-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
}

/* ====== Estilos para SVG Avolve.AI ====== */
.svg-ai {
    fill: var(--cor-branco-claro, #ff914d);
    stroke: var(--cor-branco-claro, #ff914d); /* ou outra cor para contorno */
    stroke-width: 20px; /* aumente esse valor para mais espessura */
    font-weight: 900;
    /*stroke-linejoin: round;*/
    /*stroke-linecap: round;*/
}

.navbar-brand svg {
    height: 35px;
    width: auto;
    /*display: block;*/
}

body.dark-theme .table,
body.dark-theme .table td,
body.dark-theme .table th {
    background-color: var(--table-row-bg) !important;
    color: var(--texto) !important;
    border-color: var(--table-border-color) !important;
}

/* light theme mantém suave */
body.light-theme .table,
body.light-theme .table td,
body.light-theme .table th {
    background-color: var(--table-row-bg) !important;
    color: var(--texto) !important;
    border-color: var(--table-border-color) !important;
}