/* =================================================================== */
/* 1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS                              */
/* =================================================================== */

:root { 
    --cor-principal: #721D59; /* Cor roxa principal usada em todo o sistema */
    --navbar-bg: linear-gradient(90deg, #5e2750 0%, #721D59 100%);
    --navbar-dropdown-bg: #343a40; /* Grafite para dropdowns */
} 

[data-bs-theme="dark"] {
    --navbar-bg: #212529; /* No modo escuro, a navbar usa uma cor sólida */
}

body { 
    background-color: var(--bs-tertiary-bg); /* Cor de fundo padrão do corpo */
}

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

.btn-principal:hover { 
    filter: brightness(90%); /* Escurece um pouco o botão ao passar o mouse */
}


/* =================================================================== */
/* 2. BARRA DE NAVEGAÇÃO (NAVBAR)                                    */
/* =================================================================== */

.navbar { 
    background: var(--navbar-bg);
    transition: background 0.3s ease-in-out; z-index: 9999;
}

.navbar-brand img { 
    max-height: 40px; /* Tamanho padrão da logo para celular */
    transition: max-height 0.2s ease-in-out;
}

/* --- Menu Principal (Links de Navegação) --- */
.main-nav .nav-item { 
    text-align: center; 
    margin: 0 0.5rem; 
}

.main-nav .nav-link { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 0.5rem 0.8rem; 
    color: rgba(255, 255, 255, 0.65); 
    font-weight: 500; 
    border-bottom: 3px solid transparent; 
    font-size: 0.8rem; 
    transition: color 0.2s ease, transform 0.2s ease, border-bottom-color 0.2s ease;
    z-index: 99999;
}

.main-nav .nav-link i { 
    font-size: 1.5rem; 
    margin-bottom: 0.25rem; 
    color: white; 
}

.main-nav .nav-link:hover { 
    color: white; 
    transform: translateY(-2px); /* Efeito de "levantar" ao passar o mouse */
}

.main-nav .nav-link.active { 
    color: white; 
    border-bottom-color: white; 
}


/* --- Dropdowns e Controles do Usuário --- */
.dropdown-menu {
    background-color: var(--navbar-dropdown-bg);
    color: #fff;
}
.dropdown-item {
    color: #f8f9fa;
}
.dropdown-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}
.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.2);
}
.user-avatar {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}


/* --- Media Queries para Responsividade --- */
@media (min-width: 992px) {
    .navbar-brand img {
        max-height: 50px;
    }
}
@media (max-width: 991.98px) {
    .main-nav { margin-top: 1rem; }
    .main-nav .nav-link { flex-direction: row; justify-content: flex-start; text-align: left; padding: 0.75rem 1rem; font-size: 1rem; border-bottom: none !important; }
    .main-nav .nav-link i { font-size: 1.2rem; margin-bottom: 0; margin-right: 0.75rem; }
    .main-nav .nav-link .small { font-size: 1rem; }
}


/* =================================================================== */
/* 9. POPUPS DE NOTIFICAÇÃO EM TEMPO REAL (TOASTS)                   */
/* =================================================================== */

/* --- Container dos Popups --- */
/* Este é o container que posicionamos no canto superior direito da tela */
#notificacoes-popup-container {
    position: fixed;
    top: 80px; /* Distância do topo, abaixo da navbar */
    right: 20px;
    z-index: 1056; /* Acima da maioria dos elementos, mas abaixo de modais, se necessário */
    width: 350px; /* Largura fixa para os popups */
}

/* --- Estilo Individual do Popup (Toast) --- */
#notificacoes-popup-container .toast {
    background-color: var(--navbar-dropdown-bg); /* Reutiliza a cor escura dos dropdowns */
    color: #f8f9fa; /* Cor de texto clara */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem; /* Bordas arredondadas */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0; /* Começa invisível para animação de fade-in */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Estado visível do toast, com animação de entrada */
#notificacoes-popup-container .toast.show {
    opacity: 1;
}

