@import url("https://fonts.googleapis.com/css2?family=ABeeZee:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Padauk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Podkova:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Play:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playball:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oldenburg:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
/* Modal backUnknown */
.modal-backdrop{
 display:none;
}

#myModal .modal-dialog .page{
 position:relative;
 top:298px;
}


/* a partir daqui, todo o seu CSS atual */
#app-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999; /* acima do modal */
}
#app-alert .alert { 
  opacity: 1 !important; 
  display: block !important; 
}

/* ================================================================= */
/* == SOLUÇÃO DEFINITIVA PARA O MENU LATERAL (SOBRESCRITA)        === */
/* ================================================================= */

/* --- 1. Garante que a barra lateral encolha e permita conteúdo flutuante --- */
body.sidebar-toggled .sidebar {
    width: 70px !important;
    overflow: visible !important; /* ESSENCIAL para o texto aparecer fora da barra */
}

/* --- 2. Corrige a Logo no modo recolhido --- */
body.sidebar-toggled .sidebar-brand {
    padding: 20px 0 !important;
}
body.sidebar-toggled .sidebar-brand img {
    max-width: 45px !important;
    height: auto !important;
    left: 0 !important;
    margin: 0 auto !important;
}

/* --- 3. Anula as larguras fixas dos links que você tinha no seu CSS --- */
body.sidebar-toggled #sidebar-menu li a {
    width: auto !important;
}

/* --- 4. A MÁGICA: Sobrescreve a regra padrão do app.all.css --- */
/* Esta regra é mais específica e vai "vencer" a regra padrão */
body.sidebar-toggled .sidebar-menu li:hover > a {
    width: 240px !important; /* Expande o FUNDO do link ao passar o mouse */
    background-color: #1c1c1c !important; /* Cor de fundo do item em hover */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* E esta regra mostra o texto dentro do link expandido */
body.sidebar-toggled .sidebar-menu li:hover > a > .menu-text {
    display: inline !important; /* MOSTRA O TEXTO */
    padding-left: 15px !important; /* Adiciona um espaçamento */
    color: #ffffff !important; /* Garante que o texto seja branco */
}

/* --- 5. Garante que o item ATIVO tenha um fundo destacado --- */
body.sidebar-toggled #sidebar-menu li.active > a {
    background-color: #4e5e6a !important;
}
/* =================================================== */
/* == RESTANTE DOS ESTILOS === */
/* =================================================== */

.leaflet-tile {
    background-color: transparent !important; 
}
/* =================================================== */
/* == CORES PERSONALIZADAS PARA STATUS DOS TICKETS === */
/* =================================================== */

/* Status: Cliente Respondeu (Verde) */
.badge.badge-client-replied {
    background-color: #28a745 !important; /* Verde Sucesso */
    color: #ffffff !important;
}

/* Status: Novo (Azul) */
.badge.badge-new {
    background-color: #007bff !important; /* Azul Primário */
    color: #ffffff !important;
}

/* Status: Aberto (Vermelho) */
.badge.badge-open {
    background-color: #dc3545 !important; /* Vermelho Perigo */
    color: #ffffff !important;
}

/* Status: Fechado (Cinza) */
.badge.badge-closed {
    background-color: #6c757d !important; /* Cinza Secundário */
    color: #ffffff !important;
}
#page-content .card .task-title-left {
    color: #ffffff;
    font-size: 16px;
    display: inline-block; /* Mudança para inline-block */
}

/* Alert Division */
#page-content .card .alert-info{
 background-color:#1f3c3c;
 color:#789095;
}
/* Strong Tag */
#qukzcxbj .text-muted strong{
 color:#dd6464;
}

/* Strong Tag */
#page-content .text-muted strong{
 color:#dd6464;
}

/* Column 12/12 */
.row > .text-muted:nth-child(2){
 color:#fddddd !important;
 font-family:'ABeeZee', sans-serif;
 background-color:#492125;
}


/* Badge */
#project-timeline-container p .badge{
 background-color:#820c0e !important;
}


/* Todo list widget table */
#todo-list-widget-table{
 height:265px !important;
}