/* --- Cabeçalho do Popup --- */
#notificacoes-popup-container .toast-header {
    background-color: rgba(255, 255, 255, 0.1); /* Um pouco mais claro que o fundo */
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#notificacoes-popup-container .toast-header .btn-close {
    /* Estiliza o botão 'X' para ser branco e visível no fundo escuro */
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Corpo do Popup --- */
#notificacoes-popup-container .toast-body {
    padding: 1rem;
    font-size: 0.9rem;
}

/* --- Link no Popup --- */
/* Transforma todo o popup (exceto o header) em um link clicável */
#notificacoes-popup-container .notification-popup-link {
    text-decoration: none;
    color: inherit; /* Herda a cor do texto do .toast */
    display: block;
}

#notificacoes-popup-container .notification-popup-link:hover .toast-body {
    background-color: rgba(255, 255, 255, 0.05); /* Efeito sutil ao passar o mouse */
}

/* --- Ajustes para o Tema Claro (Light) --- */
[data-bs-theme="light"] #notificacoes-popup-container .toast {
    background-color: #fff;
    color: #212529;
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="light"] #notificacoes-popup-container .toast-header {
    background-color: #f8f9fa;
    color: #6c757d;
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="light"] #notificacoes-popup-container .toast-header .btn-close {
    filter: none; /* Reseta o filtro do botão 'X' */
}

[data-bs-theme="light"] #notificacoes-popup-container .notification-popup-link:hover .toast-body {
    background-color: #f1f1f1;
}


/* =================================================================== */
/* 4. CARDS DE TAREFA (demandas.php)                                 */
/* =================================================================== */

.task-card { 
    border-left-width: 5px; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    transition: all 0.2s ease-in-out; 
    position: relative; 
}
.task-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}
.task-card .card-body { 
    flex-grow: 1;
    display: flex; 
    flex-direction: column; 
}
.task-title-link { 
    text-decoration: none; 
    color: inherit; 
    font-weight: 500;
}
.stretched-link::after { 
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; 
}
.task-info-bar { 
    margin-top: auto; 
    padding-top: 1rem; 
    border-top: 1px solid var(--bs-border-color-translucent); 
}
.info-badge { 
    font-size: 0.8rem; 
}
.view-switcher .btn, 
.task-actions a { 
    position: relative; 
    z-index: 2; 
}


/* =================================================================== */
/* 5. ALERTAS E ANIMAÇÕES DE TAREFA                                  */
/* =================================================================== */