.badge-new {
    background-color: #2605ff; /* azul vibrante */
    color: #ffffff;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
}

/* Image */
.sidebar .brand-logo img{
 position:relative;
 left:-21px;
}


/* Alert Division */
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes gradientBG {
  0% {
    background-color: #ededd3;
  }
  50% {
    background-color: #d3ede4;
  }
  100% {
    background-color: #ededd3;
  }
}

#page-content .clearfix .alert-dismissible {
  position: relative;
  padding-left: 40px; /* Space for exclamation icon */
  animation: gradientBG 8s infinite alternate; /* Background color animation */
}

#page-content .clearfix .alert-dismissible::before {
  content: "⚠";
  position: absolute;
  left: 10px;
  font-size: 20px;
  color: #FFA500;
  animation: blink 1.5s infinite; /* Blinking exclamation icon animation */
}

/* Custom widget title */
#page-content .clearfix .custom-widget-title{
 background-color:#4c0f0f;
 font-family:'Overpass', sans-serif;
 color:#af5e5e;
}

/* White */
#page-content .custom-widget .bg-white{
 background-color:#241f27 !important;
 transform:translatex(0px) translatey(0px);
}

/* Button */
#page-content a button{
 background-color:#943232;
 color:#f7f7f7;
 font-family:'Padauk', sans-serif;
 width:116px;
 box-shadow:none;
 perspective:0px;
}


/* List group item */
.w-auto .navbar-nav .nav-item .notification-dropdown .dropdown-details .card #notificaion-popup-list .list-group-item{
 background-color:#431d1d !important;
}

/* List group item */
#notificaion-popup-list .list-group-item{
 opacity:0.82;
}

/* Notification Unknowndown */
.w-auto .nav-item .notification-dropdown{
 opacity:0.8;
 background-color:#593053;
 transform:translatex(0px) translatey(0px);
}

/* Link */
#sidebar-menu .main a{
 width:222px;
 background-color:#111111;
}

/* Active */
#sidebar-menu .active{
 background-color:#a64949;
}

/* Division */
#upcoming-event-container .mb20:nth-child(1) div:nth-child(2){
 background-color:#34495e;
 font-family:'Podkova', serif;
 color:#ffffff;
}

/* Division */
#upcoming-event-container .mb20:nth-child(1) div:nth-child(1){
 background-color:#34495e;
 color:#f9f9fa;
}

/* Link */
#left-menu-toggle-mask .mb20:nth-child(1) a{
 color:#f598de;
}

/* Italic Tag */
#active-team-members-staff .ps-2 i{
 transform:scale(2.5);
 perspective:0px;
}

/* Link (active) */
#active-team-members-staff .ps-2 a:active{
 color:#cccccc;
}

/* Link */
#active-team-members-staff .ps-2 a{
 color:#b6b6bd;
}

/* Small Tag */
#active-team-members-staff .ps-2 small{
 color:#d3d3d3 !important;
 font-family:'Play', sans-serif;
}


/* List group item */
#notificaion-popup-list .list-group-item{
 background-color:#a82323 !important;
}

/* Web notification icon */
#web-notification-icon{
 transform:translatex(0px) translatey(0px);
}

/* Web notification icon (visited) */
#web-notification-icon:visited{
 transform:translatex(0px) translatey(0px);
}

/* List group item (link) */
#notificaion-popup-list .list-group-item:link{
 background-color:#dc2222 !important;
}
/* Kanban item list */
#kanban-container .kanban-col .kanban-item-list{
 margin-bottom:79px;
 min-height:479px;
}

@media (min-width:768px){

 /* List Item */
 #kanban-container li{
  margin-bottom:85px;
 }
 
}
/* Link */
#project-table .odd .all a{
 color:#afafb5;
}

/* Link */
#project-table .even .w10p a{
 color:#afafb5;
}

/* Link */
#project-table .odd .w10p a{
 color:#afafb5;
}

/* Link */
#project-table .even .all a{
 color:#afafb5;
}