@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }
.task-card.task-overdue { animation: pulse-red 2s infinite; border-left-color: #dc3545 !important; }

@keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(253, 126, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); } }
.task-card.task-due-today { animation: pulse-orange 2s infinite; border-left-color: #fd7e14 !important; }


/* =================================================================== */
/* 6. PÁGINA DE CALENDÁRIO                                           */
/* =================================================================== */

/* --- Estilo para Sábado e Domingo na Visão de Mês --- */
.calendar-table td.weekend {
    background-color: var(--bs-tertiary-bg); 
}

/* --- Estilo para Sábado e Domingo na Visão de Semana --- */
.calendar-week-col.weekend {
    background-color: rgba(220, 53, 69, 0.05); /* Um vermelho bem claro */
    border-color: rgba(220, 53, 69, 0.2) !important;
}

/* --- Estilo para Feriados --- */
.holiday-marker {
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
    padding: 2px 5px;
    border-radius: 4px;
    display: block;
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Outros estilos do calendário */
.calendar-table { table-layout: fixed; }
.calendar-table th, .calendar-table td { vertical-align: top; height: 120px; border: 1px solid var(--bs-border-color); }
.calendar-table td { padding: 8px; }
.calendar-day-number { font-weight: bold; font-size: 1.2rem; }

.task-badge { 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    font-size: 0.75rem; 
    text-decoration: none; 
    color: white; 
    padding: 3px 6px; 
    border-radius: 0.25rem; 
    margin-bottom: 4px; 
}


/* =================================================================== */
/* 7. WIDGETS E OUTROS COMPONENTES                                   */
/* =================================================================== */

.widget-scrollable { 
    max-height: 400px; 
    overflow-y: auto; 
}


/* =================================================================== */
/* 8. ANIMAÇÕES ESPECIAIS (Foguete, Conclusão)                       */
/* =================================================================== */

/* --- Animação do Foguete de Lançamento --- */
#rocket-animation { position: fixed; bottom: -150px; right: 20%; font-size: 100px; color: var(--bs-primary); z-index: 10000; opacity: 0; pointer-events: none; transition: all 2s ease-in-out; }
@keyframes launchRocket { 0% { bottom: -150px; opacity: 0; transform: rotate(0deg); } 20% { bottom: 40%; opacity: 1; transform: rotate(-35deg); } 100% { bottom: 120vh; opacity: 0; transform: rotate(-55deg); } }
#rocket-animation.animate { animation: launchRocket 2s forwards ease-in; }

/* --- Animação do Texto "CONCLUÍDO!" --- */
#stage-clear-animation { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); font-size: 5rem; font-weight: bold; color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--cor-principal), 0 0 40px var(--cor-principal), 0 0 50px var(--cor-principal); z-index: 10001; opacity: 0; pointer-events: none; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
@keyframes stageClear { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
#stage-clear-animation.animate { animation: stageClear 2s forwards ease-out; }
/* =================================================================== */
/* --- ESTILOS PARA OS DETALHES DAS TAREFAS (PREVIEWS) --- */
/* =================================================================== */

/* Estilo para o Bloco de Comentários */
.comments-list .comment {
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    border-left: 4px solid var(--bs-primary);
}

.comment-author {
    font-weight: bold;
    color: var(--bs-emphasis-color);
}

.comment-date {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
}


/* --- Estilos para o Preview do Post de Feed (Instagram) --- */
.instagram-post {
    max-width: 480px;
    margin: auto;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    border-radius: 8px;
    overflow: hidden;
}

.instagram-post .post-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

.instagram-post .post-header img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.instagram-post .post-header .username {
    font-weight: 600;
}

.instagram-post .post-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    font-size: 1.5rem;
}

.instagram-post .post-actions .bi {
    cursor: pointer;
}

.instagram-post .post-actions .bi-bookmark {
    margin-left: auto; /* Empurra o ícone de salvar para a direita */
}

.instagram-post .post-caption {
    padding: 0 15px 15px 15px;
    font-size: 0.9rem;
    text-align: left;
}

.instagram-post .post-caption p {
    margin-bottom: 0;
}


/* --- Estilos para o Preview de Reels e Story (Celular) --- */
.phone-preview-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.phone-preview {
    position: relative;
    width: 270px;  /* Largura de um celular pequeno para preview */
    height: 480px; /* Altura proporcional */
    border: 10px solid #111;
    border-radius: 40px;
    background-color: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Garante que o conteúdo não vaze das bordas arredondadas */
}

.phone-preview .content {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz o vídeo ou imagem preencher o espaço sem distorcer */
}

/* Camada de sobreposição para texto e ícones */
.phone-preview .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    padding: 15px;
    /* Gradiente para garantir que o texto seja legível */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.phone-preview .overlay .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone-preview .overlay .user-info img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid white;
}

/* Ícones de ação na lateral direita, como no Reels */
.phone-preview .side-actions {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: white;
    font-size: 1.8rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* =================================================================== */
/* 10. PÁGINA DE HISTÓRICO DE NOTIFICAÇÕES                           */
/* =================================================================== */

.notification-page-item.nao-lida {
    font-weight: bold;
    background-color: var(--bs-tertiary-bg);
}

.notification-page-item.lida .text-body,
.notification-page-item.lida .text-muted {
    opacity: 0.7; /* Deixa o texto das notificações lidas um pouco mais apagado */
}

.notification-page-item:hover {
    background-color: var(--bs-secondary-bg);
}
/* =================================================================== */
/* 11. AJUSTES FINOS DE NOTIFICAÇÕES                                 */
/* =================================================================== */

/* Corrige a cor da data/hora no dropdown de notificações para temas escuros */
.notification-popup-body .dropdown-item .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Garante que no tema claro, a cor volte ao padrão */
[data-bs-theme="light"] .notification-popup-body .dropdown-item .text-muted {
    color: var(--bs-secondary-color) !important;
}
/* =================================================================== */
/* 12. WIDGET DE SAUDAÇÃO (DASHBOARD)                                */
/* =================================================================== */

#widget-saudacao {
    border: none;
    border-left: 7px solid var(--cor-principal);
    background-color: var(--bs-card-bg);
}

[data-bs-theme="dark"] #widget-saudacao {
    background: linear-gradient(120deg, rgba(40, 44, 52, 0.9), rgba(52, 58, 64, 0.9));
}

#widget-saudacao .widget-icon {
    font-size: 4rem;
    color: var(--cor-principal);
    opacity: 0.8;
}

[data-bs-theme="dark"] #widget-saudacao .widget-icon {
    opacity: 0.6;
}

#widget-saudacao h4 {
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

#widget-saudacao .lead {
    font-size: 1.15rem;
    font-weight: 400;
}

#widget-saudacao strong {
    font-weight: 600;
    color: var(--cor-principal);
}

[data-bs-theme="dark"] #widget-saudacao strong {
    color: #fca311; /* Cor de destaque para o tema escuro */
}
/* =================================================================== */
/* 6. TELEPROMPTER (ESTILO CORRIGIDO)                                */
/* =================================================================== */

.teleprompter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    color: white;
    z-index: 9999;
    display: none; /* Começa escondido, isso é o mais importante */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0; /* Começa transparente para a animação */
    transition: opacity 0.3s ease-in-out;
}

/* Quando o overlay é ativado via JS (display: flex), a opacidade muda para 1 */
.teleprompter-overlay.active {
    display: flex;
    opacity: 1;
}

#teleprompter-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #333;
    border: 1px solid #555;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10001;
}

.teleprompter-text {
    width: 80%;
    height: 70%;
    overflow-y: scroll;
    font-size: 3rem;
    line-height: 1.5;
    text-align: center;
    padding: 2rem;
    scrollbar-width: none; /* Esconde a barra de rolagem no Firefox */
}

/* Esconde a barra de rolagem em navegadores Webkit (Chrome, Safari) */
.teleprompter-text::-webkit-scrollbar {
    display: none;
}