/* Default navbar */
#default-navbar{
 background-color:#191919;
 background-image:url("https://images.unsplash.com/photo-1550537687-c91072c4792d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8Mnx8cGF0dGVybnxlbnwwfHx8fDE2NzIzNjk0ODI&ixlib=rb-4.0.3&q=80&w=2140");
 background-size:contain;
 background-blend-mode:saturation;
}

/* Sidebar menu */
#sidebar-menu{
 background-color:#191919;
}

/* Main */
#sidebar-menu .main{
 background-color:#191919;
 box-shadow:0px 0px 9px 0px #000000 inset;
}

/* List group item */
#notificaion-popup-list .list-group-item{
 transform:translatex(0px) translatey(0px);
 background-color:#531717 !important;
}

/* Card */
.notification-dropdown .dropdown-details .card{
 transform:translatex(0px) translatey(0px);
}

/* Division */
#notificaion-popup-list .w100p .mb5{
 color:#ffffff;
}

/* Text break */
#notificaion-popup-list .w100p .text-break{
 color:#ebca89;
}

/* Small Tag */
#notificaion-popup-list .mb5 small{
 color:#ffffff;
}

/* Notification Unknowndown */
.w-auto .nav-item .notification-dropdown{
 background-color:#8f3737;
 transform:translatex(0px) translatey(0px);
 box-shadow:4px 0px 21px 33px rgba(0,0,0,0.25) !important;
}

/* Page title */
.notification-dropdown .card .page-title{
 background-color:#7e1910;
}

/* Link */
.page-title a{
 color:#ffffff;
}

/* Image */
#notificaion-popup-list .text-wrap img{
 transform:scale(1.56) translatex(-3px);
}

/* Card footer */
.w-auto .notification-dropdown .card-footer{
 background-color:#6f140a !important;
}

/* Link */
.notification-dropdown .card-footer a{
 color:#ffffff;
}

/* Column 4/12 */
#page-content .clearfix .widget-container{
 background-color:#280505;
}

/* Page content */
#page-content{
 background-color:#330f0f;
 transform:translatex(0px) translatey(0px);
}

/* Widget icon */
#page-content .clearfix .widget-icon{
 background-color:#912525 !important;
 color:#ffffff;
 transform:translatex(0px) translatey(0px);
}

/* Division */
#upcoming-event-container .mb20:nth-child(1) div:nth-child(2){
 color:#bc4747;
 font-family:'Oldenburg', display;
}
/* Sidebar toggle */
.me-auto .nav-item .sidebar-toggle-btn{
 color:#c0392b !important;
}

/* Dropdown toggle */
.me-auto .nav-item .dropdown-toggle{
 color:#c0392b !important;
}

/* Global search */
#global-search-btn{
 color:#c0392b !important;
}

/* Quick add icon */
#quick-add-icon{
 color:#c0392b !important;
}

/* Reminder icon */
#reminder-icon{
 color:#c0392b !important;
}

/* Message notification icon */
#message-notification-icon{
 color:#c0392b !important;
}

/* User name */
#user-dropdown .user-name{
 color:#ffffff;
}

/* Link */
#sidebar-menu .main a{
 color:#9b9ba5 !important;
 transform:translatex(0px) translatey(0px);
 display:inline-block;
}

/* Link */
#sidebar-menu .expand a{
 transform:translatex(0px) translatey(0px);
}

/* Link (hover) */
#sidebar-menu .main a:hover{
 color:#bdc3c7 !important;
}

/* Link */
#sidebar-menu .active a{
 background-color:#2c0101;
}

/* Link */
#sidebar-menu .active a{
 width:240px;
}

/* Menu text (hover) */
#sidebar-menu a .menu-text:hover{
 color:#9e2d2d;
}
/* =================================================== */
/* == CORREÇÃO PARA LOGO GIGANTE NO MENU RECOLHIDO === */
/* =================================================== */

body.sidebar-toggled .sidebar-brand {
    padding: 20px 0 !important; /* Ajusta o espaçamento do container da logo */
}

body.sidebar-toggled .sidebar-brand img {
    max-width: 45px !important;  /* Força a largura máxima da imagem */
    height: auto !important;     /* Mantém a proporção da imagem */
    left: 0 !important;          /* Reseta o deslocamento para a esquerda */
    margin: 0 auto;              /* Centraliza a imagem horizontalmente */
}
/* ================================================================= */
/* == CORREÇÃO COMPLETA PARA O MENU LATERAL RECOLHIDO (TOGGLED) === */
/* ================================================================= */

/* --- 1. Corrige a Largura da Barra Lateral --- */
/* Garante que a barra lateral realmente encolha */
body.sidebar-toggled .sidebar {
    width: 70px !important;
}

/* --- 2. Corrige a Logo --- */
/* Ajusta o espaçamento do container da logo no modo recolhido */
body.sidebar-toggled .sidebar-brand {
    padding: 20px 0 !important;
}

/* Ajusta a imagem da logo no modo recolhido */
body.sidebar-toggled .sidebar-brand img {
    max-width: 45px !important;
    height: auto !important;
    left: 0 !important;
    margin: 0 auto !important;
}

/* --- 3. Corrige os Itens de Menu --- */
/* Esconde o texto dos itens de menu no modo recolhido */
body.sidebar-toggled #sidebar-menu .menu-text {
    display: none !important;
}

/* Anula a largura fixa dos links no modo recolhido */
body.sidebar-toggled #sidebar-menu li a {
    width: auto !important;
    text-align: center;
    padding: 15px 12px !important;
}

/* Garante que os ícones fiquem centralizados */
body.sidebar-toggled #sidebar-menu li a svg {
    margin: 0 auto !important;
}
/* ================================================================= */
/* == CORREÇÃO GERAL PARA TOOLTIPS NO TEMA ESCURO (VERSÃO 2)      === */
/* ================================================================= */

/* Estiliza o conteúdo interno do tooltip */
.tooltip-inner {
    background-color: #111111 !important; /* Fundo preto/cinza escuro */
    color: #ffffff !important;            /* Texto branco */
    opacity: 1 !important;                /* Garante que não fique transparente */
    border-radius: 4px;                   /* Bordas arredondadas */
    padding: 5px 10px;                    /* Espaçamento interno */
}

/* Estiliza a setinha do tooltip */
/* Para tooltips que aparecem à direita (o seu caso) */
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #111111 !important;
}

/* Para tooltips que aparecem à esquerda */
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #111111 !important;
}

/* Para tooltips que aparecem abaixo */
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #111111 !important;
}

/* Para tooltips que aparecem acima */
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #111111 !important;
}
/* ================================================================= */
/* == SOLUÇÃO DEFINITIVA PARA KANBAN MOBILE (JS + CSS)           === */
/* ================================================================= */

/* Aplica as regras apenas em telas com largura máxima de 767px (celulares) */
@media (max-width: 767px) {

    /* 1. Wrapper principal: Desativa a rolagem horizontal */
    #kanban-wrapper {
        overflow-x: hidden !important;
    }

    /* 2. Container das colunas: Transforma em um layout vertical */
    #kanban-container {
        display: block !important; /* Muda de 'flex' ou 'inline-block' para um layout de bloco simples */
        width: 100% !important;   /* Garante que ocupe toda a largura */
        height: auto !important;  /* Permite que a altura cresça conforme o conteúdo */
    }

    /* 3. Colunas individuais do Kanban */
    #kanban-container .kanban-col {
        width: 100% !important;     /* Cada coluna ocupa a largura total da tela */
        display: block !important;  /* Garante que se comportem como blocos */
        float: none !important;     /* Remove qualquer flutuação */
        margin-bottom: 25px !important; /* Espaço entre as colunas empilhadas */
    }

    /* 4. Lista de tarefas dentro de cada coluna */
    /* Esta é a parte mais importante, agora que o JS não interfere mais */
    #kanban-container .kanban-col .kanban-item-list {
        height: auto !important;          /* ESSENCIAL: a altura se ajusta ao conteúdo */
        min-height: initial !important;   /* Remove a altura mínima que você tinha */
        max-height: none !important;      /* Remove qualquer limite de altura máxima */
        overflow: visible !important;     /* Garante que nada seja cortado */
    }

    /* 5. Garante que o corpo da página possa rolar */
    body {
        overflow-y: auto !important;
    }
}