.teleprompter-controls {
    position: absolute;
    bottom: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.teleprompter-controls button {
    background: #444;
    border: 1px solid #666;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* =================================================================== */
/* ESTILOS PARA O SUMMERNOTE NO TEMA ESCURO (DARK MODE)              */
/* =================================================================== */

/* Ajusta o editor quando o tema escuro está ativo no <html> */
[data-bs-theme="dark"] .note-editor.note-frame {
    border-color: #495057; /* Borda mais suave que a padrão */
}

[data-bs-theme="dark"] .note-toolbar {
    background-color: #343a40; /* Fundo da barra de ferramentas */
    border-bottom: 1px solid #495057;
}

[data-bs-theme="dark"] .note-toolbar .btn-light {
    color: #f8f9fa; /* Cor dos ícones dos botões */
    background-color: transparent;
    border-color: transparent;
}

[data-bs-theme="dark"] .note-toolbar .btn-light:hover,
[data-bs-theme="dark"] .note-toolbar .btn-light:focus {
    color: #fff;
    background-color: #495057; /* Cor do botão ao passar o mouse */
}

/* Cor dos botões ativos/selecionados na barra de ferramentas */
[data-bs-theme="dark"] .note-toolbar .btn-light.active,
[data-bs-theme="dark"] .note-toolbar .note-btn-group .show > .btn {
    color: #fff;
    background-color: #0d6efd; /* Cor principal do Bootstrap para destaque */
}

[data-bs-theme="dark"] .note-editable {
    background-color: #2b3035; /* Fundo da área de texto, um pouco mais claro que o body */
    color: #f8f9fa; /* Cor do texto digitado */
}

[data-bs-theme="dark"] .note-statusbar {
    background-color: #343a40;
    border-top: 1px solid #495057;
}

[data-bs-theme="dark"] .note-statusbar .note-resizebar {
    border-top: 1px solid #6c757d;
}

/* Estiliza os pop-ups e dropdowns do editor (ex: inserir link, tabelas) */
[data-bs-theme="dark"] .note-popover .popover-content,
[data-bs-theme="dark"] .note-dialog .modal-content {
    background-color: #343a40;
    color: #f8f9fa;
    border: 1px solid #495057;
}

[data-bs-theme="dark"] .note-dialog .modal-header {
    border-bottom-color: #495057;
}
[data-bs-theme="dark"] .note-dialog .modal-footer {
    border-top-color: #495057;
}

/* Ajuste para dropdowns dentro do editor (ex: Estilos, Fonte) */
[data-bs-theme="dark"] .dropdown-menu.note-check a.checked::before {
    color: #0d6efd; /* Cor do "check" no item selecionado */
}
/* =================================================================== */
/* NOVO DESIGN DOS CARDS DE TAREFA (KANBAN STYLE)                    */
/* =================================================================== */

.kanban-column .card-body {
    padding: 0.75rem; /* Espaçamento interno mais justo */
}

/* O novo card de tarefa */
.task-card-kanban {
    border-left-width: 4px;
    border-left-color: #6c757d; /* Cor padrão (cinza) */
    transition: all 0.2s ease-in-out;
    margin-bottom: 1rem;
}

.task-card-kanban:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Cores da borda baseadas no status */
.task-card-kanban.status-em-andamento { border-left-color: #0dcaf0; } /* Info */
.task-card-kanban.status-aprovacao { border-left-color: #ffc107; } /* Warning */
.task-card-kanban.status-correcao { border-left-color: #dc3545; } /* Danger */
.task-card-kanban.status-agendado { border-left-color: #0d6efd; } /* Primary */

.task-card-kanban .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
}

.task-card-kanban .task-header {
    margin-bottom: 0.75rem;
}

.task-card-kanban .task-title-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.task-card-kanban .task-meta {
    margin-top: auto; /* Empurra o rodapé para baixo */
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-card-kanban .task-user-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
}

/* Ajustes para o tema escuro */
[data-bs-theme="dark"] .task-card-kanban:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}
/* =================================================================== */
/* ESTILOS FINAIS PARA A CENTRAL DE DEMANDAS (CARDS E LISTA)           */
/* =================================================================== */

/* --- Animações de Alerta para Prazos --- */
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
@keyframes pulse-yellow {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* --- Estilos para o Card (Modo Cards) --- */
.task-card-final {
    background-color: var(--bs-card-bg); border-radius: 12px; border: 1px solid var(--bs-border-color); padding: 1rem; position: relative; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.task-card-final::before {
    content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 100%; background-color: var(--task-type-color);
}
.task-card-final.task-overdue { animation: pulse-red 2s infinite; }
.task-card-final.task-due-today { animation: pulse-yellow 2s infinite; }
.task-card-final .task-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.task-card-final .task-icon { font-size: 1.5rem; color: var(--task-type-color); }
.task-card-final .task-title { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--bs-body-color); }
.task-card-final .task-subinfo { color: var(--bs-secondary-color); font-size: 0.9rem; margin-left: calc(1.5rem + 0.75rem); margin-bottom: 1rem; }
.task-card-final .task-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0; border-top: 1px solid var(--bs-border-color-translucent); border-bottom: 1px solid var(--bs-border-color-translucent); }
.task-card-final .task-badges .badge { font-size: 0.8rem; padding: 0.4em 0.8em; }
.task-card-final .task-details { display: flex; justify-content: space-between; padding: 0.75rem 0; font-size: 0.9rem; }
.task-card-final .task-actions { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.9rem; }
.task-card-final .task-actions a { color: var(--bs-secondary-color); text-decoration: none; font-weight: 500; }
.task-card-final .task-actions a:hover { color: var(--bs-primary); }

/* --- NOVOS ESTILOS PARA O MODO LISTA --- */
.accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: var(--bs-light-bg-subtle);
}
.task-list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    gap: 1rem;
    position: relative;
}
.task-list-item:hover {
    background-color: var(--bs-secondary-bg-subtle);
}
.task-list-item.task-overdue { box-shadow: inset 4px 0 0 0 #dc3545; }
.task-list-item.task-due-today { box-shadow: inset 4px 0 0 0 #ffc107; }

.task-list-item .task-title-link {
    flex-grow: 1;
    text-decoration: none;
    font-weight: 500;
    color: var(--bs-body-color);
}
.task-list-item .task-meta-group {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Aumenta o espaçamento entre os itens */
    width: 450px; /* Largura fixa para alinhar as colunas */
    justify-content: flex-end;
}
.task-list-item .task-meta-item {
    min-width: 120px; /* Largura mínima para cada "célula" */
    text-align: left;
}
.task-list-item .task-meta-item.deadline {
    font-weight: 500;
}
.task-list-item.task-overdue .task-meta-item.deadline { color: #dc3545; }
.task-list-item.task-due-today .task-meta-item.deadline { color: #ff9900; }
/* =================================================================== */
/* ESTILOS PARA O PLANEJAMENTO ESTRATÉGICO (KANBAN)                    */
/* =================================================================== */

.kanban-board-wrapper {
    overflow-x: auto; /* Permite rolagem horizontal */
    padding-bottom: 1rem;
}

.kanban-board {
    display: flex;
    gap: 1.5rem;
    min-width: 1200px; /* Garante que as colunas não se quebrem */
}

.kanban-column {
    flex: 1;
    min-width: 280px; /* Largura mínima de cada coluna */
    background-color: var(--bs-tertiary-bg);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.kanban-column-title {
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-cards {
    flex-grow: 1;
    padding: 0.5rem;
    min-height: 200px; /* Altura mínima para a área de arrastar */
}

.kanban-card {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card h6 {
    margin-bottom: 0.25rem;
}

.kanban-card .btn-edit {
    opacity: 0;
    transition: opacity 0.2s;
}
.kanban-card:hover .btn-edit {
    opacity: 1;
}

/* Estilo para o item sendo arrastado */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--bs-primary-bg-subtle);
    border: 2px dashed var(--bs-primary);
}/* Estilos para os Cards de Usuário */
.user-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.user-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* --- ESTILOS PARA TAREFAS ATRASADAS (NOVO) --- */
.task-overdue {
    /* Animação: nome, duração, tipo de repetição */
    animation: blink-warning 1.5s infinite;
}

@keyframes blink-warning {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); /* Vermelho do Bootstrap (danger) */
    }
    50% {
        box-shadow: 0 0 10px 5px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}
/* ================================================================== */
/* CSS FINAL PARA A LISTA DE SUGESTÕES (@ E #)                      */
/* ================================================================== */

/* Define o formulário como a referência de posicionamento */
#form-comentario {
    position: relative;
}

/* O contêiner principal que envolve a lista de sugestões */
.tribute-container {
    margin-top: 5px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: #fff;
    overflow: hidden;
    z-index: 1050;
}

.tribute-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.tribute-container li {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-bottom: 1px solid #f0f0f0;
}

.tribute-container li:last-child {
    border-bottom: none;
}

.tribute-container li.highlight,
.tribute-container li:hover {
    background-color: #0d6efd;
    color: #fff;
}

.tribute-container li.highlight .text-muted,
.tribute-container li:hover .text-muted {
    color: #e9ecef !important;
}

.tribute-container .no-match {
    padding: 10px 15px;
    color: #6c757d;
    cursor: default;
    background-color: #f8f9fa;
}

.tribute-container li .fw-bold {
    display: block;
    font-size: 0.9rem;
}

.tribute-container li small.text-muted {
    font-size: 0.8rem;
}