/*
 * ==========================================================
 * ÁREA ADMINISTRATIVA - ESTILOS PRINCIPAIS
 * ==========================================================
 * Este arquivo contém os estilos CSS para a área administrativa
 * do sistema Perfex CRM v3.4.0
 */

/* Configurações básicas do corpo da página */
body {
  font-family: "Inter", sans-serif;
  background: #eceaf4;
  color: #1d2240;
}

/* Configurações gerais para o corpo e HTML */
body,
html {
  font-size: 16px; /* Tamanho base da fonte */
  margin: 0; /* Remove margens */
  padding: 0; /* Remove preenchimentos */
  height: 100%; /* Altura total da janela */
}

/* Define tamanho de fonte para elementos filhos diretos do body */
body>* {
  font-size: 13.5px; /* Tamanho menor para conteúdo geral */
}

/* Estilo para cabeçalhos h3 e h4 */
.h4,
h4,
.h3,
h3 {
  font-weight: 400; /* Peso da fonte mais leve para cabeçalhos */
}

/* Classe para impedir rolagem */
.noscroll {
  overflow: hidden !important; /* Impede rolagem em elementos */
}

/* Ajustes para dispositivos móveis quando modal está aberto */
body.modal-open.mobile>#wrapper {
  overflow: hidden; /* Esconde conteúdo que ultrapassa o wrapper */
  height: 100%; /* Altura total */
}

/* Ajuste para layouts da direita para esquerda (RTL) */
[dir="rtl"] {
  overflow-x: hidden; /* Esconde rolagem horizontal em layouts RTL */
}

/* Ajustes para tabelas pequenas em telas maiores que 800px */
@media (min-width: 801px) {
  body.small-table .small-table-right-col.col-md-7 {
    padding-left: 0; /* Remove preenchimento esquerdo */
  }
}

/* Estilo para texto em negrito */
b,
strong {
  font-weight: 500; /* Define peso da fonte para negrito */
}

/* Estilo para cabeçalho h5 */
h5 {
  font-size: 13px; /* Tamanho da fonte para h5 */
}

/* 
 * ==========================================================
 * ANIMAÇÕES E EFEITOS DE TRANSIÇÃO
 * ==========================================================
 * Conjunto de animações para elementos que aparecem e desaparecem
 * com diferentes efeitos de movimento
 */

/* Configuração básica para elementos animados */
.animated {
  animation-duration: 1s; /* Duração da animação: 1 segundo */
  animation-fill-mode: both; /* Mantém o estado final da animação */
}

/* Animação de aparecimento gradual (para navegadores antigos) */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; /* Começa invisível */
  }

  to {
    opacity: 1; /* Termina visível */
  }
}

/* Animação de aparecimento gradual (padrão) */
@keyframes fadeIn {
  from {
    opacity: 0; /* Começa invisível */
  }

  to {
    opacity: 1; /* Termina visível */
  }
}

/* Classe para aplicar efeito de aparecimento gradual */
.fadeIn {
  -webkit-animation-name: fadeIn; /* Para navegadores antigos */
  animation-name: fadeIn; /* Padrão */
}

/* Animação de desaparecimento gradual (para navegadores antigos) */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1; /* Começa visível */
  }

  to {
    opacity: 0; /* Termina invisível */
  }
}

/* Animação de desaparecimento gradual (padrão) */
@keyframes fadeOut {
  from {
    opacity: 1; /* Começa visível */
  }

  to {
    opacity: 0; /* Termina invisível */
  }
}

/* Classe para aplicar efeito de desaparecimento gradual */
.fadeOut {
  -webkit-animation-name: fadeOut; /* Para navegadores antigos */
  animation-name: fadeOut; /* Padrão */
}

/* Animação de aparecimento vindo da direita (para navegadores antigos) */
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0; /* Começa invisível */
    -webkit-transform: translate3d(100%, 0, 0); /* Começa 100% à direita */
    transform: translate3d(100%, 0, 0); /* Começa 100% à direita */
  }

  to {
    opacity: 1; /* Termina visível */
    -webkit-transform: none; /* Termina na posição normal */
    transform: none; /* Termina na posição normal */
  }
}

/* Animação de aparecimento vindo da direita (padrão) */
@keyframes fadeInRight {
  from {
    opacity: 0; /* Começa invisível */
    -webkit-transform: translate3d(100%, 0, 0); /* Começa 100% à direita */
    transform: translate3d(100%, 0, 0); /* Começa 100% à direita */
  }

  to {
    opacity: 1; /* Termina visível */
    -webkit-transform: none; /* Termina na posição normal */
    transform: none; /* Termina na posição normal */
  }
}

/* Classe para aplicar efeito de aparecimento vindo da direita */
.fadeInRight {
  -webkit-animation-name: fadeInRight; /* Para navegadores antigos */
  animation-name: fadeInRight; /* Padrão */
}

/* Animação de aparecimento vindo da esquerda (para navegadores antigos) */
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0; /* Começa invisível */
    -webkit-transform: translate3d(-100%, 0, 0); /* Começa 100% à esquerda */
    transform: translate3d(-100%, 0, 0); /* Começa 100% à esquerda */
  }

  to {
    opacity: 1; /* Termina visível */
    -webkit-transform: none; /* Termina na posição normal */
    transform: none; /* Termina na posição normal */
  }
}

/* Animação de aparecimento vindo da esquerda (padrão) */
@keyframes fadeInLeft {
  from {
    opacity: 0; /* Começa invisível */
    -webkit-transform: translate3d(-100%, 0, 0); /* Começa 100% à esquerda */
    transform: translate3d(-100%, 0, 0); /* Começa 100% à esquerda */
  }

  to {
    opacity: 1; /* Termina visível */
    -webkit-transform: none; /* Termina na posição normal */
    transform: none; /* Termina na posição normal */
  }
}

/* Classe para aplicar efeito de aparecimento vindo da esquerda */
.fadeInLeft {
  -webkit-animation-name: fadeInLeft; /* Para navegadores antigos */
  animation-name: fadeInLeft; /* Padrão */
}

/* Animação de desaparecimento para a esquerda (para navegadores antigos) */
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1; /* Começa visível */
  }

  to {
    opacity: 0; /* Termina invisível */
    -webkit-transform: translate3d(-100%, 0, 0); /* Termina 100% à esquerda */
    transform: translate3d(-100%, 0, 0); /* Termina 100% à esquerda */
  }
}

/* Animação de desaparecimento para a esquerda (padrão) */
@keyframes fadeOutLeft {
  from {
    opacity: 1; /* Começa visível */
  }

  to {
    opacity: 0; /* Termina invisível */
    -webkit-transform: translate3d(-100%, 0, 0); /* Termina 100% à esquerda */
    transform: translate3d(-100%, 0, 0); /* Termina 100% à esquerda */
  }
}

/* Classe para aplicar efeito de desaparecimento para a esquerda */
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft; /* Para navegadores antigos */
  animation-name: fadeOutLeft; /* Padrão */
}

/* Animação de desaparecimento para a direita (para navegadores antigos) */
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1; /* Começa visível */
  }

  to {
    opacity: 0; /* Termina invisível */
    -webkit-transform: translate3d(100%, 0, 0); /* Termina 100% à direita */
    transform: translate3d(100%, 0, 0); /* Termina 100% à direita */
  }
}

/* Animação de desaparecimento para a direita (padrão) */
@keyframes fadeOutRight {
  from {
    opacity: 1; /* Começa visível */
  }

  to {
    opacity: 0; /* Termina invisível */
    -webkit-transform: translate3d(100%, 0, 0); /* Termina 100% à direita */
    transform: translate3d(100%, 0, 0); /* Termina 100% à direita */
  }
}

/* Classe para aplicar efeito de desaparecimento para a direita */
.fadeOutRight {
  -webkit-animation-name: fadeOutRight; /* Para navegadores antigos */
  animation-name: fadeOutRight; /* Padrão */
}

/* 
 * ==========================================================
 * ESTILOS PARA ANÚNCIOS E ALERTAS
 * ==========================================================
 */

/* Ajuste do botão de fechar em alertas */
.announcement .alert-dismissible .close {
  top: -4px; /* Posiciona o botão de fechar um pouco para cima */
}

/* Ajuste do botão de fechar em alertas para layouts RTL (direita para esquerda) */
[dir="rtl"] .announcement .alert-dismissible .close {
  right: 13px; /* Distância da direita em layouts RTL */
}

/* 
 * ==========================================================
 * ANIMAÇÃO DE CARREGAMENTO (LOADER)
 * ==========================================================
 * Animação pulsante para indicadores de carregamento
 */

/* Animação de carregamento (para navegadores antigos) */
@-webkit-keyframes loader {
  0% {
    background: #e2e8f0; /* Cor inicial: cinza claro */
  }

  10% {
    background: #c5c5c5; /* Cor intermediária: cinza médio */
  }

  40% {
    background: #e2e8f0; /* Volta para a cor inicial */
  }
}

/* Animação de carregamento (padrão) */
@keyframes loader {
  0% {
    background: #e2e8f0; /* Cor inicial: cinza claro */
  }

  10% {
    background: #c5c5c5; /* Cor intermediária: cinza médio */
  }

  40% {
    background: #e2e8f0; /* Volta para a cor inicial */
  }
}

/* 
 * ==========================================================
 * ESTILOS PARA TABELAS E OPÇÕES DE LINHA
 * ==========================================================
 */

/* Opções de linha em tabelas (botões de ação que aparecem ao passar o mouse) */
table .row-options {
  padding: 2px 0 0; /* Espaçamento superior */
  position: relative; /* Posicionamento relativo */
  left: -9999em; /* Esconde inicialmente movendo para fora da tela */
  font-size: 12px; /* Tamanho da fonte menor */
  color: #6b7280; /* Cor cinza médio */
}

/* Links dentro das opções de linha */
table tbody .row-options a {
  color: #6b7280; /* Cor cinza médio para links */
}

/* Ajuste para layouts RTL (direita para esquerda) */
[dir="rtl"] table .row-options {
  left: initial; /* Remove o posicionamento à esquerda */
  right: -9999em; /* Esconde movendo para a direita fora da tela */
}

/* Mostra opções de linha ao passar o mouse ou em dispositivos móveis */
table tr:hover td .row-options,
.mobile table tr td .row-options {
  position: static; /* Restaura posição normal */
}

/* 
 * ==========================================================
 * ESTILOS PARA ÁREA DE UPLOAD (DROPZONE)
 * ==========================================================
 */

/* Configurações básicas do Dropzone e seus elementos */
.dropzone,
.dropzone * {
  box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura/altura */
}

/* Container principal do Dropzone */
.dropzone {
  position: relative; /* Posicionamento relativo para elementos internos */
}

/* Estilo para pré-visualização de arquivos */
.dropzone .dz-preview {
  position: relative; /* Posicionamento relativo */
  display: inline-block; /* Exibe em linha */
  width: 120px; /* Largura fixa */
  margin: 0.5em; /* Margem ao redor */
}

/* Barra de progresso do upload */
.dropzone .dz-preview .dz-progress {
  display: block; /* Exibe como bloco */
  height: 15px; /* Altura fixa */
  border: 1px solid #aaa; /* Borda cinza */
}

/* Indicador de progresso do upload */
.dropzone .dz-preview .dz-progress .dz-upload {
  display: block; /* Exibe como bloco */
  height: 100%; /* Altura total */
  width: 0; /* Largura inicial zero (aumenta conforme o upload progride) */
  background: green; /* Cor de fundo verde */
}

/* Mensagem de erro no upload */
.dropzone .dz-preview .dz-error-message {
  color: red; /* Cor vermelha para erros */
  display: none; /* Inicialmente oculta */
}

/* Exibe mensagem e marca de erro quando há falha no upload */
.dropzone .dz-preview.dz-error .dz-error-message,
.dropzone .dz-preview.dz-error .dz-error-mark {
  display: block; /* Torna visível */
}

/* Exibe marca de sucesso quando o upload é concluído */
.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block; /* Torna visível */
}

/* Estilo para marcas de erro e sucesso */
.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark {
  position: absolute; /* Posicionamento absoluto */
  display: none; /* Inicialmente oculto */
  top: 30px; /* Distância do topo */
  width: 54px; /* Largura fixa */
  height: 58px; /* Altura fixa */
  left: 50%; /* Centraliza horizontalmente */
  margin-left: -27px; /* Ajusta para centralização exata */
}

/* 
 * ==========================================================
 * ESTILOS DE LAYOUT E NAVEGAÇÃO
 * ==========================================================
 */

/* Esconde o menu lateral quando a barra lateral está oculta */
body.hide-sidebar:not(.show-sidebar) #menu {
  margin-left: -230px; /* Move o menu para fora da tela (à esquerda) */
}

/* Ajusta o conteúdo principal quando a barra lateral está oculta */
body.hide-sidebar:not(.show-sidebar) #wrapper {
  margin-left: 0; /* Remove a margem esquerda do conteúdo */
}

/* Esconde o menu lateral em telas pequenas */
body.page-small #menu {
  margin-left: -230px; /* Move o menu para fora da tela (à esquerda) */
}

/* Ajusta o conteúdo principal em telas pequenas */
body.page-small #wrapper {
  margin-left: 0; /* Remove a margem esquerda do conteúdo */
}

/* Mostra o menu lateral em telas pequenas quando solicitado */
body.page-small.show-sidebar #menu {
  margin-left: 0; /* Restaura o menu para posição visível */
}

/* Ajusta o conteúdo principal quando o menu é exibido em telas pequenas */
body.page-small.show-sidebar #wrapper {
  margin-left: 230px; /* Adiciona margem para acomodar o menu */
}

/* 
 * ==========================================================
 * CABEÇALHO (HEADER)
 * ==========================================================
 */

/* Estilo do cabeçalho principal */
#header {
  background: transparent;
  display: block;
  height: auto;
  min-height: 54px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 99;
  box-shadow: none;
}

/* Ajusta o cabeçalho quando a barra lateral está oculta ou em telas pequenas */
body.hide-sidebar #header,
body.page-small #header {
  margin-left: 0; /* Remove a margem esquerda */
}

/* Ajustes do cabeçalho para telas menores que 768px */
@media (max-width: 768px) {
  #header {
    margin-left: 0; /* Remove a margem esquerda */
  }
}

/* Estilo para links ativos no cabeçalho */
#header li>a.active {
  color: inherit; /* Mantém a cor original */
  background: #f7f8fa; /* Fundo cinza muito claro */
  border-radius: 80px; /* Cantos muito arredondados (formato de pílula) */
}

/* 
 * ==========================================================
 * BARRA DE NAVEGAÇÃO SUPERIOR (NAVBAR)
 * ==========================================================
 * Estilos para a barra de navegação principal do Perfex CRM
 * Exemplo: Barra superior com notificações, perfil e menu de usuário
 */

/* Estilo para links na barra de navegação */
.navbar-nav>li>a {
  color: #72778f;
  padding-top: 0;
  padding-bottom: 0;
  height: auto;
  font-weight: 400;
}

/* Indicador de contagem (ex: número de notificações não lidas) */
.navbar-nav>li a>.icon-total-indicator {
  line-height: 12px; /* Altura da linha */
  padding: 2px 5px; /* Espaçamento interno */
  padding-bottom: 3px; /* Espaçamento inferior adicional */
  color: #fff; /* Texto branco */
  position: absolute; /* Posicionamento absoluto */
  right: 1px; /* Distância da direita */
  font-size: 11px; /* Tamanho da fonte pequeno */
  top: 13px; /* Distância do topo */
  font-family: Verdana, serif; /* Família da fonte */
  vertical-align: middle; /* Alinhamento vertical */
  text-align: center; /* Centraliza o texto */
  border-radius: 8px; /* Cantos arredondados */
  /* Usado no Perfex para mostrar contadores de notificações, mensagens e tarefas */
}

/* Estilo para popovers (caixas de conteúdo flutuantes) */
.popover {
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-color: #e2e8f0; /* Cor da borda cinza claro */
  /* Usado em várias partes do sistema, como tooltips de ajuda e menus de contexto */
}

/* Estilo para menu dropdown de notificações */
.navbar-nav>li>.dropdown-menu.notifications {
  z-index: 100; /* Camada de empilhamento */
  /* Usado no menu de notificações do sistema (sino) */
}

/* Estilo compartilhado para menus de notificações (desktop e mobile) */
.navbar-nav>li>.dropdown-menu.notifications,
.mobile-menu .dropdown-menu.notifications {
  max-height: 600px; /* Altura máxima */
  border-top: 0; /* Remove borda superior */
  overflow: auto; /* Adiciona rolagem quando necessário */
  /* Usado para listar notificações do sistema */
}

/* Estilo para menus dropdown na barra de navegação */
.navbar-nav>li>.dropdown-menu {
  border-top-left-radius: 6px; /* Cantos superiores arredondados */
  border-top-right-radius: 6px; /* Cantos superiores arredondados */
  /* Aplicado a todos os menus dropdown no cabeçalho (perfil, notificações, etc.) */
}

/* Estilo para itens da lista de notificações */
.navbar-nav>li>.dropdown-menu.notifications li {
  z-index: 100; /* Camada de empilhamento */
  /* Cada item individual na lista de notificações */
}

/* Estilo para o corpo da mensagem nas notificações */
.navbar-nav>li>.dropdown-menu.notifications li .media-body {
  font-size: 13px; /* Tamanho da fonte */
  /* Texto principal de cada notificação */
}

/* Estilo para o último item no menu dropdown */
.navbar-nav>li>.dropdown-menu>li:last-child>a {
  border-radius: 0; /* Remove arredondamento das bordas */
  /* Geralmente usado para o link "Ver todas as notificações" */
}

/* Estilo para imagens nas notificações */
.navbar-nav>li>.dropdown-menu.notifications li img {
  margin-right: 10px; /* Margem à direita */
  /* Imagens de perfil ou ícones nas notificações */
}

/* Ajuste para imagens nas notificações em layouts RTL */
[dir="rtl"] .navbar-nav>li>.dropdown-menu.notifications li img {
  margin-right: 0px; /* Remove margem à direita */
  margin-left: 10px; /* Adiciona margem à esquerda */
  /* Suporte para idiomas que leem da direita para a esquerda, como Árabe */
}

/* Estados de hover e foco para links na barra de navegação */
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav .open>a,
.navbar-nav .open>a:hover,
.navbar-nav .open>a:focus {
  background: none; /* Remove fundo */
  color: #0f172a; /* Cor mais escura ao passar o mouse */
  /* Efeito visual ao passar o mouse sobre os itens do menu */
}

/* Alinhamento do menu à direita */
.navbar-nav.navbar-right {
  margin-right: 26px; /* Margem à direita */
  /* Usado para alinhar itens como perfil de usuário, notificações à direita */
}

/* Estilo para o último item no menu de notificações à direita */
.navbar-right .dropdown-menu.notifications li:last-child {
  padding: 15px; /* Espaçamento interno */
  font-weight: 500; /* Peso da fonte semi-negrito */
  text-align: center; /* Centraliza o texto */
  /* Geralmente contém o link "Ver todas as notificações" ou similar */
}

/* 
 * ==========================================================
 * BARRA DE NAVEGAÇÃO MOBILE
 * ==========================================================
 * Estilos para o menu de navegação em dispositivos móveis
 */

/* Container principal da navegação mobile */
.mobile-navbar {
  position: absolute; /* Posicionamento absoluto */
  top: 57px; /* Posicionado logo abaixo do cabeçalho */
  left: 0; /* Alinhado à esquerda */
  right: 0; /* Alinhado à direita (ocupa toda a largura) */
  background-color: #ffffff; /* Fundo branco */
  z-index: 100; /* Camada de empilhamento alta */
  /* Aparece quando o usuário clica no botão de menu hambúrguer em telas pequenas */
}

/* Lista de navegação mobile */
.mobile-navbar .navbar-nav {
  padding: 0; /* Sem preenchimento */
  margin: 0; /* Sem margens */
  border-bottom: 1px solid #e4e5e7; /* Borda inferior cinza */
  /* Contém os itens do menu mobile */
}

/* Links na navegação mobile */
.mobile-navbar .navbar-nav>li>a {
  padding: 10px 12px; /* Espaçamento interno */
  color: #334155 !important; /* Cor do texto cinza escuro (forçada) */
  border-bottom: 1px solid #e2e8f0; /* Borda inferior entre itens */
  height: inherit; /* Altura automática */
  /* Cada item do menu mobile (Clientes, Vendas, Suporte, etc.) */
}

/* Último item da navegação mobile */
.mobile-navbar .navbar-nav>li:last-child>a {
  border-bottom: 0; /* Remove a borda inferior do último item */
}

/* 
 * ==========================================================
 * BARRA LATERAL (SIDEBAR)
 * ==========================================================
 * Estilos para o menu lateral principal do Perfex CRM
 * Exemplo: Menu lateral com Painel, Clientes, Vendas, etc.
 */

/* Container principal da barra lateral */
.sidebar {
  width: 230px !important;
  background: #fcfcfd;
  position: absolute;
  padding-left: 6px;
  padding-right: 7px;
  border-right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}

/* Ajuste para barra lateral em layouts RTL */
[dir="rtl"] .sidebar {
  border-right: 0; /* Remove borda direita */
  border-left: 1px solid #cbd5e1; /* Adiciona borda esquerda */
  /* Suporte para idiomas que leem da direita para a esquerda */
}

/* Itens do menu na barra lateral */
.sidebar>ul.nav>li {
  border-left: 2px solid transparent; /* Borda esquerda transparente (para indicador de item ativo) */
  /* Cada item principal do menu lateral (Dashboard, Clientes, etc.) */
}

/* Ajuste para itens do menu em layouts RTL */
[dir="rtl"] .sidebar>ul.nav>li {
  border-left: 0; /* Remove borda esquerda */
  border-right: 2px solid transparent; /* Adiciona borda direita transparente */
}

/* Links nos itens do menu lateral */
.sidebar ul.nav li a {
  color: #4b5366; /* COR DO TEXTO DO MENU ESQUERDO ALTERADO */
  padding: 12px 13px; /* altura do botão de menu e distância do icone do menu em relação a extremidade esquerda ALTERADO */
  font-size: 14px; /* tamanho da fonte do menu esquerdo ALTERADO */
  margin-top: 0.256rem; /* distância vertical entre os botões do menu esquerdo ALTERADO */
  font-weight: 500;
  border: 1px solid transparent;
}

/* Ícones nos itens do menu lateral */
.sidebar ul.nav li a i.menu-icon {
  margin-right: 14px; /* Margem à direita (espaço entre ícone e texto) */
  display: block; /* Exibe como bloco */
  float: left; /* Flutua à esquerda */
  width: 18px; /* Largura fixa */
  font-size: 18px; /* Tamanho da fonte */
  color: #6b7280; /* Cor cinza médio */
  text-align: center; /* Centraliza o ícone */
  /* Ícones à esquerda de cada item do menu (casa para Dashboard, usuários para Clientes, etc.) */
}

/* Estados de hover e ativo para itens do menu */
.sidebar>ul.nav>li:hover a:first-child,
.sidebar>ul.nav>li.active a:first-child {
  background: #f1effa;
  border-radius: 12px;
  box-shadow: none;
  border: 0;
}

/* Estados de hover, foco e ativo para links e ícones do menu */
.sidebar ul.nav li.active>a,
.sidebar ul.nav>li>a:hover,
.sidebar ul.nav>li>a:focus,
.sidebar ul.nav li.active>a .menu-icon,
.sidebar ul.nav>li>a:hover .menu-icon,
.sidebar ul.nav>li>a:focus .menu-icon {
  color: #4e557e;
}

/* Itens de submenu (segundo nível) */
.sidebar ul.nav li .nav-second-level li a {
  padding: 5px 15px 5px 18px !important; /* Antes era 48px, agora 18px para alinhar mais à esquerda */
  color: #72778f;
  font-size: 13px;
  margin-top: 0;
  font-weight: 500;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Ícones em itens de submenu */
.sidebar ul.nav>li .nav-second-level a .menu-icon {
  margin-right: 5px; /* Margem direita menor que no menu principal */
  /* Ícones menores usados nos subitens do menu */
}

/* Item de submenu ativo */
.sidebar ul.nav li .nav-second-level li.active a {
  font-weight: 600; /* Peso da fonte semi-negrito */
  color: #111827; /* Cor quase preta */
  background: transparent; /* Fundo transparente */
  box-shadow: none; /* Sem sombra */
  border: 0; /* Sem borda */
  /* Estilo para o item de submenu atualmente selecionado */
}

/* Estados de hover e foco para itens de submenu não ativos */
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:hover,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:focus {
  color: #4e557e;
  /* Efeito ao passar o mouse sobre subitens não selecionados */
}

/* Estados de hover e foco para ícones em itens de submenu */
.sidebar ul.nav li .nav-second-level a:hover .menu-icon,
.sidebar ul.nav li .nav-second-level a:focus .menu-icon {
  color: #111827; /* Cor quase preta */
  /* Muda a cor do ícone ao passar o mouse */
}

/* Seta indicadora de expansão/colapso do menu */
.sidebar .arrow {
  float: right; /* Flutua à direita */
  padding-top: 5px; /* Espaçamento superior */
  /* Seta que indica que um item de menu tem subitens */
}

/* Ícone de seta para a direita (menu colapsado) */
.sidebar .fa.arrow:before {
  content: "\f104"; /* Código do ícone Font Awesome (seta para a esquerda) */
  /* Indica que o menu pode ser expandido */
}

/* Ícone de seta para baixo (menu expandido) */
.sidebar .active>a>.fa.arrow:before {
  content: "\f107"; /* Código do ícone Font Awesome (seta para baixo) */
  /* Indica que o menu está expandido e pode ser colapsado */
}

/* 
 * ==========================================================
 * MENU DE CONFIGURAÇÕES
 * ==========================================================
 * Estilos para o menu de configurações do sistema
 * Exemplo: Menu de Configurações com opções como Geral, Finanças, E-mail, etc.
 */

/* Container do menu de configurações */
#setup-menu-wrapper {
  overflow: auto; /* Adiciona rolagem quando necessário */
  display: none; /* Inicialmente oculto */
  z-index: 9; /* Camada de empilhamento */
  min-height: 100%; /* Altura mínima total */
  /* Aparece quando o usuário acessa a seção de configurações */
}

/* Título do menu de configurações */
#setup-menu>li:first-child {
  padding: 10px 6px; /* Espaçamento interno */
  border-bottom: 1px solid #e5e7eb; /* Borda inferior cinza */
  color: #0f172a; /* Cor quase preta */
  margin-bottom: 10px; /* Margem inferior */
  font-weight: 600; /* Peso da fonte semi-negrito */
  /* Título "Configurações" no topo do menu */
}

/* Estado de hover para o título do menu de configurações */
#setup-menu>li:first-child:hover {
  border-left-color: transparent; /* Mantém a borda esquerda transparente */
}

/* Links no menu de configurações */
#setup-menu>li>a {
  padding: 4px 13px; /* Espaçamento interno */
  /* Itens principais como "Geral", "Finanças", "E-mail", etc. */
}

/* Links de submenu no menu de configurações */
#setup-menu li .nav-second-level li a {
  padding: 5px 10px 5px 24px; /* Espaçamento interno com recuo à esquerda */
  /* Subitens como "Configurações de moeda" sob "Finanças" */
}

/* Badges (indicadores) nos subitens do menu */
#side-menu li .nav-second-level li>.badge,
#setup-menu li .nav-second-level li>.badge {
  position: absolute; /* Posicionamento absoluto */
  right: 11px; /* Distância da direita */
  top: 8px; /* Distância do topo */
  /* Indicadores numéricos (ex: número de itens pendentes) */
}

/* Badges em subitens ativos */
#side-menu li .nav-second-level li.active>.badge,
#setup-menu li .nav-second-level li.active>.badge {
  position: absolute; /* Posicionamento absoluto */
  right: 11px; /* Distância da direita */
  top: 15px; /* Distância do topo maior */
  /* Ajuste de posição para badges em itens ativos */
}

/* 
 * ==========================================================
 * CONTEÚDO PRINCIPAL (WRAPPER)
 * ==========================================================
 * Estilos para a área principal de conteúdo
 */

/* Container principal de conteúdo */
#wrapper {
  margin: 0 0 0 230px; /* Margem à esquerda para acomodar o menu lateral */
  padding: 0; /* Sem preenchimento */
  background: #fcfcfd;
  position: relative; /* Posicionamento relativo */
  min-height: 100%; /* Altura mínima total */
  /* Contém todo o conteúdo principal do sistema, à direita do menu lateral */
}

/* Área de conteúdo principal */
.content {
  padding: 25px; /* Espaçamento interno */
  min-width: 320px; /* Largura mínima */
  /* Contém o conteúdo específico de cada página, como listagens, formulários, etc. */
}

/* Conteúdo em modo de tela cheia */
.page-full .content {
  padding: 0; /* Remove o espaçamento interno */
  /* Usado em páginas que precisam de mais espaço, como visualização de documentos */
}

/* 
 * ==========================================================
 * IMAGENS DE PERFIL
 * ==========================================================
 * Estilos para imagens de perfil de clientes e funcionários
 */

/* Imagem pequena de perfil de cliente */
.client-profile-image-small {
  height: 32px; /* Altura fixa */
  width: 32px; /* Largura fixa */
  border-radius: 8px; /* Quadrado com quinas arredondadas */
  /* Usado em listas de clientes, comentários e notificações */
}

/* Imagem extra pequena de perfil de funcionário */
.staff-profile-xs-image {
  width: 20px; /* Largura fixa */
  height: 20px; /* Altura fixa */
  border-radius: 6px; /* Quadrado com quinas arredondadas */
  /* Usado em atribuições de tarefas e comentários pequenos */
}

/* Imagem pequena de perfil de funcionário */
.staff-profile-image-small {
  height: 32px; /* Altura fixa */
  width: 32px; /* Largura fixa */
  border-radius: 6px; /* Quadrado com quinas arredondadas */
  /* Usado no cabeçalho, atribuições de tarefas e comentários */
}

/* Imagem extra pequena de perfil de funcionário (variante) */
.staff-profile-image-xs {
  height: 20px; /* Altura fixa */
  width: 20px; /* Largura fixa */
  border-radius: 6px; /* Quadrado com quinas arredondadas */
  /* Usado em listas compactas e notificações */
}

/* Miniatura de imagem de perfil de funcionário */
.staff-profile-image-thumb {
  height: 160px; /* Altura fixa maior */
  width: 160px; /* Largura fixa maior */
  border-radius: 12px; /* Quadrado com quinas arredondadas */
  /* Usado na página de perfil do funcionário e visualização detalhada */
}

/* Miniatura de imagem de perfil de cliente */
.client-profile-image-thumb {
  height: 160px; /* Altura fixa maior */
  width: 160px; /* Largura fixa maior */
  border-radius: 12px; /* Quadrado com quinas arredondadas */
  /* Usado na página de perfil do cliente e visualização detalhada */
}

/* 
 * ==========================================================
 * CLASSES UTILITÁRIAS
 * ==========================================================
 * Classes de uso geral para formatação e layout
 */

/* Margem para labels */
.label-margin {
  margin-top: 23px; /* Margem superior */
  /* Usado para alinhar labels em formulários */
}

/* Elemento com largura total */
.full-width {
  width: 100%; /* Largura total do container pai */
  /* Usado para fazer elementos ocuparem toda a largura disponível */
}

/* Texto riscado */
.text-throught {
  text-decoration: line-through; /* Texto com linha no meio */
  opacity: 0.6; /* Semitransparente */
  /* Usado para indicar itens excluídos, cancelados ou desativados */
}

/* Correção para Internet Explorer em DataTables */
.ie-dt-fix {
  overflow-x: hidden; /* Esconde a rolagem horizontal */
  /* Corrige problemas de exibição em tabelas no IE */
}

/* 
 * ==========================================================
 * CLASSES DE ESPAÇAMENTO
 * ==========================================================
 * Classes utilitárias para adicionar margens e preenchimentos
 * Muito utilizadas em todo o sistema para ajustes de layout
 */

/* Classes de preenchimento superior (padding-top) */
.ptop10 {
  padding-top: 10px; /* Preenchimento superior de 10px */
  /* Usado para adicionar espaço acima de elementos */
}

.ptop15 {
  padding-top: 15px; /* Preenchimento superior de 15px */
  /* Usado para adicionar espaço acima de elementos */
}

/* Classes de margem à direita */
.mright5 {
  margin-right: 5px; /* Margem direita de 5px */
  /* Usado para separar elementos horizontalmente */
}

.mright10 {
  margin-right: 10px; /* Margem direita de 10px */
  /* Usado para separar elementos horizontalmente */
}

.mright15 {
  margin-right: 15px; /* Margem direita de 15px */
  /* Usado para separar elementos horizontalmente */
}

.mright25 {
  margin-right: 25px; /* Margem direita de 25px */
  /* Usado para separar elementos horizontalmente */
}

.mright30 {
  margin-right: 30px; /* Margem direita de 30px */
  /* Usado para separar elementos horizontalmente */
}

.mright35 {
  margin-right: 35px; /* Margem direita de 35px */
  /* Usado para separar elementos horizontalmente */
}

.mright20 {
  margin-right: 20px; /* Margem direita de 20px */
  /* Usado para separar elementos horizontalmente */
}

/* Classes de margem à esquerda */
.mleft5 {
  margin-left: 5px; /* Margem esquerda de 5px */
  /* Usado para separar elementos horizontalmente */
}

.mleft10 {
  margin-left: 10px !important; /* Margem esquerda de 10px (forçada) */
  /* Usado para separar elementos horizontalmente */
}

.mleft15 {
  margin-left: 15px; /* Margem esquerda de 15px */
  /* Usado para separar elementos horizontalmente */
}

.mleft20 {
  margin-left: 20px; /* Margem esquerda de 20px */
  /* Usado para separar elementos horizontalmente */
}

.mleft25 {
  margin-left: 25px; /* Margem esquerda de 25px */
  /* Usado para separar elementos horizontalmente */
}

.mleft30 {
  margin-left: 30px; /* Margem esquerda de 30px */
  /* Usado para separar elementos horizontalmente */
}

/* Classes de preenchimento à esquerda */
.pleft5 {
  padding-left: 5px; /* Preenchimento à esquerda de 5px */
  /* Usado para adicionar espaço interno à esquerda */
}

/* Classes de margem específicas */
.mleft4 {
  margin-left: 4px !important; /* Margem esquerda de 4px (forçada) */
  /* Usado para ajustes finos de alinhamento */
}

.mleft40 {
  margin-left: 40px; /* Margem esquerda de 40px */
  /* Usado para recuos maiores */
}

/* 
 * ==========================================================
 * CLASSES DE ESPAÇAMENTO PARA LAYOUTS RTL
 * ==========================================================
 * Ajustes para suportar idiomas que leem da direita para a esquerda
 * como Árabe, Hebraico, Persa, etc.
 */

/* Inversão de margens direitas para RTL */
[dir="rtl"] .mright5 {
  margin-left: 5px; /* Inverte para margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mright10 {
  margin-left: 10px; /* Inverte para margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mright15 {
  margin-left: 15px; /* Inverte para margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mright25 {
  margin-left: 25px; /* Inverte para margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mright35 {
  margin-left: 35px; /* Inverte para margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mright20 {
  margin-left: 20px; /* Inverte para margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Suporte para layouts RTL */
}

/* Inversão de margens esquerdas para RTL */
[dir="rtl"] .mleft5 {
  margin-right: 5px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mleft10 {
  margin-right: 10px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mleft15 {
  margin-right: 15px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mleft20 {
  margin-right: 20px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mleft25 {
  margin-right: 25px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mleft30 {
  margin-right: 30px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

/* Mais ajustes RTL para margens específicas */
[dir="rtl"] .mleft4 {
  margin-right: 4px !important; /* Inverte para margem direita (forçada) */
  margin-left: 0 !important; /* Remove margem esquerda (forçado) */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .mleft40 {
  margin-right: 40px; /* Inverte para margem direita */
  margin-left: 0; /* Remove margem esquerda */
  /* Suporte para layouts RTL */
}

/* 
 * ==========================================================
 * CLASSES DE MARGEM INFERIOR
 * ==========================================================
 * Classes utilitárias para adicionar espaço abaixo dos elementos
 */

/* Classes de margem inferior */
.mbot5 {
  margin-bottom: 5px; /* Margem inferior de 5px */
  /* Usado para separar elementos verticalmente */
}

.mbot10 {
  margin-bottom: 10px; /* Margem inferior de 10px */
  /* Usado para separar elementos verticalmente */
}

.mbot15 {
  margin-bottom: 15px !important; /* Margem inferior de 15px (forçada) */
  /* Usado para separar elementos verticalmente */
}

.mbot20 {
  margin-bottom: 20px; /* Margem inferior de 20px */
  /* Usado para separar elementos verticalmente */
}

.mbot25 {
  margin-bottom: 25px; /* Margem inferior de 25px */
  /* Usado para separar elementos verticalmente */
}

.mbot30 {
  margin-bottom: 30px; /* Margem inferior de 30px */
  /* Usado para separar elementos verticalmente */
}

/* 
 * ==========================================================
 * CLASSES PARA REMOVER MARGENS
 * ==========================================================
 * Classes utilitárias para remover margens específicas
 */

/* Remoção de margens */
.no-mleft {
  margin-left: 0 !important; /* Remove margem esquerda (forçado) */
  /* Usado para alinhar elementos à esquerda */
}

.no-mright {
  margin-right: 0 !important; /* Remove margem direita (forçado) */
  /* Usado para alinhar elementos à direita */
}

/* Margem negativa (superior) */
.mntop15 {
  margin-top: -15px; /* Margem superior negativa de 15px */
  /* Usado para sobrepor elementos ou ajustar posicionamento */
}

/* Remoção de margens superior e inferior */
.no-mtop {
  margin-top: 0 !important; /* Remove margem superior (forçado) */
  /* Usado para alinhar elementos ao topo */
}

.no-mbot {
  margin-bottom: 0 !important; /* Remove margem inferior (forçado) */
  /* Usado para alinhar elementos à base */
}

/* 
 * ==========================================================
 * CLASSES DE MARGEM SUPERIOR
 * ==========================================================
 * Classes utilitárias para adicionar espaço acima dos elementos
 * Muito usadas para espaçamento vertical preciso
 */

/* Classes de margem superior com valores pequenos */
.mtop1 {
  margin-top: 1px; /* Margem superior de 1px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop2 {
  margin-top: 2px; /* Margem superior de 2px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop3 {
  margin-top: 3px; /* Margem superior de 3px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop4 {
  margin-top: 4px; /* Margem superior de 4px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop5 {
  margin-top: 5px; /* Margem superior de 5px */
  /* Usado para separar elementos verticalmente */
}

/* Classes de margem superior com valores médios */
.mtop6 {
  margin-top: 6px; /* Margem superior de 6px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop7 {
  margin-top: 7px; /* Margem superior de 7px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop8 {
  margin-top: 8px; /* Margem superior de 8px */
  /* Usado para ajustes finos de alinhamento vertical */
}

.mtop10 {
  margin-top: 10px; /* Margem superior de 10px */
  /* Usado para separar elementos verticalmente */
}

.mtop15 {
  margin-top: 15px; /* Margem superior de 15px */
  /* Usado para separar elementos verticalmente */
}

/* Classes de margem superior com valores grandes */
.mtop20 {
  margin-top: 20px; /* Margem superior de 20px */
  /* Usado para separar seções ou blocos de conteúdo */
}

.mtop25 {
  margin-top: 25px; /* Margem superior de 25px */
  /* Usado para separar seções ou blocos de conteúdo */
}

.mtop30 {
  margin-top: 30px; /* Margem superior de 30px */
  /* Usado para separar seções ou blocos de conteúdo */
}

.mtop35 {
  margin-top: 35px; /* Margem superior de 35px */
  /* Usado para separar seções ou blocos de conteúdo */
}

.mtop40 {
  margin-top: 40px; /* Margem superior de 40px */
  /* Usado para separar seções ou blocos de conteúdo */
}

.mtop45 {
  margin-top: 45px; /* Margem superior de 45px */
  /* Usado para separar seções ou blocos de conteúdo */
}

/* 
 * ==========================================================
 * CLASSES PARA REMOVER BORDAS E ESPAÇAMENTOS
 * ==========================================================
 * Classes utilitárias para remover bordas e espaçamentos
 * Muito usadas para ajustes de layout e alinhamento
 */

/* Classes para remover bordas */
.no-border {
  border: 0; /* Remove todas as bordas */
  /* Usado para eliminar bordas de elementos */
}

.no-border-color {
  border-color: transparent !important; /* Torna a borda transparente (forçado) */
  /* Mantém a estrutura da borda, mas a torna invisível */
}

.no-border-bottom {
  border-bottom: 0 !important; /* Remove a borda inferior (forçado) */
  /* Usado para eliminar apenas a borda inferior */
}

/* Classes para remover margens e preenchimentos */
.no-margin {
  margin: 0 !important; /* Remove todas as margens (forçado) */
  /* Usado para eliminar espaçamento externo */
}

.no-padding {
  padding: 0 !important; /* Remove todos os preenchimentos (forçado) */
  /* Usado para eliminar espaçamento interno */
}

/* Classes para remover preenchimentos específicos */
.no-padding-bottom {
  padding-bottom: 0 !important; /* Remove o preenchimento inferior (forçado) */
  /* Usado em cards, painéis e contêineres */
}

.no-padding-top {
  padding-top: 0 !important; /* Remove o preenchimento superior (forçado) */
  /* Usado em cards, painéis e contêineres */
}

.no-padding-left {
  padding-left: 0 !important; /* Remove o preenchimento esquerdo (forçado) */
  /* Usado para alinhar conteúdo à esquerda */
}

.no-padding-right {
  padding-right: 0 !important; /* Remove o preenchimento direito (forçado) */
  /* Usado para alinhar conteúdo à direita */
}

/* Ajustes para layouts RTL - preenchimentos */
[dir="rtl"] .no-padding-right {
  padding-left: 0 !important; /* Remove o preenchimento esquerdo em RTL (forçado) */
  /* Suporte para layouts RTL */
}

[dir="rtl"] .no-padding-left {
  padding-right: 0 !important; /* Remove o preenchimento direito em RTL (forçado) */
  /* Suporte para layouts RTL */
}

/* 
 * ==========================================================
 * CLASSES DE EXIBIÇÃO E LAYOUT
 * ==========================================================
 * Classes utilitárias para controlar como os elementos são exibidos
 */

/* Tabela com rolagem visível */
.s_table {
  overflow-x: visible; /* Mantém a rolagem horizontal visível */
  /* Usado em tabelas que podem ter conteúdo maior que a largura disponível */
}

/* Classes de exibição */
.inline-block {
  display: inline-block; /* Exibe como bloco em linha */
  /* Permite que elementos fiquem lado a lado mantendo propriedades de bloco */
}

.display-block {
  display: block !important; /* Exibe como bloco (forçado) */
  /* Faz com que elementos ocupem toda a largura disponível */
}

/* Ajustes para dispositivos móveis */
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important; /* Oculta em telas pequenas (forçado) */
    /* Esconde elementos em dispositivos móveis */
  }

  .view-all-timesheets {
    height: 45px; /* Altura fixa */
    margin-top: 0; /* Remove margem superior */
    /* Ajuste específico para o botão de ver todas as planilhas de horas */
  }
}

/* Classes de borda */
.border-right {
  border-right: 1px solid #e2e8f0; /* Borda direita cinza claro */
  /* Usado para separar colunas ou seções visualmente */
}

/* Ajustes para layouts RTL - bordas */
[dir="rtl"] .border-right {
  border-right: 0; /* Remove borda direita */
  border-left: 1px solid #e2e8f0; /* Adiciona borda esquerda cinza claro */
  /* Suporte para layouts RTL */
}

/* Classes de formatação de texto */
.bold {
  font-weight: 500; /* Peso da fonte semi-negrito */
  /* Usado para destacar textos importantes */
}

/* Estilo para labels */
label:not(.control-label) {
  font-weight: 600; /* Peso da fonte semi-negrito */
  /* Usado para destacar labels de formulários */
}

/* Ajuste para tabelas de faturas */
.table-invoices tr {
  min-width: 100%; /* Largura mínima total */
  /* Garante que as linhas da tabela de faturas ocupem toda a largura */
}

/* Classes de preenchimento */
.padding {
  padding: 20px; /* Preenchimento em todos os lados */
  /* Usado para adicionar espaço interno em contêineres */
}

.padding-10 {
  padding: 10px !important; /* Preenchimento menor em todos os lados (forçado) */
  /* Usado para adicionar espaço interno em contêineres menores */
}

.padding-5 {
  padding: 5px; /* Preenchimento pequeno em todos os lados */
  /* Usado para adicionar espaço interno mínimo */
}

/* Formatação de texto */
.line-throught {
  text-decoration: line-through; /* Texto com linha no meio */
  /* Usado para indicar itens riscados ou cancelados */
}

/* Tamanho de ícones */
.medium-icon {
  font-size: 26px; /* Tamanho da fonte maior */
  /* Usado para ícones de tamanho médio no sistema */
}

/* Estilo para elementos com tooltip */
.tooltip-pointer {
  border-bottom: 1px dashed; /* Borda inferior pontilhada */
  /* Indica visualmente que um elemento tem informação adicional (tooltip) */
}

/* 
 * ==========================================================
 * MODAIS E TEMPLATES DE EMAIL
 * ==========================================================
 * Estilos para modais e templates de email
 */

/* Ajuste para templates de email em modais */
.modal .email-template {
  overflow: visible; /* Permite que o conteúdo ultrapasse os limites */
  /* Evita cortes em conteúdo de templates de email em modais */
}

/* Links em lista de templates de email */
.email-templates li>a {
  font-size: 14px; /* Tamanho da fonte */
  /* Links para selecionar templates de email */
}

/* Itens na lista de templates de email */
.email-templates li {
  border-bottom: 1px solid #e2e8f0; /* Borda inferior cinza claro */
  padding: 5px; /* Espaçamento interno */
  /* Cada item na lista de templates de email disponíveis */
}

/* 
 * ==========================================================
 * FORMULÁRIOS E CAMPOS
 * ==========================================================
 * Estilos para elementos de formulário e campos especiais
 */

/* Estilo para grupos de perguntas em formulários */
.question.form-group {
  padding: 25px; /* Espaçamento interno */
  background: #fdfdfd; /* Fundo branco levemente acinzentado */
  border: 1px solid #f1f1f1; /* Borda cinza muito claro */
  /* Usado em formulários de pesquisa e questionários */
}

/* Campos obrigatórios em perguntas */
.question .required {
  margin-top: 0; /* Remove margem superior */
  /* Indicador de campo obrigatório em perguntas */
}

/* Botão de atualização de pergunta */
.question_update {
  margin-left: 15px; /* Margem esquerda */
  /* Botão para atualizar uma pergunta */
}

/* Estilo para notas e avisos */
.note {
  background: #fff7ed; /* Fundo amarelo claro */
  color: #323a45; /* Cor do texto cinza escuro */
  padding: 5px 10px; /* Espaçamento interno */
  margin-bottom: 8px; /* Margem inferior */
  border: 1px solid #dacd83; /* Borda amarela */
  border-radius: 2px; /* Cantos levemente arredondados */
  /* Usado para exibir notas, avisos e informações importantes */
}

/* 
 * ==========================================================
 * CALENDÁRIO E EVENTOS
 * ==========================================================
 * Estilos para o componente de calendário e eventos
 */

/* Estilo para eventos no calendário */
.fc-event {
  padding: 8px !important; /* Espaçamento interno (forçado) */
  border: 0 !important; /* Remove bordas (forçado) */
  border-radius: 2px !important; /* Cantos levemente arredondados (forçado) */
  margin: 5px 10px !important; /* Margens (forçado) */
  font-size: 11px; /* Tamanho da fonte pequeno */
  cursor: pointer; /* Cursor de mão ao passar o mouse */
  /* Eventos exibidos no calendário (tarefas, compromissos, etc.) */
}

/* Ajuste para visualização do calendário */
.fc-view {
  overflow-y: scroll; /* Adiciona rolagem vertical */
  /* Permite rolagem na visualização do calendário */
}

/* Ajustes de texto no calendário */
#calendar .fc-header-toolbar button,
#calendar .fc-day-header,
#calendar .fc-toolbar .fc-center {
  text-transform: capitalize; /* Primeira letra maiúscula */
  /* Formata textos de cabeçalho e botões do calendário */
}

/* 
 * ==========================================================
 * BOTÕES E CONTROLES
 * ==========================================================
 * Estilos para botões e elementos de controle
 */

/* Estilo para botões com ícones */
.btn-icon {
  display: inline-flex; /* Exibe como flex em linha */
  justify-items: center; /* Centraliza itens horizontalmente */
  justify-content: center; /* Centraliza conteúdo horizontalmente */
  padding: 5px 8px !important; /* Espaçamento interno (forçado) */
  margin-right: 2px; /* Margem direita pequena */
  /* Usado para botões pequenos com ícones (editar, excluir, etc.) */
}

/* Classe para elementos com animação de rotação */
.spinning {
  animation: spin 1s infinite linear; /* Animação de rotação contínua */
  -webkit-animation: spin2 1s infinite linear; /* Para navegadores antigos */
  /* Usado para indicadores de carregamento e processamento */
}

/* Animação de rotação com escala (para navegadores antigos) */
@-webkit-keyframes spin {
  from {
    -webkit-transform: scale(1) rotate(0deg); /* Estado inicial: sem rotação */
    transform: scale(1) rotate(0deg);
  }

  to {
    -webkit-transform: scale(1) rotate(360deg); /* Estado final: rotação completa */
    transform: scale(1) rotate(360deg);
  }
}

/* Animação de rotação com escala (padrão) */
@keyframes spin {
  from {
    -webkit-transform: scale(1) rotate(0deg); /* Estado inicial: sem rotação */
    transform: scale(1) rotate(0deg);
  }

  to {
    -webkit-transform: scale(1) rotate(360deg); /* Estado final: rotação completa */
    transform: scale(1) rotate(360deg);
  }
}

/* Animação de rotação simples (para navegadores antigos) */
@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg); /* Estado inicial: sem rotação */
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg); /* Estado final: rotação completa */
    transform: rotate(360deg);
  }
}

/* 
 * ==========================================================
 * MEDIA QUERIES E RESPONSIVIDADE
 * ==========================================================
 * Ajustes para diferentes tamanhos de tela
 */

/* Ajustes para tablets e telas menores (até 1024px) */
@media (max-width: 1024px) {
  .s_table {
    overflow-y: scroll; /* Adiciona rolagem vertical */
    /* Permite rolar tabelas grandes em telas menores */
  }
}

/* Ajustes para dispositivos móveis (até 768px) */
@media (max-width: 768px) {
  /* Overlay escuro quando o menu lateral está visível em mobile */
  body.show-sidebar #wrapper:after {
    content: ""; /* Cria um pseudo-elemento */
    display: block; /* Exibe como bloco */
    position: absolute; /* Posicionamento absoluto */
    left: 0; /* Alinhado à esquerda */
    top: -42px; /* Posicionado acima do topo */
    width: 100%; /* Largura total */
    height: calc(100% + 42px); /* Altura calculada */
    background-color: rgba(45, 62, 80, 0.30); /* Fundo escuro semi-transparente */
    pointer-events: auto; /* Permite interação com o elemento */
    opacity: 1; /* Totalmente visível */
    z-index: 55; /* Camada de empilhamento */
    -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1); /* Transição suave (navegadores antigos) */
    transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1); /* Transição suave */
    /* Cria um overlay escuro quando o menu lateral é aberto em dispositivos móveis */
  }

  /* Esconde rolagem horizontal quando o menu lateral está visível */
  html+body.show-sidebar,
  body.show-sidebar,
  body.show-sidebar #wrapper {
    overflow-x: hidden; /* Esconde rolagem horizontal */
    /* Evita problemas de layout quando o menu lateral está aberto */
  }

  /* Ajustes de conteúdo para dispositivos móveis */
  .content {
    padding: 15px; /* Espaçamento interno menor */
    min-width: 320px; /* Largura mínima */
    /* Reduz o espaçamento do conteúdo em telas pequenas */
  }

  /* Adiciona rolagem vertical para tabelas em dispositivos móveis */
  .s_table {
    overflow-y: scroll; /* Adiciona rolagem vertical */
    /* Permite rolar tabelas grandes em dispositivos móveis */
  }

  /* Ajuste de altura de linha para links na barra de navegação */
  .navbar-nav>li>a {
    line-height: 20px; /* Altura da linha menor */
    /* Reduz a altura dos links do menu em dispositivos móveis */
  }

  /* Centraliza cabeçalhos de projeto em dispositivos móveis */
  .project-heading {
    margin-bottom: 15px; /* Margem inferior */
    text-align: center; /* Texto centralizado */
    /* Melhora a visualização de títulos de projetos em telas pequenas */
  }

  /* Ajusta imagens de post para largura total em dispositivos móveis */
  .post-image-wrapper-1,
  .post-image-wrapper-2,
  .post-image-wrapper-3 {
    width: 100% !important; /* Largura total (forçada) */
    /* Faz com que imagens ocupem toda a largura disponível */
  }

  /* Ajusta campo de busca de leads em dispositivos móveis */
  .leads-search {
    margin-top: 15px; /* Margem superior */
    /* Adiciona espaço acima do campo de busca em telas pequenas */
  }

  /* Ajusta largura das colunas kanban em dispositivos móveis */
  .kan-ban-col {
    width: 260px !important; /* Largura fixa (forçada) */
    /* Define largura específica para colunas kanban em telas pequenas */
  }

  /* Remove cursor de arrastar em checklists em dispositivos móveis */
  .checklist {
    cursor: initial; /* Cursor padrão */
    /* Desativa a funcionalidade de arrastar em dispositivos móveis */
  }

  /* Ajusta informações de tarefas em dispositivos móveis */
  .task-info {
    width: 100%; /* Largura total */
    margin-left: 0 !important; /* Remove margem esquerda (forçado) */
    margin-bottom: 7px !important; /* Margem inferior (forçada) */
    /* Faz com que informações de tarefas ocupem toda a largura disponível */
  }

  /* Esconde alternador de visualização em dispositivos móveis */
  .toggle_view {
    display: none !important; /* Oculta (forçado) */
    /* Remove botão de alternar visualização em telas pequenas */
  }

  /* Esconde opções de tela quando o menu lateral está visível */
  body.show-sidebar .screen-options-area,
  body.show-sidebar .screen-options-btn {
    display: none !important; /* Oculta (forçado) */
    /* Evita sobreposição de elementos quando o menu lateral está aberto */
  }
}

/* Ajustes para desktop (acima de 769px) */
@media (min-width: 769px) {
  /* Esconde elementos mobile em desktop */
  .mobile-navbar,
  .mobile-navbar.collapse.in {
    display: none; /* Oculta */
    /* Esconde a barra de navegação mobile em telas maiores */
  }
}

/* Mais ajustes para dispositivos móveis */
@media (max-width: 768px) {
  /* Esconde menu direito em dispositivos móveis */
  .navbar-right {
    display: none; /* Oculta */
    /* Esconde o menu à direita (perfil, notificações) em telas pequenas */
  }

  /* Ajusta largura de painéis flutuantes do editor */
  .mce-floatpanel {
    width: 70% !important; /* Largura relativa (forçada) */
    /* Reduz a largura dos painéis do editor TinyMCE em dispositivos móveis */
  }

  /* Correção para input de arquivo em layouts RTL */
  [dir="rtl"] input[type="file"].dz-hidden-input {
    display: none; /* Oculta */
    /* Corrige problemas de exibição em layouts RTL */
  }
}

/* Ajustes para filtros de leads em dispositivos móveis */
@media (max-width: 768px) {
  .leads-filter-column {
    margin-bottom: 5px; /* Margem inferior pequena */
    /* Adiciona espaço entre colunas de filtro em telas pequenas */
  }
}

/* Ajustes para telas muito pequenas (320px) */
@media (max-width: 320px) {
  #wrapper {
    overflow: hidden; /* Esconde rolagem */
    /* Evita problemas de layout em telas muito pequenas */
  }
}

/* 
 * ==========================================================
 * MENU MOBILE
 * ==========================================================
 * Estilos para o menu em dispositivos móveis
 */

/* Container do menu mobile (inicialmente oculto) */
.mobile-menu {
  display: none; /* Oculto por padrão */
  /* Visível apenas em dispositivos móveis */
}

/* Ajustes específicos para menu mobile */
@media (max-width: 768px) {
  /* Botão de alternância do menu mobile */
  .mobile-menu-toggle {
    display: block; /* Exibe como bloco */
    margin-right: 10px; /* Margem direita */
    line-height: 22px; /* Altura da linha */
    padding-left: 5px; /* Preenchimento esquerdo */
    /* Botão hambúrguer para abrir o menu mobile */
  }

  /* Ajuste para botão de menu em layouts RTL */
  [dir="rtl"] .mobile-menu-toggle {
    margin-right: 0; /* Remove margem direita */
    margin-left: 10px; /* Adiciona margem esquerda */
    /* Suporte para idiomas da direita para a esquerda */
  }

  /* Exibe o menu mobile em dispositivos móveis */
  .mobile-menu {
    display: block; /* Exibe como bloco */
    /* Torna o menu mobile visível em telas pequenas */
  }

  /* Lista de ícones no menu mobile */
  ul.mobile-icon-menu {
    position: relative; /* Posicionamento relativo */
    margin-bottom: 0px; /* Sem margem inferior */
    /* Lista de ícones no topo do menu mobile (notificações, mensagens, etc.) */
  }

  /* Itens da lista de ícones */
  ul.mobile-icon-menu>li {
    position: relative; /* Posicionamento relativo */
    /* Cada item do menu de ícones */
  }

  /* Links nos itens de ícones */
  ul.mobile-icon-menu>li>a {
    padding: 0 3px; /* Espaçamento horizontal mínimo */
    color: #334155; /* Cor cinza escuro */
    /* Links para os ícones do menu mobile */
  }

  /* Menus dropdown nos ícones mobile */
  ul.mobile-icon-menu .dropdown-menu {
    right: -3px; /* Alinhado à direita com pequeno ajuste */
    left: auto; /* Não alinhado à esquerda */
    /* Posiciona os menus dropdown à direita dos ícones */
  }

  /* Indicador de contagem em ícones mobile (notificações, mensagens) */
  ul.mobile-icon-menu .icon-total-indicator {
    line-height: 12px; /* Altura da linha */
    padding: 2px 5px; /* Espaçamento interno */
    padding-bottom: 3px; /* Espaçamento inferior adicional */
    color: #fff; /* Texto branco */
    position: absolute; /* Posicionamento absoluto */
    right: 0px; /* Alinhado à direita */
    font-size: 11px; /* Tamanho da fonte pequeno */
    top: -8px; /* Posicionado acima do ícone */
    font-family: Verdana, serif; /* Família da fonte */
    vertical-align: middle; /* Alinhamento vertical */
    text-align: center; /* Texto centralizado */
    border-radius: 8px; /* Cantos arredondados */
    /* Bolinha com número indicando quantidade de notificações não lidas */
  }

  /* Ajuste para textos em temporizadores iniciados */
  ul.mobile-icon-menu ul.started-timers-top li a._timer+p {
    margin-top: -25px; /* Margem superior negativa */
    margin-bottom: 0; /* Sem margem inferior */
    /* Posiciona o texto do temporizador */
  }

  /* Ajuste para texto no temporizador superior */
  ul.mobile-icon-menu #top_start_timer p {
    line-height: 17px; /* Altura da linha */
    /* Ajusta a altura do texto no botão de iniciar temporizador */
  }

  /* Ajuste para imagens em caixas de notificação */
  ul.mobile-icon-menu .notifications .notification-box img {
    margin-right: 8px; /* Margem direita */
    /* Espaço entre a imagem e o texto da notificação */
  }

  /* Divisor para temporizadores iniciados */
  ul.mobile-icon-menu .divider-top-started-timers {
    display: block; /* Exibe como bloco */
    margin-top: 5px; /* Margem superior */
    margin-bottom: 15px; /* Margem inferior */
    /* Linha divisória entre temporizadores iniciados */
  }

  /* Ajuste para itens de temporizador */
  ul.mobile-icon-menu li.timer {
    line-height: 20px; /* Altura da linha */
    /* Ajusta a altura dos itens de temporizador */
  }

  /* Ajuste de largura para notificações em mobile */
  .notifications.width400 {
    width: 300px; /* Largura fixa menor */
    /* Reduz a largura do menu de notificações em dispositivos móveis */
  }

  /* Remove flutuação de itens no menu mobile */
  .mobile-menu .navbar-nav>li,
  .mobile-menu .navbar-nav {
    float: none; /* Remove flutuação */
    /* Garante que os itens do menu fiquem empilhados verticalmente */
  }
}

/* 
 * ==========================================================
 * ANEXOS E ARQUIVOS
 * ==========================================================
 * Estilos para anexos e uploads de arquivos
 */

/* Remove margem inferior do último grupo de anexo */
.attachments .attachment:last-child .form-group {
  margin-bottom: 0; /* Remove margem inferior */
  /* Evita espaço extra após o último anexo em um grupo */
}

/* 
 * ==========================================================
 * TABELAS E GRÁFICOS
 * ==========================================================
 * Estilos para tabelas e elementos de visualização de dados
 */

/* Margem superior para tabelas */
table.table {
  margin-top: 25px; /* Margem superior */
  /* Adiciona espaço acima das tabelas para melhor legibilidade */
}

/* Dimensões para gráficos */
.chart {
  max-width: 100%; /* Largura máxima total */
  min-width: 100%; /* Largura mínima total */
  /* Garante que os gráficos ocupem toda a largura disponível */
}

/* 
 * ==========================================================
 * LISTA DE TAREFAS (TODO)
 * ==========================================================
 * Estilos para listas de tarefas e itens a fazer
 */

/* Container para corpo do painel de tarefas */
.panel-body.todo-body {
  padding: 0; /* Remove preenchimento */
  /* Maximiza o espaço disponível para a lista de tarefas */
}

/* Título da lista de tarefas */
.todo-title {
  padding: 0 0 0 10px; /* Preenchimento à esquerda */
  font-weight: 500; /* Peso da fonte semi-negrito */
  font-size: 14px; /* Tamanho da fonte */
  /* Título da seção de tarefas a fazer */
}

/* Lista de tarefas */
ul.todo {
  margin-bottom: 0; /* Remove margem inferior */
  list-style: none !important; /* Remove marcadores de lista (forçado) */
  /* Lista de itens a fazer */
}

/* Itens da lista de tarefas */
ul.todo li {
  display: block; /* Exibe como bloco */
  position: relative; /* Posicionamento relativo */
  overflow: hidden; /* Esconde conteúdo que ultrapassa */
  margin: 0 5px; /* Margens horizontais */
  border-bottom: 1px solid #f4f4f5; /* Borda inferior cinza claro */
  margin-left: -18px; /* Margem esquerda negativa */
  margin-right: -10px; /* Margem direita negativa */
  padding-left: 30px; /* Preenchimento esquerdo */
  padding-right: 25px; /* Preenchimento direito */
  padding-bottom: 3px; /* Preenchimento inferior */
  /* Cada item individual na lista de tarefas */
}

/* Elemento para arrastar itens */
.dragger {
  cursor: move; /* Cursor de arrastar */
  background: url(../images/dragger.png) 1px 11px no-repeat; /* Ícone de arrasto */
  /* Indicador visual para arrastar e soltar itens */
}

/* Item para quando não há tarefas */
li.no-todos {
  background: none; /* Remove fundo */
  /* Mensagem exibida quando a lista está vazia */
}

/* Remove borda do último item da lista */
ul.todo li.ui-sortable-handle:last-child,
ul.todo li:last-child {
  border-bottom: 0; /* Remove borda inferior */
  /* Evita borda duplicada no final da lista */
}

/* Descrição da tarefa */
.todo-description {
  position: relative; /* Posicionamento relativo */
  padding: 10px 10px 0 10px; /* Preenchimento */
  width: 100%; /* Largura total */
  display: block; /* Exibe como bloco */
  /* Texto descritivo da tarefa */
}

/* Ajuste para data em layouts RTL */
[dir="rtl"] .todo-date {
  padding-top: 10px; /* Preenchimento superior */
  /* Ajuste para idiomas da direita para a esquerda */
}

/* Ajuste para checkbox em layouts RTL */
[dir="rtl"] .todo-checkbox {
  padding-right: 40px !important; /* Preenchimento direito (forçado) */
  /* Ajuste para idiomas da direita para a esquerda */
}

/* Data da tarefa */
.todo-date {
  padding: 0 0 10px 0; /* Preenchimento inferior */
  display: block; /* Exibe como bloco */
  /* Data de criação ou prazo da tarefa */
}

/* Checkbox para tarefas */
.todo-checkbox {
  padding-left: 40px; /* Preenchimento esquerdo */
  float: left; /* Flutua à esquerda */
  /* Posiciona a caixa de seleção para marcar tarefas como concluídas */
}

/* Área para itens ordenáveis */
.sortable {
  min-height: 60px; /* Altura mínima */
  /* Define altura mínima para áreas com itens que podem ser arrastados */
}

/* 
 * ==========================================================
 * CLASSES DE UTILIDADE ADICIONAIS
 * ==========================================================
 * Estilos utilitários para formatação e layout
 */

/* Remove bordas arredondadas */
.no-radius {
  border-radius: 0; /* Remove arredondamento */
  /* Usado para elementos com cantos retos */
}

/* Remove contorno em seletores */
.selecpicker:active,
.selecpicker:focus {
  outline: 0; /* Remove contorno */
  outline-offset: 0; /* Remove deslocamento de contorno */
  border: 0; /* Remove borda */
  /* Elimina contornos em elementos de seleção quando ativos ou em foco */
}

/* 
 * ==========================================================
 * FEED DE NOTÍCIAS E POSTS
 * ==========================================================
 * Estilos para o feed de notícias e posts do sistema
 */

/* Campo de texto para criar posts */
#post,
#post:focus {
  margin-top: 25px; /* Margem superior */
  box-shadow: none; /* Remove sombra */
  padding: 0; /* Remove preenchimento */
  transition: none; /* Remove transição */
  box-sizing: border-box; /* Inclui bordas e preenchimento na largura/altura */
  border: 0; /* Remove borda */
  outline: 0; /* Remove contorno */
  overflow: auto; /* Adiciona rolagem quando necessário */
  resize: none; /* Impede redimensionamento */
  background: transparent; /* Fundo transparente */
  /* Campo de texto para escrever novos posts no feed de notícias */
}

/* Container para imagens em posts */
.post-image-wrapper {
  position: relative; /* Posicionamento relativo */
  float: left; /* Flutua à esquerda */
  width: 100%; /* Largura total */
  overflow: hidden; /* Esconde conteúdo que ultrapassa */
  cursor: pointer; /* Cursor de mão */
  border: 1px solid #eef2f4; /* Borda cinza muito claro */
  /* Container para imagens anexadas a posts */
}

/* Estilo para imagem única em post */
.post-image-wrapper-1 {
  width: 100%; /* Largura total */
  height: auto; /* Altura automática */
  /* Quando há apenas uma imagem no post */
}

/* Estilo para duas imagens em post */
.post-image-wrapper-2 {
  width: 50%; /* Metade da largura (para duas imagens lado a lado) */
  max-height: 150px; /* Altura máxima */
  /* Quando há duas imagens no post, cada uma ocupa metade da largura */
}

/* Estilo para três imagens em post */
.post-image-wrapper-3 {
  width: 33.333333%; /* Um terço da largura (para três imagens lado a lado) */
  max-height: 150px; /* Altura máxima */
  /* Quando há três imagens no post, cada uma ocupa um terço da largura */
}

/* Ajustes para imagens em posts e galerias */
.post-image-wrapper img,
img.img-gallery {
  display: block; /* Exibe como bloco */
  min-width: 100% !important; /* Largura mínima total (forçada) */
  /* Garante que as imagens preencham completamente seus contêineres */
}

/* Botão de opções de post */
.btn-post-options {
  margin-top: -15px; /* Margem superior negativa */
  /* Posiciona o botão de opções (editar, excluir) acima do post */
}

/* 
 * ==========================================================
 * FEED DE NOTÍCIAS EM TELA CHEIA
 * ==========================================================
 * Estilos para o feed de notícias em modo de tela cheia
 */

/* Container principal do feed de notícias */
#newsfeed {
  background: #f4f4f5; /* Fundo cinza claro */
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  z-index: 999; /* Camada de empilhamento alta */
  position: fixed; /* Posicionamento fixo */
  overflow-y: scroll; /* Rolagem vertical */
  top: 0; /* Alinhado ao topo */
  right: 0; /* Alinhado à direita */
  bottom: 0; /* Alinhado à base */
  left: 0; /* Alinhado à esquerda */
  overflow-x: hidden; /* Esconde rolagem horizontal */
  padding: 15px; /* Espaçamento interno */
  /* Feed de notícias em modo de tela cheia, cobrindo toda a interface */
}

/* Modal de imagens e backdrop */
#newsfeed_images_modal,
body.noscroll .backdrop {
  z-index: 99999999999; /* Camada de empilhamento muito alta */
  /* Garante que o modal de imagens fique acima de todos os outros elementos */
}

/* Wrapper para o conteúdo do feed */
.newsfeed_wrapper {
  height: 100%; /* Altura total */
  width: 100%; /* Largura total */
  overflow: scroll; /* Adiciona rolagem */
  /* Container para o conteúdo rolável do feed de notícias */
}

/* Estilo para posts fixados */
#newsfeed .newsfeed_post.pinned>.panel-body {
  background: #e6faff; /* Fundo azul muito claro */
  border: 1px dashed #b9dae2; /* Borda tracejada azul claro */
  border-bottom-left-radius: 0; /* Remove arredondamento inferior esquerdo */
  border-bottom-right-radius: 0; /* Remove arredondamento inferior direito */
  /* Destaque visual para posts fixados no topo do feed */
}

/* Posicionamento do menu dropdown em posts */
#newsfeed .newsfeed_post .dropdown {
  position: absolute; /* Posicionamento absoluto */
  right: 20px; /* Distância da direita */
  /* Menu de opções do post (editar, excluir, fixar) */
}

/* 
 * ==========================================================
 * FORMULÁRIO DE NOVO POST
 * ==========================================================
 * Estilos para o formulário de criação de novos posts
 */

/* Esconde mensagem da área de upload */
#newsfeed #new-post-form .dz-message {
  display: none; /* Oculta */
  /* Remove a mensagem padrão da área de arrastar e soltar */
}

/* Ajuste para prévia de uploads */
#newsfeed #new-post-form.dropzone .dz-preview {
  margin-bottom: 0; /* Remove margem inferior */
  /* Miniatura de arquivos anexados ao post */
}

/* Esconde barra de progresso de upload */
#newsfeed #new-post-form.dropzone .dz-progress {
  display: none; /* Oculta */
  /* Remove a barra de progresso de upload */
}

/* Ajuste para área de upload */
#newsfeed #new-post-form.dropzone {
  padding: 0; /* Remove preenchimento */
  /* Área para arrastar e soltar arquivos */
}

/* Remove borda do formulário de post */
#newsfeed form#new-post-form.dropzone {
  border: 0; /* Remove borda */
  /* Formulário para criar novos posts */
}

/* Estilo para área de upload ativa */
#new-post-form.dropzone-active {
  border: 3px dashed #eef2f4; /* Borda tracejada cinza claro */
  padding: 10px; /* Preenchimento */
  /* Feedback visual quando o usuário está arrastando arquivos para upload */
}

/* Indicador de tempo do post */
#newsfeed .post-time-ago {
  position: absolute; /* Posicionamento absoluto */
  right: 55px; /* Distância da direita */
  top: 34px; /* Distância do topo */
  /* Mostra há quanto tempo o post foi publicado (ex: "há 5 minutos") */
}

/* 
 * ==========================================================
 * COMENTÁRIOS EM POSTS
 * ==========================================================
 * Estilos para comentários em posts do feed de notícias
 */

/* Área de comentário */
#newsfeed .post-comment {
  padding: 10px 15px !important; /* Espaçamento interno (forçado) */
  /* Área que contém os comentários de um post */
}

/* Imagem do autor do comentário */
#newsfeed .comment-image {
  margin-right: 10px; /* Margem direita */
  /* Foto de perfil do usuário que comentou */
}

/* Campo de entrada de comentário */
#newsfeed .comment-input {
  padding-top: 1px; /* Preenchimento superior mínimo */
  /* Campo de texto para escrever novos comentários */
}

/* Comentário individual */
#newsfeed .comment {
  margin-top: 15px; /* Margem superior */
  /* Cada comentário individual em um post */
}

/* Remove margem superior do primeiro comentário */
#newsfeed .comment:first-child {
  margin-top: 0; /* Remove margem superior */
  /* Evita espaço extra antes do primeiro comentário */
}

/* 
 * ==========================================================
 * RODAPÉS E INTERAÇÕES EM POSTS
 * ==========================================================
 * Estilos para rodapés de posts e áreas de interação
 */

/* Rodapé de posts */
#newsfeed .newsfeed_post .panel-footer {
  border-bottom-right-radius: 0; /* Remove arredondamento inferior direito */
  border-bottom-left-radius: 0; /* Remove arredondamento inferior esquerdo */
  /* Rodapé de cada post no feed de notícias */
}

/* Áreas de comentários e curtidas */
#newsfeed .newsfeed_post .post-comment.panel-footer,
#newsfeed .newsfeed_post .post-likes.panel-footer {
  background: #f7f9fa; /* Fundo cinza muito claro */
  border: 1px solid #e4e5e7; /* Borda cinza claro */
  padding: 7px 15px; /* Espaçamento interno */
  border-bottom: 0; /* Remove borda inferior */
  color: #323a45; /* Cor do texto cinza escuro */
  /* Áreas que mostram comentários e curtidas em posts */
}

/* Conteúdo do post */
#newsfeed .newsfeed_post .post-content {
  border-bottom: 0; /* Remove borda inferior */
  font-size: 14px; /* Tamanho da fonte */
  /* Texto principal do post */
}

/* Área de comentário do usuário */
#newsfeed .newsfeed_post .user-comment.panel-footer {
  border-bottom: 1px solid #e4e5e7; /* Borda inferior cinza claro */
  border-top: 1px solid #e4e5e7; /* Borda superior cinza claro */
  /* Área onde o usuário escreve um novo comentário */
}

/* Área de curtida do usuário */
#newsfeed .newsfeed_post .user-post-like {
  background: #fff; /* Fundo branco */
  border-left: 1px solid #e4e5e7; /* Borda esquerda cinza claro */
  border-right: 1px solid #e4e5e7; /* Borda direita cinza claro */
  border-top: 0; /* Remove borda superior */
  /* Botão e área para curtir um post */
}

/* 
 * ==========================================================
 * MODAL DE CURTIDAS
 * ==========================================================
 * Estilos para o modal que mostra quem curtiu um post
 */

/* Área para cada usuário que curtiu */
.modal_like_area {
  padding: 10px; /* Espaçamento interno */
  border-bottom: 1px solid #e4e5e7; /* Borda inferior cinza claro */
  /* Item individual na lista de pessoas que curtiram um post */
}

/* Imagem de perfil na área de curtidas */
.modal_like_area img {
  margin-right: 10px; /* Margem direita */
  float: left; /* Flutua à esquerda */
  /* Foto de perfil do usuário que curtiu o post */
}

/* Último item na lista de curtidas */
.modal_like_area:last-child {
  border-bottom: 0; /* Remove borda inferior */
  /* Remove a linha divisória após o último usuário na lista */
}

/* Corpo do modal de curtidas */
.likes_modal .modal-body {
  padding-top: 0; /* Remove preenchimento superior */
  padding-bottom: 0; /* Remove preenchimento inferior */
  /* Maximiza o espaço para a lista de pessoas que curtiram */
}

/* Rodapé do modal de curtidas */
.likes_modal .modal-footer,
.likes_modal .modal-footer {
  text-align: center; /* Centraliza o texto */
  /* Botões de ação no modal de curtidas (ex: "Fechar") */
}

/* 
 * ==========================================================
 * MODAIS DE TAREFAS E EDITORES
 * ==========================================================
 * Estilos para modais de tarefas e painéis de editores
 */

/* Modal de tarefas */
#_task_modal {
  z-index: 99999; /* Camada de empilhamento muito alta */
  /* Garante que o modal de tarefas fique acima de outros elementos */
}

/* Painéis flutuantes do editor TinyMCE */
.mce-floatpanel {
  z-index: 999999 !important; /* Camada de empilhamento muito alta (forçada) */
  /* Garante que menus e painéis do editor fiquem acima de outros elementos */
}

/* Fundo escuro do modal do editor */
#mce-modal-block.mce-in {
  background-color: rgba(45, 62, 80, 0.79); /* Fundo azul escuro semi-transparente */
  opacity: 0.8 !important; /* Opacidade (forçada) */
  /* Overlay escuro para modais do editor TinyMCE */
}

/* 
 * ==========================================================
 * USUÁRIOS DE TAREFAS
 * ==========================================================
 * Estilos para gerenciar usuários atribuídos a tarefas
 */

/* Botão para remover usuário da tarefa */
.remove-task-user {
  position: absolute; /* Posicionamento absoluto */
  top: 35px; /* Distância do topo */
  left: 12px; /* Distância da esquerda */
  visibility: hidden; /* Inicialmente oculto */
  opacity: 0; /* Totalmente transparente */
  transition: visibility 0s, opacity 0.5s linear; /* Transição suave */
  /* Botão "X" para remover um usuário atribuído à tarefa */
}

/* Container para usuário atribuído à tarefa */
.task-user {
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  padding: 2px; /* Espaçamento interno */
  border-radius: 50%; /* Formato circular */
  vertical-align: middle; /* Alinhamento vertical */
  margin-bottom: 5px; /* Margem inferior */
  display: inline-block; /* Exibe como bloco em linha */
  position: relative; /* Posicionamento relativo */
  /* Exibe a foto de perfil do usuário atribuído à tarefa */
}

/* Estados de hover e ativo para usuário da tarefa */
.task-user:hover,
.task-user:active {
  border: 1px dashed #9ca3af; /* Borda tracejada cinza médio */
  /* Feedback visual ao passar o mouse sobre o usuário da tarefa */
}

/* Mostra o botão de remover ao passar o mouse */
.task-user:hover>a+.remove-task-user {
  visibility: visible; /* Torna visível */
  opacity: 1; /* Totalmente opaco */
  /* Exibe o botão de remover quando o mouse passa sobre o usuário */
}

/* 
 * ==========================================================
 * INFORMAÇÕES DE TAREFAS
 * ==========================================================
 * Estilos para exibição de informações sobre tarefas
 */

/* Container de informações da tarefa */
.task-info {
  padding: 6px; /* Espaçamento interno */
  /* Bloco que contém informações sobre a tarefa (data, status, etc.) */
}

/* Ícones nas informações da tarefa */
.task-info .task-info-icon {
  text-align: center; /* Centraliza o texto */
  margin-left: -10px; /* Margem esquerda negativa */
  margin-right: 9px; /* Margem direita */
  font-size: 16px; /* Tamanho da fonte */
  color: #9ca3af; /* Cor cinza médio */
  /* Ícones que representam diferentes tipos de informação (calendário, prioridade, etc.) */
}

/* Separador entre seções de informações */
.task-info-separator {
  margin: 8px 0px; /* Margens verticais */
  margin-left: -20px; /* Margem esquerda negativa */
  margin-right: -26px; /* Margem direita negativa */
  border-top: 1px solid #e5e7eb; /* Borda superior cinza claro */
  /* Linha divisória entre diferentes seções de informações da tarefa */
}

/* Coluna de informações da tarefa */
.task-info-col {
  padding: 5px; /* Espaçamento interno */
  border: 1px solid #2563eb; /* Borda azul */
  /* Coluna que contém informações específicas da tarefa */
}

/* Última coluna de informações */
.task-info-col:last-child {
  border-left: 0; /* Remove borda esquerda */
  border-top-right-radius: 5px; /* Arredondamento superior direito */
  border-bottom-right-radius: 5px; /* Arredondamento inferior direito */
  /* Coluna mais à direita no grupo de informações */
}

/* Primeira coluna de informações */
.task-info-col:first-child {
  border-right: 0; /* Remove borda direita */
  border-top-left-radius: 5px; /* Arredondamento superior esquerdo */
  border-bottom-left-radius: 5px; /* Arredondamento inferior esquerdo */
  /* Coluna mais à esquerda no grupo de informações */
}

/* Ícones nas colunas de informações */
.task-info-col i {
  font-size: 16px; /* Tamanho da fonte */
  /* Ícones usados nas colunas de informações (prioridade, status, etc.) */
}

/* Nome do funcionário na tarefa */
.task-staff-name {
  vertical-align: middle; /* Alinhamento vertical */
  font-size: 11px; /* Tamanho da fonte pequeno */
  color: #616161; /* Cor cinza médio */
  padding-left: 5px; /* Preenchimento esquerdo */
  padding-right: 5px; /* Preenchimento direito */
  /* Nome do funcionário responsável pela tarefa */
}

/* 
 * ==========================================================
 * PROPOSTAS E COMENTÁRIOS
 * ==========================================================
 * Estilos para propostas e seus comentários
 */

/* Comentário em proposta */
.proposal-comments .proposal-comment {
  padding: 5px; /* Espaçamento interno */
  border-radius: 8px; /* Cantos arredondados */
  background: #fff; /* Fundo branco */
  /* Balão de comentário em propostas comerciais */
}

/* 
 * ==========================================================
 * VISUALIZAÇÃO DE TAREFAS
 * ==========================================================
 * Estilos para a visualização detalhada de tarefas
 */

/* Corpo do painel da tarefa */
#task .panel-body {
  padding-bottom: 0; /* Remove preenchimento inferior */
  /* Maximiza o espaço para o conteúdo da tarefa */
}

/* Nome da tarefa */
#task #name {
  font-size: 18px; /* Tamanho da fonte */
  font-weight: 500; /* Peso da fonte semi-negrito */
  /* Título principal da tarefa na visualização detalhada */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA TAREFAS
 * ==========================================================
 * Estilos específicos para tarefas em dispositivos móveis
 */

/* Ajustes para telas menores que 768px */
@media (max-width: 768px) {
  /* Ajuste de margem para usuários de tarefas em mobile */
  .task-user {
    margin-top: 10px; /* Margem superior */
    /* Adiciona espaço entre usuários atribuídos em telas pequenas */
  }

  /* Botão de remover usuário sempre visível em mobile */
  .remove-task-user {
    visibility: visible; /* Sempre visível */
    opacity: 1; /* Totalmente opaco */
    /* Em dispositivos móveis, o botão de remover fica sempre visível para facilitar o uso */
  }
}

/* 
 * ==========================================================
 * FATURAS E ATIVIDADES
 * ==========================================================
 * Estilos para faturas e feed de atividades
 */

/* Parte superior da fatura */
.invoice-top {
  margin-bottom: 5px; /* Margem inferior */
  /* Cabeçalho da fatura com informações do cliente e número da fatura */
}

/* Conteúdo das abas de atividade na página inicial */
.home-activity .tab-content {
  height: 420px; /* Altura fixa */
  overflow-y: auto; /* Rolagem vertical */
  overflow-x: hidden; /* Esconde rolagem horizontal */
  padding-right: 15px; /* Preenchimento direito */
  /* Área que exibe as atividades recentes (tarefas, faturas, etc.) */
}

/* Ajuste para layouts RTL */
[dir="rtl"] .home-activity .tab-content {
  padding-right: 0; /* Remove preenchimento direito */
  padding-left: 15px; /* Adiciona preenchimento esquerdo */
  /* Suporte para idiomas da direita para a esquerda */
}

/* 
 * ==========================================================
 * TABELAS DE ITENS
 * ==========================================================
 * Estilos para tabelas de itens em faturas, orçamentos e propostas
 */

/* Cabeçalho da tabela de itens */
.table.items thead {
  background: #f3f4f6; /* Fundo cinza claro */
  color: #030712; /* Cor quase preta */
  /* Cabeçalho da tabela de itens em faturas e orçamentos */
}

/* Borda superior do cabeçalho */
.table.items>thead:first-child>tr:first-child>th {
  border-top: 1px solid #e5e7eb; /* Borda superior cinza claro */
  /* Borda superior da primeira linha do cabeçalho */
}

/* Células do cabeçalho */
.table.items thead th {
  border-right: 1px solid #e5e7eb; /* Borda direita cinza claro */
  /* Separador vertical entre colunas do cabeçalho */
}

/* Primeira célula do cabeçalho */
.table.items thead th:first-child {
  border-left: 1px solid #e5e7eb; /* Borda esquerda cinza claro */
  /* Borda esquerda da primeira coluna */
}

/* Espaçamento em células da tabela */
.table.items tbody>tr>td,
.table.items thead>tr>th {
  padding: 8px 10px; /* Espaçamento interno */
  /* Espaçamento dentro das células da tabela de itens */
}

/* Área principal da tabela de itens */
.table.items .main {
  margin-top: 35px; /* Margem superior */
  background-color: #f9fafb; /* Fundo cinza muito claro */
  border-right: 1px solid #e5e7eb; /* Borda direita cinza claro */
  border-left: 1px solid #e5e7eb; /* Borda esquerda cinza claro */
  border-bottom: 1px solid #e5e7eb; /* Borda inferior cinza claro */
  /* Área de totais e subtotais na tabela de itens */
}

/* 
 * ==========================================================
 * FORMULÁRIOS DE TRANSAÇÕES
 * ==========================================================
 * Estilos para formulários de faturas, orçamentos e propostas
 */

/* Largura mínima das colunas em formulários de transação */
._transaction_form .table.items thead>tr>th {
  min-width: 100px; /* Largura mínima */
  /* Garante largura mínima para as colunas da tabela de itens */
}

/* Ajuste para primeira e última coluna */
._transaction_form .table.items thead>tr>th:last-child,
._transaction_form .table.items thead>tr>th:first-child {
  min-width: auto; /* Largura automática */
  /* Permite que a primeira e última coluna se ajustem ao conteúdo */
}

/* Remove borda da primeira coluna */
._transaction_form .table.items thead>tr>th:first-child {
  border-right: 0; /* Remove borda direita */
  /* Elimina a borda entre a primeira e segunda coluna */
}

/* 
 * ==========================================================
 * CAIXAS DE BUSCA E DROPDOWN
 * ==========================================================
 * Estilos para caixas de busca e menus dropdown
 */

/* Caixa de busca em selects */
.bs-searchbox {
  border-bottom: 1px solid #e2e8f0; /* Borda inferior cinza claro */
  padding: 10px; /* Espaçamento interno */
  /* Campo de busca em menus dropdown de seleção */
}

/* Caixa de ações em selects */
.bs-actionsbox {
  padding: 10px; /* Espaçamento interno */
  /* Área de botões em menus dropdown de seleção */
}

/* Ajuste quando há caixa de busca e ações juntas */
.bs-searchbox+.bs-actionsbox {
  padding: 10px 8px 4px; /* Espaçamento interno */
  /* Espaçamento quando a caixa de ações vem logo após a caixa de busca */
}

/* Dropdown de busca no topo */
#top_search_dropdown {
  width: 400px; /* Largura fixa */
  /* Menu dropdown para a busca global no topo da página */
}

/* Lista de resultados de busca */
ul.search-results {
  max-height: 600px; /* Altura máxima */
  overflow-y: auto; /* Rolagem vertical */
  margin-top: 0px; /* Sem margem superior */
  margin-left: 4px; /* Margem esquerda */
  border-top-left-radius: 0; /* Remove arredondamento superior esquerdo */
  border-top-right-radius: 0; /* Remove arredondamento superior direito */
  border-top: 0; /* Remove borda superior */
  /* Lista de resultados exibida após uma busca */
}

/* 
 * ==========================================================
 * AJUSTES RTL ADICIONAIS
 * ==========================================================
 * Mais ajustes para suporte a idiomas da direita para a esquerda
 */

/* Ajuste para seletor de cores em RTL */
[dir="rtl"] .colorpicker.colorpicker-visible.dropdown-menu {
  left: 0 !important; /* Alinhado à esquerda (forçado) */
  right: auto; /* Não alinhado à direita */
  padding-left: 3px; /* Preenchimento esquerdo */
  margin-left: 45px; /* Margem esquerda */
  /* Posiciona corretamente o seletor de cores em layouts RTL */
}

/* Ajuste para imagens de perfil em RTL */
[dir="rtl"] .navbar-nav>li>a .staff-profile-image-small {
  margin-left: 15px; /* Margem esquerda */
  /* Adiciona espaço à esquerda da imagem de perfil em layouts RTL */
}

/* Ajuste para menu direito em RTL */
[dir="rtl"] .navbar-right {
  margin-left: 25px; /* Margem esquerda */
  margin-right: 0px; /* Remove margem direita */
  /* Ajusta o alinhamento do menu direito em layouts RTL */
}

/* Ajuste para seletor de data em RTL */
[dir="rtl"] .datepicker.dropdown-menu {
  right: auto; /* Não alinhado à direita */
  /* Posiciona corretamente o calendário em layouts RTL */
}

/* Ajuste para barras de ferramentas em RTL */
[dir="rtl"] div[class^="toolbar-container"] {
  direction: rtl; /* Direção da direita para a esquerda */
  /* Define a direção do texto nas barras de ferramentas em layouts RTL */
}

/* Ajuste para botões em RTL */
[dir="rtl"] .btn {
  text-align: right; /* Alinha o texto à direita */
  /* Alinha o texto dos botões à direita em layouts RTL */
}

/* 
 * ==========================================================
 * COLUNAS ESPECIAIS (5 COLUNAS)
 * ==========================================================
 * Classes para criar layouts com 5 colunas iguais
 * (O Bootstrap padrão só suporta até 12 colunas)
 */

/* Configuração básica para colunas de 1/5 (20%) */
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative; /* Posicionamento relativo */
  min-height: 1px; /* Altura mínima */
  padding-right: 15px; /* Preenchimento direito */
  padding-left: 15px; /* Preenchimento esquerdo */
  /* Propriedades comuns para todas as classes de coluna 1/5 */
}

/* Coluna 1/5 para todos os tamanhos (extra pequeno) */
.col-xs-5ths {
  width: 20%; /* Um quinto da largura (5 colunas iguais) */
  float: left; /* Flutua à esquerda */
  /* Usado para criar 5 colunas iguais em qualquer tamanho de tela */
}

/* Coluna 1/5 para telas pequenas e maiores */
@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%; /* Um quinto da largura */
    float: left; /* Flutua à esquerda */
    /* Usado para criar 5 colunas iguais em telas maiores que 768px */
  }
}

/* Coluna 1/5 para telas médias e maiores */
@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%; /* Um quinto da largura */
    float: left; /* Flutua à esquerda */
    /* Usado para criar 5 colunas iguais em telas maiores que 992px */
  }
}

/* Coluna 1/5 para telas grandes */
@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%; /* Um quinto da largura */
    float: left; /* Flutua à esquerda */
    /* Usado para criar 5 colunas iguais em telas maiores que 1200px */
  }
}

/* 
 * ==========================================================
 * METAS E PROGRESSO
 * ==========================================================
 * Estilos para exibição de metas e indicadores de progresso
 */

/* Container para indicador de progresso de meta */
.goal-progress {
  text-align: center; /* Centraliza o texto */
  position: relative; /* Posicionamento relativo */
  /* Container para o gráfico circular de progresso de meta */
}

/* Porcentagem da meta */
.goal-percent {
  position: absolute; /* Posicionamento absoluto */
  top: 100px; /* Distância do topo */
  left: 0; /* Alinhado à esquerda */
  width: 100%; /* Largura total */
  text-align: center; /* Centraliza o texto */
  line-height: 40px; /* Altura da linha */
  font-size: 50px; /* Tamanho da fonte grande */
  /* Texto que mostra a porcentagem no centro do gráfico circular */
}

/* Progresso de meta em tabelas */
table .goal-progress {
  display: inline-block; /* Exibe como bloco em linha */
  /* Versão menor do gráfico circular para uso em tabelas */
}

/* Porcentagem da meta em tabelas */
table .goal-percent {
  font-size: 10px; /* Tamanho da fonte pequeno */
  text-align: center; /* Centraliza o texto */
  left: 1px; /* Distância da esquerda */
  top: 22px; /* Distância do topo */
  line-height: 0; /* Altura da linha zero */
  /* Versão menor da porcentagem para uso em tabelas */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA BOTÕES E ESTATÍSTICAS
 * ==========================================================
 * Estilos específicos para botões e estatísticas em dispositivos móveis
 */

/* Ajustes para telas menores que 768px */
@media (max-width: 768px) {
  /* Botões de opção única em mobile */
  .single-option-buttons {
    display: inline-block; /* Exibe como bloco em linha */
    margin: 15px 0 15px 0; /* Margens verticais */
    /* Grupo de botões em dispositivos móveis */
  }

  /* Links e botões em grupos de opção única */
  .single-option-buttons a,
  .single-option-buttons button {
    width: 100%; /* Largura total */
    margin-bottom: 5px; /* Margem inferior */
    /* Faz com que cada botão ocupe toda a largura disponível */
  }

  /* Grupo de botões de opção */
  .option-buttons {
    float: right; /* Flutua à direita */
    /* Alinha o grupo de botões à direita */
  }

  /* Remove margem esquerda em botões de opção */
  .option-buttons .mleft4 {
    margin-left: 0 !important; /* Remove margem esquerda (forçado) */
    /* Elimina espaçamento desnecessário em dispositivos móveis */
  }

  /* Links e elementos flutuantes em botões de opção */
  .option-buttons a,
  .option-buttons .pull-right {
    float: left !important; /* Flutua à esquerda (forçado) */
    margin-right: 4px; /* Margem direita */
    /* Reorganiza os botões para melhor visualização em telas pequenas */
  }

  /* Ajuste para dropdown de busca no topo */
  #top_search_dropdown {
    width: 300px; /* Largura reduzida */
    /* Reduz a largura do dropdown de busca em dispositivos móveis */
  }

  /* Ajuste para corpo do painel de tarefas */
  #task .panel-body {
    padding-bottom: 20px; /* Preenchimento inferior */
    /* Adiciona mais espaço abaixo do conteúdo da tarefa */
  }

  /* Ajuste para colunas de informações de tarefas */
  .task-info-col {
    padding: 5px; /* Espaçamento interno */
    border: 1px solid #2563eb !important; /* Borda azul (forçada) */
    /* Mantém a borda visível em todas as colunas */
  }

  /* Ajuste para a terceira coluna de informações */
  .task-info-col:nth-child(3) {
    margin-bottom: 20px; /* Margem inferior */
    /* Adiciona espaço após a terceira coluna */
  }

  /* Ajuste para estatísticas na página inicial */
  .home-stats .col-md-5ths {
    width: 100%; /* Largura total */
    margin-bottom: 4px; /* Margem inferior */
    /* Faz com que as estatísticas fiquem empilhadas em dispositivos móveis */
  }
}

/* 
 * ==========================================================
 * ANEXOS E DESCRIÇÕES
 * ==========================================================
 * Estilos para anexos e descrições em feeds e listas
 */

/* Esconde imagens em descrições de feed */
.feed_description img {
  display: none; /* Oculta */
  /* Evita que imagens sejam exibidas nas descrições do feed de atividades */
}

/* Ícone de pré-visualização de anexo */
.attachment-icon-preview {
  font-size: 18px; /* Tamanho da fonte */
  color: #64748b; /* Cor cinza azulado */
  margin-right: 15px; /* Margem direita */
  /* Ícone que representa o tipo de arquivo anexado (PDF, imagem, etc.) */
}

/* Ícone pequeno de pré-visualização de anexo */
.attachment-preview-icon-small {
  color: #64748b; /* Cor cinza azulado */
  margin-right: 5px; /* Margem direita */
  font-size: 13px; /* Tamanho da fonte */
  /* Versão menor do ícone de tipo de arquivo para listas compactas */
}

/* 
 * ==========================================================
 * CLASSES DE TIPOGRAFIA E RESUMO
 * ==========================================================
 * Estilos para tamanhos de fonte e elementos de resumo
 */

/* Fonte de tamanho médio */
.font-medium {
  font-size: 15px !important; /* Tamanho da fonte (forçado) */
  /* Usado para textos de destaque médio em várias partes do sistema */
}

/* Fonte de tamanho médio-pequeno */
.font-medium-xs {
  font-size: 13px !important; /* Tamanho da fonte (forçado) */
  /* Usado para textos de destaque menor em várias partes do sistema */
}

/* Estados de hover e ativo para links no resumo da página inicial */
.home-summary a:hover,
.home-summary a:active {
  opacity: 0.7; /* Semitransparente */
  color: inherit; /* Mantém a cor original */
  /* Efeito visual ao passar o mouse sobre links no resumo da página inicial */
}

/* Separador no resumo da página inicial */
.home-summary-separator {
  border-top: 1px dashed #eef2f4; /* Borda superior tracejada cinza claro */
  /* Linha divisória entre diferentes seções do resumo */
}

/* Relatório de despesas */
.expenses-report {
  margin-top: 0; /* Remove margem superior */
  /* Ajuste para o relatório de despesas */
}

/* 
 * ==========================================================
 * ÍCONES DE TIPOS DE ARQUIVOS (MIME)
 * ==========================================================
 * Estilos para ícones de diferentes tipos de arquivos
 */

/* Configuração básica para ícones de tipos de arquivos */
.mime {
  background-repeat: no-repeat; /* Não repete a imagem de fundo */
  background-position: 0 0; /* Posicionada no canto superior esquerdo */
  padding: 1px 0 4px 26px; /* Preenchimento para acomodar o ícone */
  /* Estilo base para todos os ícones de tipos de arquivos */
}

/* Ícone para documentos Word */
.mime-word {
  background-image: url(../images/mime/word.png); /* Imagem de fundo */
  /* Ícone para arquivos .doc e .docx */
}

/* Ícone para planilhas Excel */
.mime-excel {
  background-image: url(../images/mime/excel.png); /* Imagem de fundo */
  /* Ícone para arquivos .xls e .xlsx */
}

/* Ícone para apresentações PowerPoint */
.mime-powerpoint {
  background-image: url(../images/mime/powerpoint.png); /* Imagem de fundo */
  /* Ícone para arquivos .ppt e .pptx */
}

/* Ícone para documentos PDF */
.mime-pdf {
  background-image: url(../images/mime/pdf.png); /* Imagem de fundo */
  /* Ícone para arquivos .pdf */
}

/* Ícone para arquivos compactados */
.mime-zip {
  background-image: url(../images/mime/zip.png); /* Imagem de fundo */
  /* Ícone para arquivos .zip, .rar, etc. */
}

/* Ícone para arquivos de imagem */
.mime-image {
  background-image: url(../images/mime/image.png); /* Imagem de fundo */
  /* Ícone para arquivos .jpg, .png, .gif, etc. */
}

/* Ícone para arquivos genéricos */
.mime-file {
  background-image: url(../images/mime/file.png); /* Imagem de fundo */
  /* Ícone para tipos de arquivos não especificados */
}

/* Ícone para arquivos de vídeo */
.mime-video {
  background-image: url(../images/mime/video.png); /* Imagem de fundo */
  /* Ícone para arquivos .mp4, .avi, .mov, etc. */
}

/* Ícone para arquivos de áudio */
.mime-audio {
  background-image: url(../images/mime/audio.png); /* Imagem de fundo */
  /* Ícone para arquivos .mp3, .wav, .ogg, etc. */
}

/* 
 * ==========================================================
 * CONTAINERS DE ARQUIVOS
 * ==========================================================
 * Estilos para listas e containers de arquivos
 */

/* Container para listas de arquivos */
.files-container {
  margin: 0 0 10px; /* Margem inferior */
  /* Container para listas de arquivos anexados */
}

/* Lista de arquivos */
.files {
  padding-left: 0; /* Remove preenchimento esquerdo */
  list-style: none; /* Remove marcadores de lista */
  margin: 0; /* Remove margens */
  /* Lista não ordenada de arquivos anexados */
}

/* Links em ícones de tipos de arquivos */
.mime>a {
  color: #555 !important; /* Cor cinza escuro (forçada) */
  text-decoration: none; /* Remove sublinhado */
  /* Links para download de arquivos com ícones de tipo */
}

/* 
 * ==========================================================
 * ANEXOS ESPECÍFICOS
 * ==========================================================
 * Estilos para anexos em diferentes contextos (leads, faturas, contratos)
 */

/* Linhas divisórias em anexos */
.lead-attachment-wrapper hr,
.invoice-attachment-wrapper hr {
  margin-top: 0; /* Remove margem superior */
  /* Remove espaço acima das linhas divisórias em anexos */
}

/* Primeiro anexo em leads */
#lead_attachments .lead-attachment-wrapper:first-child {
  padding-top: 15px; /* Preenchimento superior */
  border-top: 1px solid #e2e8f0; /* Borda superior cinza claro */
  /* Adiciona espaço e borda acima do primeiro anexo em leads */
}

/* Pré-visualização de anexos de vendas */
#sales_attach_file .sales-attach-file-preview {
  padding-top: 5px; /* Preenchimento superior */
  /* Espaço acima das pré-visualizações de anexos em vendas */
}

/* Primeiro anexo em vendas */
#sales_attach_file .sales-attach-file-preview:first-child {
  border-top: 1px solid #e2e8f0; /* Borda superior cinza claro */
  padding-top: 30px; /* Preenchimento superior maior */
  /* Adiciona espaço e borda acima do primeiro anexo em vendas */
}

/* Container de anexos em contratos */
#contract_attachments .contract-attachment-wrapper {
  padding-bottom: 8px; /* Preenchimento inferior */
  /* Espaço abaixo de cada anexo em contratos */
}

/* Primeiro anexo em contratos */
#contract_attachments .contract-attachment-wrapper:first-child {
  border-top: 1px solid #e2e8f0; /* Borda superior cinza claro */
  padding-top: 30px; /* Preenchimento superior maior */
  /* Adiciona espaço e borda acima do primeiro anexo em contratos */
}

/* 
 * ==========================================================
 * ABAS E AJUSTES DE NAVEGADORES
 * ==========================================================
 * Estilos para abas e ajustes específicos de navegadores
 */

/* Abas sem margens no corpo */
.tabs-in-body-no-margin {
  margin-left: -20px; /* Margem esquerda negativa */
  margin-right: -20px; /* Margem direita negativa */
  /* Remove as margens laterais das abas para que fiquem alinhadas com as bordas */
}

/* Ajuste específico para Safari */
.safari .tabs-in-body-no-margin {
  margin-left: 0px; /* Remove margem esquerda */
  margin-right: 0px; /* Remove margem direita */
  /* Correção para o navegador Safari que tem comportamento diferente */
}

/* 
 * ==========================================================
 * ITENS ARRASTÁVEIS E ORDENÁVEIS
 * ==========================================================
 * Estilos para elementos que podem ser arrastados e reordenados
 */

/* Item sendo arrastado em tabelas */
.table .item.ui-sortable-helper {
  background: #e2e8f0; /* Fundo cinza claro */
  opacity: 0.5; /* Semitransparente */
  border: 0 !important; /* Remove bordas (forçado) */
  /* Estilo visual do item enquanto está sendo arrastado */
}

/* Campos de entrada em itens arrastáveis */
.table .item.ui-sortable-helper input,
.table .item.ui-sortable-helper textarea {
  background: transparent; /* Fundo transparente */
  /* Mantém os campos de entrada visíveis durante o arrasto */
}

/* Células principais em tabelas de itens */
table.items tr.main td {
  padding-top: 25px; /* Preenchimento superior */
  padding-bottom: 25px; /* Preenchimento inferior */
  /* Espaçamento maior para as células principais (totais, subtotais) */
}

/* 
 * ==========================================================
 * PERFIL DE CLIENTE
 * ==========================================================
 * Estilos para elementos do perfil de cliente
 */

/* Mapa do cliente */
.customer_map {
  height: 500px; /* Altura fixa */
  /* Mapa que mostra a localização do cliente */
}

/* Anexo no perfil do cliente */
.customer-profile-attachment {
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  padding: 20px; /* Espaçamento interno */
  height: 200px; /* Altura fixa */
  /* Container para anexos no perfil do cliente */
}

/* Container de imagem de anexo no perfil */
.customeer-profile-attachment-image {
  max-height: 200px; /* Altura máxima */
  overflow: hidden; /* Esconde conteúdo que ultrapassa */
  /* Container para imagens anexadas ao perfil do cliente */
}

/* Imagem de anexo no perfil */
.customeer-profile-attachment-image img {
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  /* Preenche todo o espaço disponível no container */
}

/* 
 * ==========================================================
 * QUADROS KANBAN
 * ==========================================================
 * Estilos para quadros kanban (visualização de tarefas em colunas)
 */

/* Container do quadro kanban */
.kan-ban-wrapper {
  overflow: auto; /* Adiciona rolagem quando necessário */
  /* Container externo para o quadro kanban com rolagem horizontal */
}

/* Container interno do quadro kanban */
.kb-kan-ban#kan-ban {
  overflow: auto; /* Adiciona rolagem quando necessário */
  /* Container interno para o quadro kanban com rolagem horizontal */
}

/* Corpo do painel no quadro kanban */
#kan-ban .panel-body {
  border-top: 0; /* Remove borda superior */
  padding: 15px 20px; /* Espaçamento interno */
  margin: 10px 5px 10px 5px; /* Margens */
  /* Estilo para cada cartão no quadro kanban */
}

/* Conteúdo do quadro kanban — chrome visual em bora-admin.css / leads-kanban.css */
.kan-ban-content {
  padding: 7px;
}

/* Nomes de leads e tarefas no quadro kanban — dragger antigo desligado (Bora) */
#kan-ban .panel-body .lead-name,
#kan-ban .panel-body .task-name {
  background: none !important;
  padding-left: 0;
}

/* Nome de lead no quadro kanban */
/* ============================================ */
/* MODIFICAÇÃO 2: INDICADOR VISUAL "DRAGGER" REMOVIDO */
/* ============================================ */
/* Removido deslocamento negativo usado para o dragger e ajustado espaçamento */
#kan-ban .panel-body .lead-name {
  margin-left: 0;
  padding-left: 0;
  background: none !important;
}

/* ============================================ */

/* ============================================ */
/* CSS PARA PLACA MERCOSUL (ATIVAR SE NECESSÁRIO) */
/* ============================================ */
/* Descomente o bloco abaixo se for ativar a placa Mercosul no PHP */
/*
.placa-mercosul {
    display: inline-block;
    width: 50px;
    height: 20px;
    font-size: 8px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    background: white;
    border: 1px solid #000;
    border-top: 3px solid #003194;
    padding: 2px 4px;
    text-align: center;
    line-height: 1.2;
    margin-left: 6px;
}
*/

/* ============================================ */

/* Nome de tarefa em itens não ordenáveis */
#kan-ban .not-sortable .panel-body .task-name {
  background: none !important;
  padding-left: 0;
}

/* Tarefas ordenáveis */
.ms-task .sortable {
  background: url(../images/dragger.png) 1px 2px no-repeat; /* Ícone de arrastar */
  padding-left: 14px; /* Preenchimento esquerdo */
  /* Indicador visual para tarefas que podem ser arrastadas */
}

/* Remove borda direita da última coluna */
#kan-ban .border-right:last-child {
  border-right: 0; /* Remove borda direita */
  /* Evita borda duplicada no final do quadro kanban */
}

/* Coluna do quadro kanban */
.kan-ban-col {
  width: 340px; /* Largura fixa */
  margin-right: 6px; /* Margem direita */
  display: inline-block; /* Exibe como bloco em linha */
  float: left; /* Flutua à esquerda */
  /* Cada coluna do quadro kanban (ex: "A fazer", "Em andamento", "Concluído") */
}

/* Última coluna do quadro kanban */
.kan-ban-col:last-child {
  margin-right: 0; /* Remove margem direita */
  /* Remove o espaço após a última coluna */
}

/* Container de conteúdo do kanban */
.kan-ban-content-wrapper {
  word-break: break-word; /* Quebra palavras longas */
  word-wrap: break-word; /* Quebra palavras longas (alternativo) */
  overflow-x: hidden; /* Esconde rolagem horizontal */
  overflow-y: auto; /* Adiciona rolagem vertical quando necessário */
  /* Container para o conteúdo dentro de cada coluna do kanban */
}

/* Botão de expansão no topo do kanban (oculto no overlay Bora) */
.kan-ban-expand-top {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 3px 7px;
  font-size: 11px;
}

/* Itens de lista no kanban */
#kan-ban li,
#kan-ban ul {
  list-style: none !important; /* Remove marcadores de lista (forçado) */
  /* Remove os marcadores padrão das listas no quadro kanban */
}

/* 
 * ==========================================================
 * SELETOR DE CORES
 * ==========================================================
 * Estilos para seletores de cores em diferentes contextos
 */

/* Seletor de cores básico */
.cpicker {
  cursor: pointer; /* Cursor de mão */
  border-radius: 2%; /* Cantos levemente arredondados */
  float: left; /* Flutua à esquerda */
  margin-right: 7px; /* Margem direita */
  border-radius: 2px; /* Cantos arredondados */
  /* Elemento de seleção de cores para categorias e etiquetas */
}

/* Container de configurações do kanban */
.kan-ban-settings {
  display: inline-block; /* Exibe como bloco em linha */
  padding: 18px 0 7px 10px; /* Espaçamento interno */
  /* Área de configurações do quadro kanban */
}

/* Seletor de cores pequeno */
.cpicker-small {
  width: 15px; /* Largura fixa */
  height: 15px; /* Altura fixa */
  /* Versão pequena do seletor de cores */
}

/* Seletor de cores grande */
.cpicker-big {
  width: 20px; /* Largura fixa */
  height: 20px; /* Altura fixa */
  /* Versão maior do seletor de cores */
}

/* 
 * ==========================================================
 * CLASSES DE CORES
 * ==========================================================
 * Estilos para elementos com cores específicas
 */

/* Estados de hover e ativo para links brancos */
.color-white[href]:hover,
.color-white[href]:active {
  color: #e2e8f0; /* Cor cinza claro */
  /* Efeito visual ao passar o mouse sobre links brancos */
}

/* Elementos com cor branca */
.color-white,
.color-white[href] {
  color: #fff; /* Cor branca */
  /* Usado para texto branco em fundos escuros */
}

/* 
 * ==========================================================
 * ÍCONES DE TAREFAS
 * ==========================================================
 * Estilos para ícones indicadores de status de tarefas
 */

/* Ícone básico de tarefa */
.task-icon {
  border-radius: 50%; /* Formato circular */
  padding: 3px; /* Espaçamento interno */
  margin-right: 6px; /* Margem direita */
  vertical-align: middle; /* Alinhamento vertical */
  /* Ícone indicador de status da tarefa (concluída ou não) */
}

/* Ícone de tarefa em tabelas */
.table .task-icon {
  font-size: 11px; /* Tamanho da fonte menor */
  margin-left: 7px; /* Margem esquerda */
  margin-right: -3px; /* Margem direita negativa */
  /* Versão menor do ícone para uso em tabelas */
}

/* Ajuste para ícone de tarefa em tabelas em layouts RTL */
[dir="rtl"] .table .task-icon {
  margin-left: -3px; /* Margem esquerda negativa */
  margin-right: 7px; /* Margem direita */
  /* Suporte para idiomas da direita para a esquerda */
}

/* Ícone para tarefa concluída */
.task-finished-icon {
  color: #22c55e; /* Cor verde */
  border: 1px dashed #22c55e; /* Borda tracejada verde */
  /* Indicador visual para tarefas concluídas */
}

/* Ícone para tarefa não concluída */
.task-unfinished-icon {
  color: #6f6f6f; /* Cor cinza */
  border: 1px dashed #6f6f6f; /* Borda tracejada cinza */
  /* Indicador visual para tarefas pendentes */
}

/* 
 * ==========================================================
 * AJUSTES RTL PARA TAREFAS
 * ==========================================================
 * Ajustes para suporte a idiomas da direita para a esquerda em tarefas
 */

/* Nome de tarefa em tabela em layouts RTL */
[dir="rtl"] .main-tasks-table-href-name {
  float: right; /* Flutua à direita */
  /* Inverte o alinhamento do nome da tarefa em tabelas */
}

/* Nome de tarefa após link em layouts RTL */
[dir="rtl"] a+.main-tasks-table-href-name {
  float: right; /* Flutua à direita */
  /* Inverte o alinhamento do nome da tarefa após um link */
}

/* 
 * ==========================================================
 * ELEMENTOS ADICIONAIS DO KANBAN
 * ==========================================================
 * Estilos para elementos adicionais do quadro kanban
 */

/* Corpo do painel no kanban */
.kan-ban-body .panel_s {
  margin-bottom: 0; /* Remove margem inferior */
  position: relative; /* Posicionamento relativo */
  /* Container para cada cartão no quadro kanban */
}

/* Empty/load-more também usam .not-sortable — não esmaecer o quadro Bora */
#kan-ban .not-sortable {
  opacity: 1;
}

/* Popovers no kanban e colunas de marcos */
#kan-ban .popover,
.milestone-column .popover {
  width: 340px; /* Largura fixa */
  max-width: 340px; /* Largura máxima */
  text-align: center; /* Centraliza o texto */
  /* Balões de informação que aparecem ao passar o mouse sobre elementos */
}

/* Popover menor */
.popover-250 .popover {
  width: 250px; /* Largura fixa menor */
  max-width: 250px; /* Largura máxima menor */
  /* Versão menor do balão de informação */
}

/* 
 * ==========================================================
 * ELEMENTOS DE DESTAQUE UI
 * ==========================================================
 * Estilos para elementos de destaque na interface do usuário
 */

/* Destaque para cartão sendo arrastado */
.ui-state-highlight-card {
  height: 130px !important; /* Altura fixa (forçada) */
  border: 2px dashed #d1d1d1; /* Borda tracejada cinza */
  margin-bottom: 15px; /* Margem inferior */
  display: block; /* Exibe como bloco */
  width: 95.5%; /* Largura quase total */
  margin-left: 7px; /* Margem esquerda */
  /* Indica visualmente onde o cartão será posicionado durante o arrasto */
}

/* Destaque para item kanban sendo arrastado */
.ui-state-highlight-kan-ban-kb {
  height: 100px; /* Altura fixa */
  border: 2px dashed #d1d1d1; /* Borda tracejada cinza */
  margin-bottom: 15px; /* Margem inferior */
  display: block; /* Exibe como bloco */
  width: 95.5%; /* Largura quase total */
  margin-left: 7px; /* Margem esquerda */
  /* Indica visualmente onde o item será posicionado durante o arrasto no kanban */
}

/* 
 * ==========================================================
 * CAMADAS DE EMPILHAMENTO (Z-INDEX)
 * ==========================================================
 * Estilos para controlar a ordem de empilhamento de elementos
 */

/* Elementos auxiliares do editor TinyMCE em modais */
body.modal-open .tox-tinymce-aux {
  z-index: 99999999999; /* Camada de empilhamento muito alta */
  /* Garante que os menus do editor fiquem acima de outros elementos quando um modal está aberto */
}

/* Coluna única de tarefa em modal */
.modal .task-single-col {
  z-index: 999999999999; /* Camada de empilhamento muito alta */
  /* Garante que a coluna de tarefa fique acima de outros elementos em modais */
}

/* Modal de tarefa única */
.task-modal-single {
  z-index: 10001; /* Camada de empilhamento alta */
  /* Define a ordem de empilhamento do modal de tarefa */
}

/* 
 * ==========================================================
 * COMENTÁRIOS DE TAREFAS
 * ==========================================================
 * Estilos para comentários em tarefas
 */

/* Container para comentário de tarefa */
#task-comments .comment-wrapper {
  display: block; /* Exibe como bloco */
  width: 100%; /* Largura total */
  /* Container para cada comentário em uma tarefa */
}

/* Conteúdo do comentário de tarefa */
#task-comments .comment-content {
  word-break: break-word; /* Quebra palavras longas */
  overflow-x: scroll; /* Adiciona rolagem horizontal */
  overflow-wrap: break-word; /* Quebra palavras longas (alternativo) */
  overflow: auto; /* Adiciona rolagem quando necessário */
  /* Texto do comentário com tratamento para palavras longas */
}

/* Ajuste para Firefox */
.firefox #task-comments .comment-content {
  word-break: initial; /* Usa quebra de palavra padrão */
  /* Correção específica para o navegador Firefox */
}

/* Campo de entrada para comentário de tarefa */
#task_comment {
  line-height: initial; /* Altura da linha padrão */
  height: initial; /* Altura automática */
  opacity: 0.7; /* Semitransparente */
  /* Campo de texto para adicionar novos comentários à tarefa */
}

/* Área de edição de comentário de tarefa */
.task-modal-single .edit-task-comment {
  padding-top: 15px; /* Preenchimento superior */
  /* Formulário para editar um comentário existente */
}

/* Comentário individual em modal de tarefa */
.task-modal-single .task-comment {
  padding: 10px 8px 0 8px; /* Espaçamento interno */
  margin-bottom: 10px; /* Margem inferior */
  /* Cada comentário individual no modal de tarefa */
}

/* Último comentário destacado */
.task-modal-single .task-comment.highlight-bg:last-child {
  padding-bottom: 10px; /* Preenchimento inferior */
  /* Adiciona espaço abaixo do último comentário destacado */
}

/* Comentário destacado */
.task-modal-single .task-comment.highlight-bg {
  border-radius: 5px; /* Cantos arredondados */
  /* Estilo para comentários destacados (geralmente o mais recente) */
}

/* Separador em comentário destacado */
.task-modal-single .task-comment.highlight-bg .task-info-separator {
  border: 1px solid transparent; /* Borda transparente */
  /* Torna o separador invisível em comentários destacados */
}

/* 
 * ==========================================================
 * LAYOUT DO MODAL DE TAREFA
 * ==========================================================
 * Estilos para o layout de colunas no modal de tarefa
 */

/* Coluna direita no modal de tarefa */
.task-single-col-right {
  background: #f9fafb; /* Fundo cinza muito claro */
  padding: 13px 20px; /* Espaçamento interno */
  border-left: 1px solid #e5e7eb; /* Borda esquerda cinza claro */
  border-bottom-right-radius: 6px; /* Canto inferior direito arredondado */
  /* Coluna lateral direita com informações da tarefa */
}

/* Opções de menu na coluna direita */
.task-single-col-right .task-menu-options {
  position: absolute; /* Posicionamento absoluto */
  margin-top: 7px; /* Margem superior */
  right: 10px; /* Distância da direita */
  /* Botões de opções no canto superior direito da coluna */
}

/* Coluna esquerda no modal de tarefa */
.task-single-col-left {
  padding: 25px; /* Espaçamento interno */
  background: #fff; /* Fundo branco */
  min-height: 600px; /* Altura mínima */
  border-bottom-left-radius: 6px; /* Canto inferior esquerdo arredondado */
  /* Coluna principal com o conteúdo da tarefa */
}

/* Corpo do modal de tarefa */
.task-modal-single .modal-body {
  padding-top: 0; /* Remove preenchimento superior */
  padding-bottom: 0; /* Remove preenchimento inferior */
  background: #f8fafc; /* Fundo cinza muito claro */
  border-bottom-left-radius: 6px; /* Canto inferior esquerdo arredondado */
  border-bottom-right-radius: 6px; /* Canto inferior direito arredondado */
  /* Container principal do modal de tarefa */
}

/* Botão de configurações de tarefas */
.tasks-btn-settings-fix {
  padding: 6px 12px; /* Espaçamento interno */
  font-size: 13px; /* Tamanho da fonte */
  border-radius: 8px; /* Cantos arredondados */
  /* Botão de configurações com tamanho fixo */
}

/* Botão de fechar no modal de tarefa */
.task-modal-single .task-m-close {
  margin-right: 43px; /* Margem direita */
  margin-top: 9px; /* Margem superior */
  /* Botão X para fechar o modal de tarefa */
}

/* 
 * ==========================================================
 * CHECKLISTS DE TAREFAS
 * ==========================================================
 * Estilos para checklists em tarefas
 */

/* Item de checklist */
.checklist {
  padding: 5px 15px 5px 5px; /* Espaçamento interno */
  margin-top: 10px; /* Margem superior */
  border-radius: 8px; /* Cantos arredondados */
  cursor: move; /* Cursor de arrastar */
  /* Item individual da checklist que pode ser arrastado */
}

/* Checkbox dentro do item de checklist */
.checklist .checkbox.checklist-checkbox {
  margin-top: 0; /* Remove margem superior */
  margin-bottom: 0; /* Remove margem inferior */
  height: 25px; /* Altura fixa */
  /* Caixa de seleção para marcar itens como concluídos */
}

/* Estados de hover para itens de checklist */
.checklist:hover,
.checklist:hover textarea[name="checklist-description"]:disabled {
  background: #f3f4f6; /* Fundo cinza claro */
  /* Feedback visual ao passar o mouse sobre o item */
}

/* Estilo para o elemento antes do label do checkbox */
.checkbox.checklist-checkbox label::before {
  width: 20px; /* Largura */
  height: 20px; /* Altura */
  margin-left: -21px; /* Margem esquerda negativa */
  border-radius: 50%; /* Formato circular */
  /* Cria o círculo para o checkbox personalizado */
}

/* Estilo para labels em checklists */
.checklist label:not(.control-label) {
  font-weight: normal; /* Peso da fonte normal */
  /* Remove o negrito dos labels de checklist */
}

/* Estilo para o elemento após o label do checkbox (marca de seleção) */
.checkbox.checklist-checkbox label::after {
  margin-left: -20px; /* Margem esquerda negativa */
  padding-left: 4.5px; /* Preenchimento esquerdo */
  padding-top: 3px; /* Preenchimento superior */
  font-size: 10px; /* Tamanho da fonte pequeno */
  /* Posiciona o ícone de marca de seleção dentro do círculo */
}

/* Campo de texto para a caixa de checklist */
textarea[name="checklist-box"] {
  cursor: pointer; /* Cursor de mão */
  /* Campo de texto para a caixa de checklist (geralmente oculto) */
}

/* Campo de texto para descrição do item de checklist */
textarea[name="checklist-description"] {
  resize: none; /* Impede redimensionamento */
  overflow: hidden; /* Esconde rolagem */
  font-size: 14px; /* Tamanho da fonte */
  border-radius: 3px; /* Cantos arredondados */
  padding: 0 5px 0px 5px; /* Espaçamento interno */
  border: 0; /* Remove borda */
  outline: 0; /* Remove contorno */
  width: 100%; /* Largura total */
  /* Campo de texto para a descrição do item de checklist */
}

/* Estados de foco, hover e ativo para o campo de descrição */
textarea[name="checklist-description"]:focus,
textarea[name="checklist-description"]:hover,
textarea[name="checklist-description"]:active {
  outline: 0; /* Remove contorno */
  /* Remove o contorno ao focar, passar o mouse ou ativar o campo */
}

/* Campo de descrição desabilitado */
textarea[name="checklist-description"]:disabled {
  background: #fff; /* Fundo branco */
  color: #212121; /* Cor do texto quase preta */
  opacity: 1; /* Totalmente opaco */
  /* Mantém o campo visível mesmo quando desabilitado */
}

/* 
 * ==========================================================
 * INFORMAÇÕES ADICIONAIS DE TAREFAS
 * ==========================================================
 * Estilos para elementos informativos em tarefas
 */

/* Título de informações de tarefa */
.task-info h5 {
  font-size: 14px; /* Tamanho da fonte */
  margin: 0; /* Remove margens */
  font-weight: 400; /* Peso da fonte normal */
  color: #6b7280; /* Cor cinza médio */
  /* Título de seção nas informações da tarefa */
}

/* Label para ações de tarefa */
.label-task-action {
  padding: 9px; /* Espaçamento interno */
  display: block; /* Exibe como bloco */
  /* Rótulo para ações disponíveis na tarefa */
}

/* Modal de lembretes */
.reminder-modal {
  overflow: visible !important; /* Permite que o conteúdo ultrapasse os limites (forçado) */
  /* Garante que o modal de lembretes exiba corretamente elementos como calendários */
}

/* 
 * ==========================================================
 * LISTAS ANINHADAS (NESTABLE)
 * ==========================================================
 * Estilos para listas que podem ser aninhadas e reordenadas
 */

/* Esconde espaço reservado em listas sem filhos */
.dd-nochildren .dd-placeholder {
  display: none; /* Oculta */
  /* Remove o espaço reservado em listas que não têm itens filhos */
}

/* Container principal para listas aninhadas */
.dd {
  position: relative; /* Posicionamento relativo */
  display: block; /* Exibe como bloco */
  margin: 0; /* Remove margens */
  padding: 0; /* Remove preenchimento */
  max-width: 600px; /* Largura máxima */
  list-style: none; /* Remove marcadores de lista */
  font-size: 13px; /* Tamanho da fonte */
  line-height: 20px; /* Altura da linha */
  /* Container para listas aninhadas e reordenáveis (como menus) */
}

/* Lista aninhada */
.dd-list {
  display: block; /* Exibe como bloco */
  position: relative; /* Posicionamento relativo */
  margin: 0; /* Remove margens */
  padding: 0; /* Remove preenchimento */
  list-style: none; /* Remove marcadores de lista */
  /* Lista de itens dentro do container aninhado */
}

/* Lista aninhada dentro de outra lista */
.dd-list .dd-list {
  padding-left: 30px; /* Preenchimento esquerdo */
  /* Recuo para listas filhas, criando hierarquia visual */
}

/* Lista aninhada colapsada */
.dd-collapsed .dd-list {
  display: none; /* Oculta */
  /* Esconde a lista quando está colapsada */
}

/* Itens, espaços vazios e espaços reservados em listas aninhadas */
.dd-item,
.dd-empty,
.dd-placeholder {
  display: block; /* Exibe como bloco */
  position: relative; /* Posicionamento relativo */
  margin: 0; /* Remove margens */
  padding: 0; /* Remove preenchimento */
  min-height: 20px; /* Altura mínima */
  font-size: 13px; /* Tamanho da fonte */
  line-height: 20px; /* Altura da linha */
  /* Elementos que compõem a lista aninhada */
}

/* Alça para arrastar itens da lista */
.dd-handle {
  display: block; /* Exibe como bloco */
  height: 30px; /* Altura fixa */
  margin: 5px 0; /* Margens verticais */
  padding: 5px 10px; /* Espaçamento interno */
  color: #334155; /* Cor cinza escuro */
  text-decoration: none; /* Remove decoração de texto */
  font-weight: bold; /* Peso da fonte negrito */
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  background: #f8fafc; /* Fundo cinza muito claro */
  border-radius: 3px; /* Cantos arredondados */
  box-sizing: border-box; /* Inclui bordas e preenchimento na largura/altura */
  /* Alça visível que permite arrastar e soltar itens da lista */
}

/* Estado de hover para alça de arrastar */
.dd-handle:hover {
  color: #2ea8e5; /* Cor azul */
  background: #fff; /* Fundo branco */
  /* Feedback visual ao passar o mouse sobre a alça */
}

/* Botão de expansão/colapso em itens da lista */
.dd-item>button {
  display: block; /* Exibe como bloco */
  position: relative; /* Posicionamento relativo */
  cursor: pointer; /* Cursor de mão */
  float: left; /* Flutua à esquerda */
  width: 25px; /* Largura fixa */
  height: 20px; /* Altura fixa */
  margin: 5px 0; /* Margens verticais */
  padding: 0; /* Remove preenchimento */
  text-indent: 100%; /* Recuo de texto (para esconder o texto) */
  white-space: nowrap; /* Evita quebra de linha */
  overflow: hidden; /* Esconde conteúdo que ultrapassa */
  border: 0; /* Remove borda */
  background: transparent; /* Fundo transparente */
  font-size: 12px; /* Tamanho da fonte */
  line-height: 1; /* Altura da linha */
  text-align: center; /* Centraliza o texto */
  font-weight: bold; /* Peso da fonte negrito */
  /* Botão para expandir ou colapsar subitens da lista aninhada */
}

/* Conteúdo antes do botão de expansão */
.dd-item>button:before {
  content: "+"; /* Conteúdo "+" */
  display: block; /* Exibe como bloco */
  position: absolute; /* Posicionamento absoluto */
  width: 100%; /* Largura total */
  text-align: center; /* Centraliza o texto */
  text-indent: 0; /* Remove recuo de texto */
  /* Símbolo "+" indicando que o item pode ser expandido */
}

/* Conteúdo antes do botão de colapso */
.dd-item>button[data-action="collapse"]:before {
  content: "-"; /* Conteúdo "-" */
  /* Símbolo "-" indicando que o item pode ser colapsado */
}

/* 
 * ==========================================================
 * ESPAÇOS RESERVADOS EM LISTAS ANINHADAS
 * ==========================================================
 * Estilos para espaços reservados durante o arrasto
 */

/* Espaços reservados e vazios em listas aninhadas */
.dd-placeholder,
.dd-empty {
  margin: 5px 0; /* Margens verticais */
  padding: 0; /* Remove preenchimento */
  min-height: 30px; /* Altura mínima */
  background: #f2fbff; /* Fundo azul muito claro */
  border: 1px dashed #b6bcbf; /* Borda tracejada cinza */
  box-sizing: border-box; /* Inclui bordas e preenchimento na largura/altura */
  /* Indicadores visuais de onde o item será posicionado durante o arrasto */
}

/* Espaço vazio em listas aninhadas */
.dd-empty {
  border: 1px dashed #bbb; /* Borda tracejada cinza */
  min-height: 40px; /* Altura mínima */
  /* Indicador visual para listas vazias */
}

/* Elemento sendo arrastado */
.dd-dragel {
  position: absolute; /* Posicionamento absoluto */
  pointer-events: none; /* Ignora eventos de mouse */
  z-index: 9999; /* Camada de empilhamento alta */
  /* Container para o item que está sendo arrastado */
}

/* Alça de item sendo arrastado */
.dd-dragel>.dd-item .dd-handle {
  margin-top: 0; /* Remove margem superior */
  /* Ajuste para a alça do item durante o arrasto */
}

/* Estilo para alça durante o arrasto */
.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); /* Sombra para navegadores antigos */
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); /* Sombra suave */
  /* Adiciona sombra à alça durante o arrasto para feedback visual */
}

/* 
 * ==========================================================
 * GRUPOS DE LISTAS ANINHADAS
 * ==========================================================
 * Estilos para grupos de listas aninhadas
 */

/* Container para múltiplas listas aninhadas */
.nestable-lists {
  display: block; /* Exibe como bloco */
  clear: both; /* Limpa flutuações */
  padding: 30px 0; /* Espaçamento vertical */
  width: 100%; /* Largura total */
  border: 0; /* Remove bordas */
  border-top: 2px solid #ddd; /* Borda superior cinza */
  border-bottom: 2px solid #ddd; /* Borda inferior cinza */
  /* Container para agrupar várias listas aninhadas */
}

/* Menu de controle para listas aninhadas */
#nestable-menu {
  padding: 0; /* Remove preenchimento */
  margin: 20px 0; /* Margens verticais */
  /* Menu com opções para controlar as listas aninhadas */
}

/* Áreas de saída para listas aninhadas */
#nestable-output,
#nestable2-output {
  width: 100%; /* Largura total */
  height: 7em; /* Altura fixa */
  font-size: 0.75em; /* Tamanho da fonte pequeno */
  line-height: 1.333333em; /* Altura da linha */
  font-family: Consolas, monospace; /* Fonte monoespaçada */
  padding: 5px; /* Espaçamento interno */
  box-sizing: border-box; /* Inclui bordas e preenchimento na largura/altura */
  /* Áreas de texto que mostram a estrutura JSON das listas aninhadas */
}

/* 
 * ==========================================================
 * VARIAÇÕES DE LISTAS ANINHADAS
 * ==========================================================
 * Estilos para variações específicas de listas aninhadas
 */

/* Alça para segunda variação de lista aninhada */
#nestable2 .dd-handle {
  color: #fff; /* Cor branca */
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  background: white; /* Fundo branco */
  /* Estilo alternativo para alças na segunda lista aninhada */
}

/* Estado de hover para alça na segunda variação */
#nestable2 .dd-handle:hover {
  background: #bbb; /* Fundo cinza */
  /* Feedback visual ao passar o mouse sobre a alça na segunda lista */
}

/* Botões de expansão/colapso na segunda variação */
#nestable2 .dd-item>button:before {
  color: #fff; /* Cor branca */
  /* Cor dos símbolos +/- na segunda lista aninhada */
}

/* 
 * ==========================================================
 * LAYOUT RESPONSIVO PARA LISTAS ANINHADAS
 * ==========================================================
 * Ajustes para listas aninhadas em telas maiores
 */

/* Layout para telas maiores que 700px */
@media only screen and (min-width: 700px) {
  /* Ajuste de largura para listas aninhadas */
  .dd {
    float: left; /* Flutua à esquerda */
    width: 48%; /* Metade da largura menos margem */
    /* Permite duas listas lado a lado */
  }

  /* Espaçamento entre listas adjacentes */
  .dd+.dd {
    margin-left: 2%; /* Margem esquerda */
    /* Adiciona espaço entre duas listas lado a lado */
  }
}

/* Estado de hover para alça durante arrasto */
.dd-hover>.dd-handle {
  background: #2ea8e5 !important; /* Fundo azul (forçado) */
  /* Destaque visual quando o item está sendo arrastado sobre uma alça */
}

/* 
 * ==========================================================
 * VARIANTE 3 DE LISTAS ANINHADAS
 * ==========================================================
 * Estilos para a terceira variante de listas aninhadas
 */

/* Conteúdo para terceira variante de listas aninhadas */
.dd3-content {
  display: block; /* Exibe como bloco */
  height: 30px; /* Altura fixa */
  margin: 5px 0; /* Margens verticais */
  padding: 5px 10px 5px 40px; /* Espaçamento interno com recuo à esquerda */
  color: #333; /* Cor cinza escuro */
  text-decoration: none; /* Remove decoração de texto */
  font-weight: bold; /* Peso da fonte negrito */
  border: 1px solid #ccc; /* Borda cinza */
  background: #fafafa; /* Fundo cinza muito claro */
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#fafafa),
      to(#eee)); /* Gradiente para navegadores antigos */
  background: linear-gradient(to bottom, #fafafa 0%, #eee 100%); /* Gradiente cinza claro */
  border-radius: 3px; /* Cantos arredondados */
  box-sizing: border-box; /* Inclui bordas e preenchimento na largura/altura */
  /* Estilo para o conteúdo dos itens na terceira variante de lista aninhada */
}

/* Conteúdo durante arrasto na variante 3 */
.dd-dragel>.dd3-item>.dd3-content {
  margin: 0; /* Remove margens */
  /* Ajuste para o conteúdo durante o arrasto na terceira variante */
}

/* Botão de expansão/colapso na variante 3 */
.dd3-item>button {
  margin-left: 30px; /* Margem esquerda */
  /* Posiciona o botão +/- na terceira variante de lista aninhada */
}

/* Alça para arrastar na variante 3 */
.dd3-handle {
  position: absolute; /* Posicionamento absoluto */
  margin: 0; /* Remove margens */
  left: 0; /* Alinhado à esquerda */
  top: 0; /* Alinhado ao topo */
  cursor: pointer; /* Cursor de mão */
  width: 30px; /* Largura fixa */
  text-indent: 100%; /* Recuo de texto (para esconder o texto) */
  white-space: nowrap; /* Evita quebra de linha */
  overflow: hidden; /* Esconde conteúdo que ultrapassa */
  background: #fbfdff; /* Fundo azul muito claro */
  border-top-right-radius: 0; /* Remove arredondamento superior direito */
  border-bottom-right-radius: 0; /* Remove arredondamento inferior direito */
  border-color: #e0e0e0; /* Cor da borda cinza claro */
  /* Alça visível à esquerda dos itens na terceira variante de lista aninhada */
}

/* Ícone da alça na variante 3 */
.dd3-handle:before {
  content: "≡"; /* Conteúdo (símbolo de "hamburger") */
  display: block; /* Exibe como bloco */
  position: absolute; /* Posicionamento absoluto */
  left: 0; /* Alinhado à esquerda */
  top: 3px; /* Distância do topo */
  width: 100%; /* Largura total */
  text-align: center; /* Centraliza o texto */
  text-indent: 0; /* Remove recuo de texto */
  color: #fff; /* Cor branca */
  font-size: 20px; /* Tamanho da fonte grande */
  font-weight: normal; /* Peso da fonte normal */
  /* Símbolo de "hamburger" (três linhas) na alça da terceira variante */
}

/* Estado de hover para alça na variante 3 */
.dd3-handle:hover {
  background: #ebf0f5; /* Fundo azul muito claro */
  /* Feedback visual ao passar o mouse sobre a alça na terceira variante */
}

/* 
 * ==========================================================
 * AJUSTES ADICIONAIS PARA LISTAS ANINHADAS
 * ==========================================================
 * Estilos adicionais para refinar a aparência das listas aninhadas
 */

/* Ajuste de conteúdo na variante 3 */
.dd3-content {
  font-weight: 500; /* Peso da fonte semi-negrito */
  height: 40px; /* Altura fixa */
  padding-top: 9px; /* Preenchimento superior */
  background: #fbfbfb !important; /* Fundo cinza muito claro (forçado) */
  border-color: #e0e0e0; /* Cor da borda cinza claro */
  /* Refinamento do estilo do conteúdo na terceira variante */
}

/* Conteúdo para subitens */
.sub-items .dd3-content {
  background: #fff !important; /* Fundo branco (forçado) */
  /* Diferencia visualmente os subitens com fundo branco */
}

/* Ajuste de altura para alça padrão */
.dd-handle {
  height: 40px; /* Altura fixa */
  /* Padroniza a altura das alças em todas as variantes */
}

/* Ajuste de cor e posição do ícone na variante 3 */
.dd3-handle:before {
  color: #444444; /* Cor cinza escuro */
  top: 8px; /* Distância do topo */
  /* Ajusta a cor e posição do ícone "hamburger" na terceira variante */
}

/* Espaço vazio mínimo na variante 3 */
.dd3-empty {
  height: 1px; /* Altura mínima */
  /* Define uma altura mínima para espaços vazios na terceira variante */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS ADICIONAIS
 * ==========================================================
 * Mais ajustes para listas aninhadas em diferentes tamanhos de tela
 */

/* Largura total em telas maiores */
@media only screen and (min-width: 700px) {
  .dd {
    width: 100%; /* Largura total */
    /* Faz com que a lista ocupe toda a largura disponível em telas maiores */
  }
}

/* Ajuste de posição vertical para ícone de botão */
.dd-item>button:before {
  top: 10px; /* Distância do topo */
  /* Centraliza verticalmente o símbolo +/- no botão */
}

/* Ajustes para botões de expansão/colapso */
.dd-item>button {
  height: 30px; /* Altura fixa */
  font-family: "Helvetica Neue", Arial, sans-serif; /* Família da fonte */
  /* Padroniza a altura e fonte dos botões de expansão/colapso */
}

/* Ajuste de margem para segundo botão */
.dd-item>button:nth-child(2) {
  margin-left: -5px; /* Margem esquerda negativa */
  /* Aproxima o segundo botão do primeiro para melhor alinhamento */
}

/* 
 * ==========================================================
 * OPÇÕES DE MENU
 * ==========================================================
 * Estilos para opções de menu em listas aninhadas
 */

/* Container para opções de menu */
.menu-options {
  padding: 10px; /* Espaçamento interno */
  border: 1px solid #e0e0e0; /* Borda cinza claro */
  border-radius: 8px; /* Cantos arredondados */
  /* Container para opções adicionais de menu em listas aninhadas */
}

/* 
 * ==========================================================
 * CONTROLES DE EDITOR DE IMAGEM
 * ==========================================================
 * Estilos para controles do editor de imagem ContentTools
 */

/* Esconde controles de edição de imagem não utilizados */
.ct-control--crop,
.ct-control--rotate-ccw,
.ct-control--rotate-cw {
  display: none !important; /* Oculta (forçado) */
  /* Remove opções de recorte e rotação de imagem que não são utilizadas */
}

/* Botão de busca de imagem */
.ct-control--fetch {
  float: right; /* Flutua à direita */
  /* Botão para buscar imagens no editor */
}

/* Botão de upload de imagem */
.ct-widget .ct-control--upload {
  position: absolute !important; /* Posicionamento absoluto (forçado) */
  top: 300px; /* Distância do topo */
  left: 285px; /* Distância da esquerda */
  /* Botão para fazer upload de novas imagens */
}

/* Esconde botão de busca durante upload */
.ct-widget.ct-image-dialog--uploading .ct-control--fetch {
  display: none; /* Oculta */
  /* Remove o botão de busca enquanto um upload está em andamento */
}

/* Esconde botão de busca quando há imagem */
.ct-widget.ct-image-dialog--populated .ct-control--fetch {
  display: none; /* Oculta */
  /* Remove o botão de busca quando uma imagem já está selecionada */
}

/* Ajustes adicionais para botão de busca */
.ct-control--fetch {
  top: -33px; /* Posicionamento negativo superior */
  border-radius: 0; /* Remove arredondamento das bordas */
  /* Ajustes de posição e aparência para o botão de busca de imagens */
}

/* 
 * ==========================================================
 * MODAIS DE PROPOSTAS E ORÇAMENTOS
 * ==========================================================
 * Estilos para modais de conversão de propostas e orçamentos
 */

/* Painéis em modais de propostas e orçamentos */
.proposal-convert-modal .panel_s,
.invoice-project .panel_s,
.estimate-pipeline .panel_s,
.proposal-pipeline-modal .panel_s {
  box-shadow: none; /* Remove sombra */
  border: 0; /* Remove borda */
  margin-bottom: 0; /* Remove margem inferior */
  /* Simplifica a aparência dos painéis em modais de conversão */
}

/* Corpo dos painéis em modais de propostas e orçamentos */
.proposal-convert-modal .panel_s .panel-body,
.invoice-project .panel_s .panel-body,
.estimate-pipeline .panel_s .panel-body,
.proposal-pipeline-modal .panel_s .panel-body {
  padding: 0px; /* Remove preenchimento */
  border: 0; /* Remove borda */
  /* Maximiza o espaço disponível dentro dos painéis */
}

/* Esconde alternador de visualização em modais de pipeline */
.proposal-pipeline-modal .toggle_view,
.estimate-pipeline .toggle_view {
  display: none; /* Oculta */
  /* Remove o botão de alternar visualização em modais de pipeline */
}

/* Esconde botões de opção em modais de conversão */
.proposal-convert-modal .btn-tr,
.invoice-project .btn-tr,
.estimate-pipeline .panel_s .panel-body .single-option-buttons,
.proposals-pipeline .panel_s .panel-body .single-option-buttons {
  display: none; /* Oculta */
  /* Remove botões de opção que não são necessários em modais de conversão */
}

/* Largura para modais grandes em conversão de propostas */
.proposal-convert-modal .modal-lg,
.invoice-project .modal-lg,
.estimate-pipeline .modal-lg,
.proposal-pipeline-modal .modal-lg {
  width: 1100px; /* Largura fixa maior */
  /* Define uma largura maior para modais de conversão para melhor visualização */
}

/* Ajuste de largura para modal específico de pipeline */
.proposals-pipeline .proposal-convert-modal .modal-lg {
  width: 1000px; /* Largura fixa um pouco menor */
  /* Ajusta a largura para um valor específico no contexto de pipeline */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA MODAIS
 * ==========================================================
 * Ajustes para modais em diferentes tamanhos de tela
 */

/* Ajustes para dispositivos móveis (até 768px) */
@media (max-width: 768px) {
  /* Ajuste de largura para modais em telas pequenas */
  .proposal-convert-modal .modal-lg,
  .invoice-project .modal-lg,
  .estimate-pipeline .modal-lg,
  .proposal-pipeline-modal .modal-lg {
    width: auto; /* Largura automática */
    /* Permite que o modal se ajuste ao tamanho da tela em dispositivos móveis */
  }

  /* Ajuste de margem para membros da equipe */
  .team-members {
    margin-top: 15px; /* Margem superior */
    /* Adiciona espaço acima da lista de membros da equipe em telas pequenas */
  }
}

/* Ajustes para tablets e desktops menores (até 1200px) */
@media only screen and (max-width: 1200px) {
  /* Ajuste de largura para modais em telas médias */
  .proposal-convert-modal .modal-lg,
  .invoice-project .modal-lg,
  .estimate-pipeline .modal-lg,
  .proposal-pipeline-modal .modal-lg {
    width: auto; /* Largura automática */
    /* Permite que o modal se ajuste ao tamanho da tela em telas médias */
  }
}

/* 
 * ==========================================================
 * ELEMENTOS DE NAVEGAÇÃO E ANÚNCIOS
 * ==========================================================
 * Estilos para elementos de navegação e anúncios no sistema
 */

/* Botão de logout no canto superior esquerdo */
.top-left-logout {
  cursor: pointer; /* Cursor de mão */
  margin-top: 4px; /* Margem superior */
  /* Botão de logout posicionado no canto superior esquerdo */
}

/* Texto pequeno em anúncios */
.announcement small {
  font-size: 11px; /* Tamanho da fonte pequeno */
  color: #333; /* Cor cinza escuro */
  /* Texto secundário em anúncios do sistema */
}

/* Estilo geral para anúncios */
.announcement {
  font-size: 14px; /* Tamanho da fonte */
  /* Anúncios e notificações importantes do sistema */
}

/* 
 * ==========================================================
 * AJUSTES ADICIONAIS PARA KANBAN
 * ==========================================================
 * Ajustes específicos para elementos do quadro kanban
 */

/* Ajuste de margem para parágrafos após links em grupos de artigos */
.kan-ban-content .article-group:first-child a+p {
  margin-top: 10px; /* Margem superior */
  /* Adiciona espaço após links no primeiro grupo de artigos do kanban */
}

/* Container para ordenação de leads no kanban */
.kanban-leads-sort {
  display: inline-block; /* Exibe como bloco em linha */
  vertical-align: middle; /* Alinhamento vertical */
  margin-bottom: 15px; /* Margem inferior */
  /* Controles de ordenação para leads no quadro kanban */
}

/* 
 * ==========================================================
 * CLASSES DE POSICIONAMENTO E PORCENTAGEM
 * ==========================================================
 * Estilos para posicionamento e exibição de porcentagens
 */

/* Classe para posicionamento relativo */
.relative {
  position: relative; /* Posicionamento relativo */
  /* Classe utilitária para definir posicionamento relativo em elementos */
}

/* Porcentagem de projeto */
.project-percent {
  position: absolute; /* Posicionamento absoluto */
  font-size: 33px; /* Tamanho da fonte grande */
  font-weight: 500; /* Peso da fonte semi-negrito */
  top: 35%; /* Posição vertical */
  left: 0; /* Alinhado à esquerda */
  right: 0; /* Alinhado à direita */
  /* Exibe a porcentagem de conclusão do projeto no centro do gráfico circular */
}

/* 
 * ==========================================================
 * CLASSES DE LARGURA FIXA
 * ==========================================================
 * Classes utilitárias para definir larguras fixas em elementos
 */

/* Largura fixa de 300px */
.width300 {
  width: 300px; /* Largura fixa */
  /* Usado para definir largura de 300px em elementos como dropdowns e containers */
}

/* Largura fixa de 350px */
.width350 {
  width: 350px; /* Largura fixa */
  /* Usado para definir largura de 350px em elementos como painéis e modais */
}

/* Largura fixa de 400px */
.width400 {
  width: 400px; /* Largura fixa */
  /* Usado para definir largura de 400px em elementos como dropdowns de busca */
}

/* Largura fixa de 500px */
.width500 {
  width: 500px; /* Largura fixa */
  /* Usado para definir largura de 500px em elementos como modais e painéis largos */
}

/* Largura fixa de 200px */
.width200 {
  width: 200px; /* Largura fixa */
  /* Usado para definir largura de 200px em elementos como botões e campos pequenos */
}

/* Largura fixa de 250px (nota: valor definido como 200px) */
.width250 {
  width: 200px; /* Largura fixa (nota: deveria ser 250px, mas está definido como 200px) */
  /* Usado para definir largura de 250px em elementos como campos de entrada e seletores */
}

/* 
 * ==========================================================
 * TEMPORIZADORES
 * ==========================================================
 * Estilos para temporizadores de tarefas e projetos
 */

/* Container para temporizadores iniciados */
.started-timers-top {
  padding: 15px !important; /* Espaçamento interno (forçado) */
  max-height: 600px; /* Altura máxima */
  overflow-y: auto; /* Adiciona rolagem vertical quando necessário */
  /* Container para a lista de temporizadores ativos no topo da página */
}

/* Botão de dropdown nos temporizadores */
.started-timers-top .top-dropdown-btn {
  display: block; /* Exibe como bloco */
  min-width: 40%; /* Largura mínima */
  margin: 0 auto; /* Centraliza horizontalmente */
  margin-top: 11px; /* Margem superior */
  /* Botão para exibir opções adicionais nos temporizadores ativos */
}

/* Texto de sucesso em temporizadores */
.top-timers.text-success {
  color: #22c55e !important; /* Cor verde (forçada) */
  /* Texto verde para indicar temporizadores ativos ou concluídos */
}

/* Container de item de temporizador */
.timer {
  padding-bottom: 1px; /* Preenchimento inferior mínimo */
  /* Container para cada item de temporizador na lista */
}

/* Link de temporizador */
.timer a._timer {
  padding-left: 0 !important; /* Remove preenchimento esquerdo (forçado) */
  padding-top: 0; /* Remove preenchimento superior */
  /* Link para acessar detalhes do temporizador ou iniciar/parar */
}

/* Estados de hover, ativo e foco para links de temporizador */
.timer a._timer:hover,
.timer a._timer:active,
a._timer:focus {
  background: transparent !important; /* Fundo transparente (forçado) */
  color: #0081bb !important; /* Cor azul (forçada) */
  /* Mantém o fundo transparente e muda a cor ao interagir com o link */
}

/* Rodapé do modal de logout com temporizadores ativos */
.timers-modal-logout .modal-footer {
  text-align: center !important; /* Centraliza o texto (forçado) */
  /* Centraliza os botões no modal que avisa sobre temporizadores ativos ao fazer logout */
}

/* 
 * ==========================================================
 * ARQUIVOS DE PROJETO E ESTATÍSTICAS
 * ==========================================================
 * Estilos para imagens de arquivos de projeto e modais de estatísticas
 */

/* Imagem de arquivo de projeto */
.project-file-image {
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  border-radius: 8px; /* Cantos arredondados */
  margin-right: 15px; /* Margem direita */
  /* Container para imagens de arquivos anexados a projetos */
}

/* Modal de estatísticas de acompanhamento de tarefas */
#task-tracking-stats-modal {
  z-index: 999999999999; /* Camada de empilhamento muito alta */
  margin-top: 4.5%; /* Margem superior */
  /* Modal que exibe estatísticas de tempo gasto em tarefas */
}

/* 
 * ==========================================================
 * PROJETOS E DOCUMENTOS RELACIONADOS
 * ==========================================================
 * Estilos para faturas, orçamentos e propostas relacionadas a projetos
 */

/* Esconde lista de novas faturas em projetos */
.project_invoices .new-invoice-list {
  display: none; /* Oculta */
  /* Remove a opção de criar nova lista de faturas no contexto de projeto */
}

/* Esconde botões em orçamentos de projetos */
.project_estimates .new-estimate-btn,
.project_estimates .switch-pipeline {
  display: none; /* Oculta */
  /* Remove botões de novo orçamento e alternar pipeline no contexto de projeto */
}

/* Esconde elementos em propostas de projetos */
.project_proposals .new-proposal-btn,
.project_proposals .switch-pipeline,
.project_proposals .customers-related,
.project_proposals .leads-related {
  display: none !important; /* Oculta (forçado) */
  /* Remove botões e elementos relacionados a clientes e leads no contexto de projeto */
}

/* Corpo dos painéis de documentos em projetos */
.project_invoices .panel-body,
.project_estimates .panel-body,
.project_proposals .panel-body {
  border: 0; /* Remove borda */
  padding: 0; /* Remove preenchimento */
  /* Simplifica a aparência dos painéis de documentos em projetos */
}

/* Esconde botão de alternar visualização em documentos de projetos */
.project_invoices .toggle-small-view,
.project_estimates .toggle-small-view,
.project_proposals .toggle-small-view {
  display: none; /* Oculta */
  /* Remove o botão de alternar para visualização compacta no contexto de projeto */
}

/* Ajuste de margens para containers de documentos em projetos */
.project_invoices,
.project_estimates,
.project_proposals {
  margin-left: -15px; /* Margem esquerda negativa */
  margin-right: -15px; /* Margem direita negativa */
  /* Estende os containers de documentos para ocupar toda a largura disponível */
}

/* 
 * ==========================================================
 * COMENTÁRIOS JQUERY
 * ==========================================================
 * Estilos para o plugin jQuery Comments usado no sistema
 */

/* Ajuste responsivo para comentários em dispositivos móveis */
@media (max-width: 768px) {
  /* Wrapper de comentários em telas pequenas */
  .jquery-comments ul.main li.comment .wrapper {
    overflow: visible; /* Permite que o conteúdo transborde */
    margin-top: 25px; /* Margem superior */
    /* Ajusta o layout de comentários em dispositivos móveis */
  }
}

/* Texto de placeholder em campos editáveis vazios */
.jquery-comments [contentEditable="true"]:empty:not(:focus):before {
  color: #a1b4cc; /* Cor azul acinzentado claro */
  font-size: 14px; /* Tamanho da fonte */
  /* Texto de placeholder para campos de comentário vazios */
}

/* Esconde botão de upload em comentários */
.jquery-comments .textarea-wrapper .upload.inline-button {
  display: none !important; /* Oculta (forçado) */
  /* Remove o botão de upload de arquivos nos comentários */
}

/* Elementos com fonte semi-negrito em comentários */
.jquery-comments ul.navigation li,
.jquery-comments ul.main li.comment .actions>*,
.jquery-comments ul.main li.comment .name,
.jquery-comments .highlight-font-bold {
  font-weight: 500 !important; /* Peso da fonte semi-negrito (forçado) */
  /* Define um peso de fonte consistente para elementos de navegação e ações */
}

/* Nome do autor do comentário */
.jquery-comments ul.main li.comment .name {
  color: #0081bb; /* Cor azul */
  /* Destaca o nome do autor do comentário em azul */
}

/* Lista principal de comentários */
.jquery-comments ul.main {
  list-style: none !important; /* Remove marcadores de lista (forçado) */
  /* Remove os marcadores padrão da lista de comentários */
}

/* Listas aninhadas em conteúdo de comentários */
.jquery-comments.tc-content ul.main ul:not(.child-comments) {
  list-style: initial !important; /* Restaura marcadores de lista (forçado) */
  /* Mantém os marcadores de lista em listas aninhadas dentro do conteúdo */
}

/* Ajuste de altura de linha para listas em comentários */
.jquery-comments.tc-content ul.main ul:not(.child-comments),
.jquery-comments.tc-content ul.main ol {
  line-height: 0.8; /* Altura da linha reduzida */
  /* Compacta o espaçamento vertical em listas dentro de comentários */
}

/* Conteúdo do comentário */
.jquery-comments ul.main li.comment .wrapper .content {
  padding: 5px 0 5px 0; /* Espaçamento interno vertical */
  /* Adiciona espaço acima e abaixo do conteúdo do comentário */
}

/* Itens de navegação em comentários */
.jquery-comments ul.navigation li {
  color: #323a45; /* Cor cinza escuro */
  /* Define a cor dos itens de navegação (abas) nos comentários */
}

/* Botão de upload em comentários */
.jquery-comments .textarea-wrapper .control-row>span.upload {
  padding: 5px 20px; /* Espaçamento interno */
  background-color: #7d838b; /* Cor de fundo cinza */
  /* Estilo para o botão de upload em comentários (quando visível) */
}

/* Fundo destacado em comentários */
.jquery-comments .highlight-background {
  background: #2563eb !important; /* Cor de fundo azul (forçada) */
  /* Fundo azul para destacar elementos selecionados ou importantes */
}

/* Botões na linha de controle de comentários */
.jquery-comments .textarea-wrapper .control-row>span {
  padding: 5px 20px !important; /* Espaçamento interno (forçado) */
  border-radius: 8px; /* Cantos arredondados */
  /* Estilo para botões na barra de controle abaixo do campo de comentário */
}

/* Linha de controle de comentários */
.jquery-comments .textarea-wrapper .control-row {
  margin-top: 10px; /* Margem superior */
  /* Espaço acima da barra de controle com botões de envio e formatação */
}

/* Ações em comentários */
.jquery-comments ul.main li.comment .actions>* {
  color: #6c7888; /* Cor cinza azulado */
  /* Define a cor dos links de ações (editar, excluir, etc.) em comentários */
}

/* Container de navegação em comentários */
.jquery-comments ul.navigation .navigation-wrapper {
  padding: 10px 0 0 0; /* Preenchimento superior */
  /* Adiciona espaço acima das abas de navegação de comentários */
}

/* Barra de navegação em comentários */
.jquery-comments ul.navigation {
  border-bottom: 1px solid #efefef; /* Borda inferior cinza muito claro */
  margin-bottom: 1.5em; /* Margem inferior */
  /* Barra com abas para filtrar comentários (mais recentes, populares, etc.) */
}

/* 
 * ==========================================================
 * CONFIGURAÇÕES DE FATURA E FORMATAÇÃO
 * ==========================================================
 * Estilos para configurações de fatura e elementos de formatação
 */

/* Popover de configurações de fatura de projeto */
#pre_invoice_project_settings .popover {
  width: 300px !important; /* Largura fixa (forçada) */
  /* Define uma largura específica para o popover de configurações de fatura */
}

/* Borda esquerda transparente em células de tabela */
.td-border-left-transparent {
  border-left: 10px solid transparent; /* Borda esquerda transparente */
  /* Cria um espaço visual à esquerda da célula sem alterar o layout */
}

/* Destaque de texto */
.highlight {
  border: 1px solid #c5be22; /* Borda amarela */
  padding: 1px 4px; /* Espaçamento interno */
  /* Destaca texto importante com uma borda amarela */
}

/* Texto de exclusão em vermelho */
.delete-text.text-danger {
  color: #ef4444; /* Cor vermelha */
  /* Texto em vermelho para indicar exclusão ou alerta */
}

/* 
 * ==========================================================
 * ATIVIDADES DE PROJETOS E PIPELINES
 * ==========================================================
 * Estilos para feeds de atividades e pipelines
 */

/* Feed de atividades em projetos */
.projects-activity .activity-feed {
  overflow-y: scroll; /* Adiciona rolagem vertical */
  height: 750px; /* Altura fixa */
  /* Container para a lista de atividades de projeto com altura fixa e rolagem */
}

/* Ícone no cabeçalho */
#header .icon {
  display: inline-block; /* Exibe como bloco em linha */
  /* Ícones exibidos no cabeçalho do sistema */
}

/* Containers de pipeline para orçamentos e propostas */
#estimate-pipeline,
#proposals-pipeline {
  overflow-x: scroll; /* Adiciona rolagem horizontal */
  /* Permite rolar horizontalmente para visualizar todas as etapas do pipeline */
}

/* 
 * ==========================================================
 * CLASSES UTILITÁRIAS ADICIONAIS
 * ==========================================================
 * Classes utilitárias para elementos diversos
 */

/* Cursor de mão */
.pointer {
  cursor: pointer; /* Cursor de mão */
  /* Indica que o elemento é clicável */
}

/* Fonte com peso normal */
.font-normal {
  font-weight: 400 !important; /* Peso da fonte normal (forçado) */
  /* Remove negrito de elementos que normalmente teriam negrito */
}

/* Alça para arrastar itens de lista de tarefas */
.todo-dragger {
  width: 15px; /* Largura */
  height: 27px; /* Altura */
  position: absolute; /* Posicionamento absoluto */
  z-index: 50; /* Camada de empilhamento */
  /* Alça visível para arrastar itens em listas de tarefas */
}

/* Texto em cor escura */
.text-dark {
  color: #464646; /* Cor cinza escuro */
  /* Define a cor do texto para um tom de cinza escuro */
}

/* 
 * ==========================================================
 * PROJETOS FIXADOS NO MENU
 * ==========================================================
 * Estilos para projetos fixados no menu lateral
 */

/* Item de projeto fixado no menu lateral */
#side-menu.nav>li.pinned_project {
  padding-bottom: 15px; /* Preenchimento inferior */
  /* Adiciona espaço abaixo de projetos fixados no menu lateral */
}

/* Links em projetos fixados */
#side-menu.nav>li.pinned_project a {
  border: transparent; /* Borda transparente */
  /* Remove bordas visíveis em links de projetos fixados */
}

/* Estados ativo e hover para links de projetos fixados */
#side-menu.nav>li.pinned_project.active a,
#side-menu.nav>li.pinned_project:hover a {
  background: transparent !important; /* Fundo transparente (forçado) */
  border: transparent !important; /* Borda transparente (forçada) */
  /* Mantém o fundo e bordas transparentes mesmo ao passar o mouse ou quando ativo */
}

/* 
 * ==========================================================
 * VISÃO GERAL DE TAREFAS
 * ==========================================================
 * Estilos para tabelas de visão geral de tarefas
 */

/* Cabeçalho da tabela de visão geral de tarefas */
.tasks-overview thead {
  border: 0; /* Remove borda */
  /* Remove a borda do cabeçalho da tabela de visão geral de tarefas */
}

/* Células do corpo da tabela de visão geral de tarefas */
.tasks-overview tbody td {
  padding: 10px !important; /* Espaçamento interno (forçado) */
  vertical-align: middle !important; /* Alinhamento vertical centralizado (forçado) */
  /* Define o espaçamento e alinhamento das células na tabela de tarefas */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA BOTÕES
 * ==========================================================
 * Ajustes para botões em dispositivos móveis
 */

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
  /* Remove flutuação de grupos de botões */
  ._buttons .pull-left,
  ._buttons .pull-right {
    float: none !important; /* Remove flutuação (forçado) */
    /* Faz com que todos os botões fiquem empilhados em vez de alinhados */
  }

  /* Estilo para botões em dispositivos móveis */
  ._buttons .btn,
  ._buttons .btn-group {
    display: inline-block; /* Exibe como bloco em linha */
    margin-left: 0 !important; /* Remove margem esquerda (forçado) */
    width: 100%; /* Largura total */
    margin-bottom: 5px !important; /* Margem inferior (forçada) */
    float: none !important; /* Remove flutuação (forçado) */
    text-align: left; /* Alinha texto à esquerda */
    /* Faz com que cada botão ocupe a largura total e tenha espaço abaixo */
  }
}

  /* Remove margem esquerda de botões com classe mleft5 */
  ._buttons .mleft5 {
    margin-left: 0 !important; /* Remove margem esquerda (forçado) */
    /* Remove o espaçamento à esquerda em botões em dispositivos móveis */
  }

  /* Ajuste RTL para botões com classe mleft5 */
  [dir="rtl"] ._buttons .mleft5 {
    margin-right: 0 !important; /* Remove margem direita (forçado) */
    /* Remove o espaçamento à direita em botões em layouts RTL */
  }

  /* Alinhamento de texto para botões em layouts RTL */
  [dir="rtl"] ._buttons button,
  [dir="rtl"] ._buttons a {
    text-align: right; /* Alinha texto à direita */
    /* Alinha o texto dos botões à direita em layouts RTL */
  }

  /* Remove margens laterais de todos os botões */
  ._buttons a,
  ._buttons button {
    margin-left: 0 !important; /* Remove margem esquerda (forçado) */
    margin-right: 0 !important; /* Remove margem direita (forçado) */
    /* Remove todas as margens laterais dos botões em dispositivos móveis */
  }

  /* 
   * ==========================================================
   * AJUSTES RTL PARA POSTS E FILTROS
   * ==========================================================
   * Ajustes para elementos de posts em layouts RTL
   */

  /* Ajuste RTL para indicador de tempo em posts */
  [dir="rtl"] .post-time-ago {
    left: 55px; /* Posicionado à esquerda */
    right: auto; /* Remove posicionamento à direita */
    /* Inverte o posicionamento do indicador de tempo em posts para layouts RTL */
  }

  /* Ajuste RTL para wrapper de botões de opções de post */
  [dir="rtl"] .btn-post-options-wrapper {
    right: auto; /* Remove posicionamento à direita */
    left: 20px; /* Posicionado à esquerda */
    top: 38px; /* Posicionamento superior */
    /* Inverte o posicionamento dos botões de opções em posts para layouts RTL */
  }

  /* Ajuste RTL para dados de filtro */
  [dir="rtl"] ._filter_data.mleft4 {
    margin-right: 0 !important; /* Remove margem direita (forçado) */
    /* Remove a margem direita em elementos de filtro em layouts RTL */
  }

  /* Remove margem direita de botões com classe mright5 */
  ._buttons .mright5 {
    margin-right: 0 !important; /* Remove margem direita (forçado) */
    /* Remove o espaçamento à direita em botões em dispositivos móveis */
  }

  /* 
   * ==========================================================
   * BOTÕES DE PROPOSTAS E METAS
   * ==========================================================
   * Ajustes para botões de propostas e indicadores de metas
   */

  /* Botões de propostas em dispositivos móveis */
  .proposal_buttons {
    margin-top: 10px !important; /* Margem superior (forçada) */
    display: inline-block; /* Exibe como bloco em linha */
    /* Adiciona espaço acima dos botões de propostas em dispositivos móveis */
  }

  /* Botões em grupos de botões */
  ._buttons .btn-group>.btn {
    margin-bottom: 0 !important; /* Remove margem inferior (forçada) */
    /* Remove o espaço abaixo de botões que estão em grupos */
  }

  /* Ajuste de porcentagem de meta em tabelas */
  table .goal-percent {
    top: -3px; /* Posicionamento superior negativo */
    /* Ajusta a posição vertical da porcentagem de meta em tabelas */
  }
}

/* 
 * ==========================================================
 * AJUSTES PARA EDITORES EM DISPOSITIVOS PEQUENOS
 * ==========================================================
 * Estilos para o editor TinyMCE em dispositivos muito pequenos
 */

/* Ajustes para dispositivos muito pequenos (até 549px) */
@media only screen and (max-device-width: 549px) {
  /* Janela do editor TinyMCE */
  .mce-window {
    width: auto !important; /* Largura automática (forçada) */
    top: 0 !important; /* Alinhado ao topo (forçado) */
    left: 0 !important; /* Alinhado à esquerda (forçado) */
    right: 0 !important; /* Alinhado à direita (forçado) */
    bottom: 0 !important; /* Alinhado à base (forçado) */
    background: none !important; /* Remove fundo (forçado) */
    margin: 15px !important; /* Margem (forçada) */
    /* Faz com que a janela do editor ocupe quase toda a tela em dispositivos pequenos */
  }

  /* Cabeçalho da janela do editor */
  .mce-window-head {
    background: #fff !important; /* Fundo branco (forçado) */
    /* Define o fundo do cabeçalho da janela do editor como branco */
  }

  /* Corpo da janela do editor */
  .mce-window-body {
    background: #fff !important; /* Fundo branco (forçado) */
    /* Define o fundo do corpo da janela do editor como branco */
  }

  /* Rodapé da janela do editor */
  .mce-foot>.mce-container-body {
    padding: 10px !important; /* Preenchimento interno (forçado) */
    /* Adiciona espaço interno no rodapé da janela do editor */
  }

  /* Painéis do editor */
  .mce-panel {
    max-width: 100% !important; /* Largura máxima total (forçada) */
    /* Limita a largura dos painéis do editor à largura da tela */
  }

  /* Containers do editor */
  .mce-container {
    max-width: 100% !important; /* Largura máxima total (forçada) */
    height: auto !important; /* Altura automática (forçada) */
    /* Ajusta os containers do editor para caber na tela do dispositivo */
  }

  /* Corpos de containers do editor */
  .mce-container-body {
    max-width: 100% !important; /* Largura máxima total (forçada) */
    height: auto !important; /* Altura automática (forçada) */
    /* Ajusta os corpos dos containers do editor para caber na tela */
  }

  /* Formulário do editor */
  .mce-form {
    padding: 10px !important; /* Preenchimento interno (forçado) */
    /* Adiciona espaço interno nos formulários do editor */
  }

  /* Abas do editor */
  .mce-tabs {
    max-width: 100% !important; /* Largura máxima total (forçada) */
    /* Limita a largura das abas do editor à largura da tela */
  }

  /* Abas e itens de formulário */
  .mce-tabs .mce-tab,
  .mce-formitem {
    margin: 10px 0 !important; /* Margens verticais (forçadas) */
    /* Adiciona espaço acima e abaixo das abas e itens de formulário */
  }

  /* Itens com layout absoluto */
  .mce-abs-layout-item {
    position: static !important; /* Posicionamento estático (forçado) */
    width: auto !important; /* Largura automática (forçada) */
    /* Converte itens de layout absoluto para layout normal para melhor responsividade */
  }

  /* Rótulos em layout absoluto */
  .mce-abs-layout-item.mce-label {
    display: block !important; /* Exibição em bloco (forçada) */
    /* Converte rótulos para exibição em bloco para melhor responsividade */
  }

  /* Caixas de texto em layout absoluto */
  .mce-abs-layout-item.mce-textbox {
    -webkit-box-sizing: border-box !important; /* Box-sizing para webkit (forçado) */
    box-sizing: border-box !important; /* Box-sizing (forçado) */
    display: block !important; /* Exibição em bloco (forçada) */
    width: 100% !important; /* Largura total (forçada) */
    /* Faz com que caixas de texto ocupem a largura total disponível */
  }

  /* Caixas combinadas em layout absoluto */
  .mce-abs-layout-item.mce-combobox {
    display: -webkit-box !important; /* Exibição flexbox para webkit (forçada) */
    display: -ms-flexbox !important; /* Exibição flexbox para IE (forçada) */
    display: flex !important; /* Exibição flexbox (forçada) */
    /* Usa layout flexbox para caixas combinadas para melhor responsividade */
  }

  /* Caixas de texto dentro de caixas combinadas */
  .mce-abs-layout-item.mce-combobox>.mce-textbox {
    -ms-flex: 1 1 auto; /* Flex para IE */
    -webkit-box-flex: 1; /* Flex para webkit */
    flex: 1 1 auto; /* Flex padrão */
    height: 29px !important; /* Altura fixa (forçada) */
    /* Faz com que a caixa de texto ocupe todo o espaço disponível na caixa combinada */
  }
}

/* 
 * ==========================================================
 * SELETORES DE CORES E KANBAN
 * ==========================================================
 * Estilos para seletores de cores e elementos kanban
 */

/* Seletor de cores */
.colorpicker {
  z-index: 99999; /* Camada de empilhamento muito alta */
  /* Garante que o seletor de cores fique acima de outros elementos */
}

/* Botão para carregar mais itens no kanban */
.kanban-load-more {
  padding-left: 5px !important; /* Preenchimento esquerdo (forçado) */
  padding-right: 5px !important; /* Preenchimento direito (forçado) */
  /* Adiciona pequeno espaçamento horizontal no botão de carregar mais itens */
}

/* Seletor de cores no kanban */
.kanban-color-picker {
  position: relative; /* Posicionamento relativo */
  z-index: 40; /* Camada de empilhamento */
  /* Posiciona o seletor de cores acima de outros elementos do kanban */
}

/* 
 * ==========================================================
 * EXEMPLOS DE ESTILO DE TEMA
 * ==========================================================
 * Estilos para exemplos de temas em modais
 */

/* Conteúdo do modal de exemplo de estilo de tema */
.modal-content.theme_style_modal_example {
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2) !important; /* Sombra (forçada) */
  border-top: 1px solid #d8d8d8 !important; /* Borda superior (forçada) */
  margin-top: 12px !important; /* Margem superior (forçada) */
  /* Estiliza o conteúdo do modal de exemplo de tema com sombra e borda */
}

/* Modal dentro do exemplo de estilo de tema */
.modal-content.theme_style_modal_example .modal {
  display: block !important; /* Exibição em bloco (forçada) */
  position: relative !important; /* Posicionamento relativo (forçado) */
  margin-top: 0 !important; /* Remove margem superior (forçada) */
  /* Exibe o modal de exemplo em posição relativa sem margem superior */
}

/* Cabeçalho do modal de exemplo de estilo de tema */
.modal-content.theme_style_modal_example .modal .modal-header {
  border-bottom: 0 !important; /* Remove borda inferior (forçada) */
  /* Remove a linha divisória abaixo do cabeçalho do modal de exemplo */
}

/* 
 * ==========================================================
 * CONTROLES DESLIZANTES DE PROGRESSO
 * ==========================================================
 * Estilos para controles deslizantes de progresso de projeto
 */

/* Container do controle deslizante horizontal de progresso */
.project_progress_slider_horizontal {
  height: 20px; /* Altura */
  /* Define a altura do container do controle deslizante de progresso */
}

/* Estilo do widget UI do controle deslizante */
.project_progress_slider_horizontal.ui-widget.ui-widget-content {
  height: 18px; /* Altura */
  border-color: #cbd5e1; /* Cor da borda cinza claro */
  background: #f4f4f5; /* Cor de fundo cinza muito claro */
  border-radius: 3px; /* Cantos arredondados */
  /* Estiliza a barra de progresso com bordas arredondadas e cores suaves */
}

/* Alça do controle deslizante */
.project_progress_slider_horizontal .ui-slider-handle {
  height: 25px; /* Altura */
  background: #22c55e; /* Cor de fundo verde */
  border: 1px solid #22c55e; /* Borda verde */
  width: 12px; /* Largura */
  margin-left: -1px; /* Margem esquerda negativa */
  cursor: pointer; /* Cursor de mão */
  /* Estiliza a alça do controle deslizante como um pequeno retângulo verde */
}

/* 
 * ==========================================================
 * AJUSTES ADICIONAIS PARA COMENTÁRIOS JQUERY
 * ==========================================================
 * Estilos adicionais para áreas de texto em comentários jQuery
 */

/* Wrapper para área de texto em comentários */
.jquery-comments .textarea-wrapper {
  padding-left: 21px; /* Preenchimento esquerdo */
  /* Adiciona espaço à esquerda da área de texto para alinhar com os comentários */
}

/* Remove borda do pseudo-elemento before do wrapper */
.jquery-comments .textarea-wrapper:before {
  border: 0; /* Remove borda */
  /* Remove a borda que normalmente aparece antes da área de texto */
}

/* Área de texto para escrever comentários */
.jquery-comments .textarea-wrapper .textarea {
  border-radius: 3px; /* Cantos arredondados */
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  /* Estiliza a caixa de texto para entrada de comentários */
}

/* Estados de foco e ativo da área de texto */
.jquery-comments .textarea-wrapper .textarea:focus,
.jquery-comments .textarea-wrapper .textarea:active {
  border-color: #2563eb; /* Borda azul */
  /* Destaca a área de texto quando está em foco ou ativa */
}

/* 
 * ==========================================================
 * FEED DE ATIVIDADES
 * ==========================================================
 * Estilos para feeds de atividades em projetos e leads
 */

/* Container do feed de atividades */
.activity-feed {
  padding: 15px; /* Preenchimento interno */
  word-wrap: break-word; /* Quebra de palavras */
  /* Container para a lista de atividades com quebra de texto para nomes longos */
}

/* Item individual no feed de atividades */
.activity-feed .feed-item {
  position: relative; /* Posicionamento relativo */
  padding-bottom: 30px; /* Preenchimento inferior */
  padding-left: 30px; /* Preenchimento esquerdo */
  border-left: 2px solid #d1d5db; /* Borda esquerda cinza */
  /* Cria uma linha vertical à esquerda de cada item de atividade */
}

/* Texto com ação em itens do feed */
.feed-item .text-has-action {
  margin-bottom: 7px; /* Margem inferior */
  display: inline-block; /* Exibe como bloco em linha */
  /* Estilo para textos clicáveis em itens de atividade */
}

/* Último item no feed de atividades */
.activity-feed .feed-item:last-child {
  border-color: transparent; /* Borda transparente */
  /* Remove a linha vertical do último item para finalizar o feed */
}

/* Marcador circular nos itens do feed */
.activity-feed .feed-item:after {
  content: ""; /* Conteúdo vazio */
  display: block; /* Exibe como bloco */
  position: absolute; /* Posicionamento absoluto */
  top: 0; /* Alinhado ao topo */
  left: -6px; /* Posicionado à esquerda */
  width: 10px; /* Largura */
  height: 10px; /* Altura */
  border-radius: 6px; /* Cantos arredondados */
  background: #fff; /* Fundo branco */
  border: 1px solid #6b7280; /* Borda cinza */
  /* Cria um pequeno círculo no início de cada item de atividade */
}

/* Data do item de atividade */
.activity-feed .feed-item .date {
  position: relative; /* Posicionamento relativo */
  top: -5px; /* Ajuste para cima */
  color: #6b7280; /* Cor cinza */
  text-transform: uppercase; /* Texto em maiúsculas */
  font-size: 12px; /* Tamanho da fonte pequeno */
  font-weight: 500; /* Peso da fonte semi-negrito */
  /* Formata a data da atividade em letras maiúsculas pequenas */
}

/* Texto do item de atividade */
.activity-feed .feed-item .text {
  position: relative; /* Posicionamento relativo */
  top: -3px; /* Ajuste para cima */
  color: #4b5563; /* Cor cinza escuro */
  /* Formata o texto principal da atividade */
}

/* 
 * ==========================================================
 * MODAL DE LEADS
 * ==========================================================
 * Estilos para o modal de visualização e edição de leads
 */

/* Botão superior no modal de leads */
.lead-modal .lead-top-btn {
  margin-top: -5px; /* Margem superior negativa */
  z-index: 10; /* Camada de empilhamento */
  position: relative; /* Posicionamento relativo */
  /* Posiciona o botão superior no modal de leads */
}

/* Itens de feed no modal de leads */
.lead-modal .activity-feed .feed-item {
  padding-top: 20px; /* Preenchimento superior */
  padding-bottom: 15px; /* Preenchimento inferior */
  /* Ajusta o espaçamento dos itens de atividade no modal de leads */
}

/* Primeiro item de feed no modal de leads */
.lead-modal .activity-feed .feed-item:first-child {
  border-top-right-radius: 3px; /* Cantos superiores direitos arredondados */
  /* Arredonda o canto superior direito do primeiro item de atividade */
}

/* Último item de feed no modal de leads */
.lead-modal .activity-feed .feed-item:last-child {
  border: 1px solid #d1d5db; /* Borda cinza */
  border-bottom-right-radius: 3px; /* Cantos inferiores direitos arredondados */
  background: #f9fafb; /* Fundo cinza muito claro */
  /* Destaca o último item de atividade com borda e fundo diferenciados */
}

/* Marcador circular em itens de feed no modal de leads */
.lead-modal .activity-feed .feed-item:after {
  top: -5px; /* Ajuste para cima */
  border: 1px solid #9ca3af; /* Borda cinza médio */
  /* Ajusta a posição e a cor do marcador circular nos itens de atividade de leads */
}

/* 
 * ==========================================================
 * MODELOS DE EMAIL E MARCOS
 * ==========================================================
 * Estilos para cabeçalhos de modelos de email e marcos de projeto
 */

/* Cabeçalho de modelo de email */
.email-template-heading {
  padding: 10px; /* Preenchimento interno */
  background-color: #f9fafb; /* Cor de fundo cinza muito claro */
  border: 1px solid #e5e7eb; /* Borda cinza claro */
  box-shadow: none; /* Remove sombra */
  font-size: 15px; /* Tamanho da fonte */
  /* Estiliza o cabeçalho dos modelos de email com aparência limpa e leve */
}

/* Espaço reservado para marcos arrastáveis */
.milestone-column .ui-sortable-placeholder {
  height: 50px; /* Altura */
  overflow: hidden; /* Esconde conteúdo que transborda */
  border: 2px dashed #d1d1d1; /* Borda tracejada cinza */
  background: transparent !important; /* Fundo transparente (forçado) */
  margin-top: 10px; /* Margem superior */
  /* Exibe um espaço reservado quando um marco de projeto está sendo arrastado */
}

/* 
 * ==========================================================
 * DESTAQUE DE TAREFAS E LEADS
 * ==========================================================
 * Estilos para destacar tarefas e leads do usuário atual ou atrasados
 */

/* Destaque de atraso: visual em tasks-kanban.css (não vermelho Bootstrap) */
li.task.overdue-task .panel-body {
  background: unset;
  border: unset;
}

/* 
 * ==========================================================
 * EXIBIÇÃO DE QUANTIDADE E FILTROS
 * ==========================================================
 * Estilos para controles de exibição de quantidade e menus de filtro
 */

/* Texto no wrapper de exibição de quantidade */
.show_quantity_as_wrapper span {
  font-weight: 500; /* Peso da fonte semi-negrito */
  /* Destaca o texto de rótulo para opções de exibição de quantidade */
}

/* Menu dropdown de filtros com altura limitada */
._filter_data .dropdown-menu.height500 {
  max-height: 500px; /* Altura máxima */
  overflow-y: scroll; /* Adiciona rolagem vertical */
  /* Limita a altura do menu de filtros e adiciona rolagem para muitas opções */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA FILTROS E DROPDOWNS
 * ==========================================================
 * Ajustes para menus de filtro em dispositivos móveis
 */

@media (max-width: 768px) {
  /* Submenus de dropdown em dispositivos móveis */
  .dropdown-submenu.pull-left>.dropdown-menu {
    display: block; /* Exibe como bloco */
    left: 1px; /* Posicionamento à esquerda */
    position: relative; /* Posicionamento relativo */
    border: 0; /* Remove borda */
    box-shadow: none; /* Remove sombra */
    /* Converte submenus de dropdown para exibição em linha em dispositivos móveis */
  }

  /* Menu dropdown de filtros em dispositivos móveis */
  ._filter_data .dropdown-menu {
    max-height: 500px; /* Altura máxima */
    overflow-y: scroll; /* Adiciona rolagem vertical */
    /* Limita a altura do menu de filtros em dispositivos móveis */
  }

  /* Remove indicador de seta em submenus */
  .dropdown-submenu>a:after {
    border-left-color: transparent; /* Cor da borda transparente */
    /* Remove a seta que indica submenus em dispositivos móveis */
  }

  /* Estilo para links de submenus */
  .dropdown-submenu>a {
    background: #e2e8f0; /* Fundo cinza claro */
    /* Destaca os links de submenu com fundo cinza claro */
  }

  /* Wrapper de exibição de quantidade em dispositivos móveis */
  .show_quantity_as_wrapper {
    display: inline-block; /* Exibe como bloco em linha */
    width: 100%; /* Largura total */
    margin-bottom: 15px; /* Margem inferior */
    /* Ajusta o container de opções de exibição de quantidade para ocupar toda a largura */
  }

  /* Texto no wrapper de exibição de quantidade em dispositivos móveis */
  .show_quantity_as_wrapper span {
    float: left; /* Flutua à esquerda */
    margin-bottom: 15px; /* Margem inferior */
    /* Posiciona o texto à esquerda e adiciona espaço abaixo em dispositivos móveis */
  }

  /* Botões de rádio no wrapper de exibição de quantidade */
  .show_quantity_as_wrapper div.radio {
    display: block; /* Exibe como bloco */
    clear: both; /* Limpa flutuações */
    float: left; /* Flutua à esquerda */
    margin-left: 0; /* Remove margem esquerda */
    /* Empilha os botões de rádio verticalmente em dispositivos móveis */
  }

  /* Botão superior no modal de leads em dispositivos móveis */
  .lead-modal .lead-top-btn {
    width: 100%; /* Largura total */
    margin-top: 5px; /* Margem superior */
    /* Ajusta o botão superior para ocupar toda a largura em dispositivos móveis */
  }
}

/* 
 * ==========================================================
 * ESTATÍSTICAS E PROGRESSO FINANCEIRO
 * ==========================================================
 * Estilos para exibição de estatísticas e progresso financeiro
 */

/* Container de estatísticas superiores */
.top_stats_wrapper {
  padding: 12px 22px 20px 22px; /* Preenchimento interno */
  background: #fff; /* Fundo branco */
  border-radius: 7px; /* Cantos arredondados */
  box-shadow: 0 1px 7px 1px rgb(90 90 90 / 5%); /* Sombra suave */
  border: 1px solid #dce1ef; /* Borda azul muito claro */
  /* Container para estatísticas no topo do painel com aparência de cartão */
}

/* Barra de progresso de status financeiro */
.progress-finance-status {
  margin-top: -25px; /* Margem superior negativa */
  margin-bottom: 16px; /* Margem inferior */
  z-index: 1; /* Camada de empilhamento */
  /* Posiciona a barra de progresso financeiro sobrepondo o container de estatísticas */
}

/* Wrapper de texto para estatísticas */
.text-stats-wrapper {
  z-index: 2; /* Camada de empilhamento */
  /* Garante que o texto das estatísticas fique acima de outros elementos */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA TABELAS
 * ==========================================================
 * Ajustes para tabelas em dispositivos móveis e tablets
 */

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

  /* Ajustes de margem para tabelas responsivas */
  .s_table table,
  .s_table .table.items .main {
    margin-top: 0; /* Remove margem superior */
    margin-bottom: 35px; /* Margem inferior */
    clear: both; /* Limpa flutuações */
    /* Ajusta as margens das tabelas em dispositivos móveis */
  }

  /* Container de tabela responsiva */
  .s_table.table-responsive {
    padding: 0; /* Remove preenchimento */
    background: #f9f9f9; /* Fundo cinza muito claro */
    /* Define um fundo sutil para o container da tabela responsiva */
  }

  /* Células de tabela em dispositivos móveis */
  .s_table .table.items tbody>tr>td:not(:first-child) {
    display: inline-block; /* Exibe como bloco em linha */
    width: 100%; /* Largura total */
    /* Faz com que as células ocupem toda a largura disponível em dispositivos móveis */
  }

  /* Converte elementos de tabela para blocos */
  .s_table table,
  .s_table thead,
  .s_table tbody,
  .s_table th,
  .s_table td,
  .s_table tr {
    display: block; /* Exibe como bloco */
    /* Força os elementos da tabela a se comportarem como blocos em vez de elementos de tabela */
  }

  /* Esconde cabeçalhos de tabela de forma acessível */
  .s_table thead tr {
    position: absolute; /* Posicionamento absoluto */
    top: -9999px; /* Posicionado muito acima */
    left: -9999px; /* Posicionado muito à esquerda */
    /* Esconde visualmente os cabeçalhos mas mantém acessíveis para leitores de tela */
  }

  /* Ajuste RTL para cabeçalhos de tabela escondidos */
  [dir="rtl"] .s_table thead tr {
    left: auto; /* Remove posicionamento à esquerda */
    /* Ajusta o posicionamento para layouts RTL */
  }

  /* Estilo para células de tabela em dispositivos móveis */
  .s_table td {
    /* Comporta-se como uma "linha" */
    border: none; /* Remove borda */
    border-bottom: 1px solid #eee; /* Borda inferior cinza claro */
    position: relative; /* Posicionamento relativo */
    padding-left: 50%; /* Preenchimento esquerdo */
    /* Transforma células de tabela em linhas com espaço para rótulos à esquerda */
  }

  /* Esconde alças de arrasto em tabelas responsivas */
  .s_table td.dragger {
    display: none; /* Oculta */
    /* Remove alças de arrasto em tabelas responsivas */
  }

  /* Última célula de tabela em dispositivos móveis */
  .s_table td:last-child {
    clear: both; /* Limpa flutuações */
    /* Garante que a última célula comece em uma nova linha */
  }

  /* Botões e links na última célula de tabela */
  .s_table td:last-child button,
  .s_table td:last-child a {
    display: block; /* Exibe como bloco */
    width: 100%; /* Largura total */
    margin-top: 15px; /* Margem superior */
    margin-bottom: 15px; /* Margem inferior */
    /* Transforma botões e links em blocos de largura total com espaçamento */
  }

  /* Pseudo-elemento para rótulos de célula */
  .s_table td:before {
    /* Comporta-se como um cabeçalho de tabela */
    position: absolute; /* Posicionamento absoluto */
    /* Valores de topo/esquerda simulam preenchimento */
    top: 6px; /* Distância do topo */
    left: 6px; /* Distância da esquerda */
    width: 45%; /* Largura */
    padding-right: 10px; /* Preenchimento direito */
    white-space: nowrap; /* Sem quebra de texto */
    /* Cria um rótulo à esquerda de cada célula para substituir o cabeçalho */
  }

  /* Coluna de porcentagem de projeto em dispositivos móveis */
  .project-percent-col {
    margin-top: 25px; /* Margem superior */
    /* Adiciona espaço acima da coluna de porcentagem de projeto em dispositivos móveis */
  }
}

/* 
 * ==========================================================
 * MODAIS EM TELA CHEIA
 * ==========================================================
 * Estilos para modais que ocupam a maior parte da tela
 */

/* Container de modal em tela cheia */
.full-screen-modal {
  width: 90%; /* Largura */
  height: 90%; /* Altura */
  position: absolute; /* Posicionamento absoluto */
  left: 0; /* Alinhado à esquerda */
  right: 0; /* Alinhado à direita */
  top: 0; /* Alinhado ao topo */
  bottom: 0; /* Alinhado à base */
  margin: auto; /* Margem automática */
  overflow-y: initial !important; /* Rolagem vertical inicial (forçada) */
  /* Cria um modal que ocupa quase toda a tela, centralizado na janela */
}

/* Conteúdo do modal em tela cheia */
.full-screen-modal .modal-content {
  height: 100%; /* Altura total */
  min-height: 100%; /* Altura mínima total */
  max-height: 100%; /* Altura máxima total */
  /* Faz com que o conteúdo ocupe toda a altura disponível do modal */
}

/* Rodapé do modal em tela cheia */
.full-screen-modal .modal-footer:not(.modal-not-full-width) {
  bottom: 0; /* Alinhado à base */
  position: absolute; /* Posicionamento absoluto */
  width: 100%; /* Largura total */
  /* Fixa o rodapé na parte inferior do modal */
}

/* Pseudo-elemento após o rodapé do modal */
.full-screen-modal .modal-footer:not(.modal-not-full-width):after {
  content: " "; /* Conteúdo vazio */
  margin-top: -7px; /* Margem superior negativa */
  padding-bottom: 3px; /* Preenchimento inferior */
  /* Adiciona um pequeno espaço após o rodapé do modal */
}

/* 
 * ==========================================================
 * ÁREAS DE DISCUSSÃO DE ARQUIVOS
 * ==========================================================
 * Estilos para áreas de discussão e visualização de arquivos de projeto
 */

/* Áreas de discussão e visualização de arquivos */
.project_file_discusssions_area,
.project_file_area {
  overflow-y: scroll; /* Adiciona rolagem vertical */
  height: 400px; /* Altura fixa */
  /* Cria áreas com altura fixa e rolagem para discussões e visualização de arquivos */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA ÁREAS DE DISCUSSÃO
 * ==========================================================
 * Ajustes para áreas de discussão e modais em dispositivos móveis
 */

@media (max-width: 768px) {
  /* Ajuste de altura para áreas de discussão em dispositivos móveis */
  .project_file_discusssions_area,
  .project_file_area {
    height: auto !important; /* Altura automática (forçada) */
    /* Remove a altura fixa para permitir que o conteúdo determine a altura */
  }

  /* Modal em tela cheia em dispositivos móveis */
  .full-screen-modal {
    width: auto; /* Largura automática */
    height: auto; /* Altura automática */
    position: relative; /* Posicionamento relativo */
    left: auto; /* Remove posicionamento à esquerda */
    right: auto; /* Remove posicionamento à direita */
    top: auto; /* Remove posicionamento ao topo */
    bottom: auto; /* Remove posicionamento à base */
    margin: 10px; /* Margem */
    overflow-y: initial !important; /* Rolagem vertical inicial (forçada) */
    /* Converte o modal de tela cheia para um modal padrão em dispositivos móveis */
  }

  /* Espaçamento para área de discussões em dispositivos móveis */
  .project_file_discusssions_area {
    margin-top: 30px; /* Margem superior */
    /* Adiciona espaço acima da área de discussões em dispositivos móveis */
  }

  /* Rodapé do modal em tela cheia em dispositivos móveis */
  .full-screen-modal .modal-footer {
    width: auto; /* Largura automática */
    position: relative !important; /* Posicionamento relativo (forçado) */
    /* Remove o posicionamento fixo do rodapé em dispositivos móveis */
  }
}

/* 
 * ==========================================================
 * PRÉ-VISUALIZAÇÃO DE IMAGENS
 * ==========================================================
 * Estilos para containers de pré-visualização de imagens
 */

/* Container de pré-visualização de imagem */
.preview_image {
  height: auto; /* Altura automática */
  width: 250px; /* Largura fixa */
  overflow: hidden; /* Esconde conteúdo que transborda */
  margin-bottom: 15px; /* Margem inferior */
  margin-top: 15px; /* Margem superior */
  /* Container para exibir miniaturas de imagens com largura fixa */
}

/* Último container de pré-visualização de imagem */
.preview_image:last-child {
  margin-top: 0; /* Remove margem superior */
  margin-bottom: 0; /* Remove margem inferior */
  /* Remove margens do último container de pré-visualização para evitar espaçamento extra */
}

/* Imagem dentro do container de pré-visualização */
.preview_image img {
  width: 100%; /* Largura total */
  height: auto; /* Altura automática */
  /* Faz com que a imagem ocupe toda a largura do container mantendo a proporção */
}

/* 
 * ==========================================================
 * ANEXOS DE TAREFAS
 * ==========================================================
 * Estilos para anexos em tarefas
 */

/* Container de anexo de tarefa */
.task-attachment {
  border: 1px solid #e2e8f0; /* Borda cinza claro */
  padding: 10px; /* Preenchimento interno */
  border-radius: 3px; /* Cantos arredondados */
  max-height: 195px; /* Altura máxima */
  min-height: 195px; /* Altura mínima */
  overflow: hidden; /* Esconde conteúdo que transborda */
  /* Container para anexos de tarefas com altura fixa e borda */
}

/* Pré-visualização de imagem em anexos de tarefas */
.task-attachment .preview_image {
  margin: 0; /* Remove margem */
  width: 100%; /* Largura total */
  /* Ajusta a pré-visualização de imagem para ocupar todo o espaço disponível */
}

/* Mensagem para anexos sem pré-visualização */
.task-attachment .task-attachment-no-preview {
  margin-top: 45px; /* Margem superior */
  text-align: center; /* Alinhamento central */
  /* Exibe uma mensagem centralizada quando não há pré-visualização disponível */
}

/* Informações do usuário que anexou o arquivo */
.task-attachment .task-attachment-user {
  padding-bottom: 10px; /* Preenchimento inferior */
  display: inline-block; /* Exibe como bloco em linha */
  width: 100%; /* Largura total */
  margin-left: 0; /* Remove margem esquerda */
  border-bottom: 1px solid #e2e8f0; /* Borda inferior cinza claro */
  /* Exibe informações do usuário que anexou o arquivo com uma linha separadora abaixo */
}

/* Wrapper para anexos de tarefas */
.task-attachment-wrapper {
  max-height: 200px; /* Altura máxima */
  overflow: hidden; /* Esconde conteúdo que transborda */
  /* Container para múltiplos anexos com altura máxima limitada */
}

/* 
 * ==========================================================
 * MENU DE TAREFAS
 * ==========================================================
 * Estilos para menus e popovers em tarefas
 */

/* Ícone do gatilho do menu de tarefas */
.task-modal-single .trigger i {
  font-size: 10px; /* Tamanho da fonte */
  /* Ícone pequeno para o botão que abre o menu de opções da tarefa */
}

/* Popover do menu de tarefas */
.task-single-menu .popover {
  width: 400px; /* Largura fixa */
  /* Define uma largura maior para o popover do menu de opções da tarefa */
}

/* 
 * ==========================================================
 * ELEMENTOS INTERNOS DE POPOVERS
 * ==========================================================
 * Estilos para elementos internos de popovers e menus de tarefas
 */

/* Container interno de popover */
.popover-inner {
  position: relative; /* Posicionamento relativo */
  /* Define o posicionamento para elementos dentro do popover */
}

/* Lista de opções no menu de tarefas */
.task-single-menu ul {
  margin: 0; /* Remove margem */
  padding: 5px; /* Preenchimento interno */
  /* Lista de opções no menu de tarefas com espaçamento mínimo */
}

/* Itens da lista no menu de tarefas */
.task-single-menu ul li {
  margin-bottom: 10px; /* Margem inferior */
  /* Adiciona espaço entre os itens do menu */
}

/* Último item da lista no menu de tarefas */
.task-single-menu ul li:last-child {
  margin-bottom: 0; /* Remove margem inferior */
  /* Remove o espaço após o último item do menu */
}

/* Links nos itens do menu de tarefas */
.task-single-menu ul li a {
  font-size: 14px; /* Tamanho da fonte */
  /* Define o tamanho da fonte para os links no menu de tarefas */
}

/* 
 * ==========================================================
 * CONTEÚDO DE TEXTO FORMATADO
 * ==========================================================
 * Estilos para conteúdo de texto formatado (TinyMCE Content)
 */

/* Container de conteúdo formatado */
.tc-content {
  line-height: 1.5rem; /* Altura da linha */
  /* Define o espaçamento entre linhas para melhor legibilidade no conteúdo formatado */
}

/* Listas não ordenadas e ordenadas em conteúdo formatado */
.tc-content ul,
.tc-content ol {
  list-style: inherit; /* Herda o estilo de lista */
  margin-left: 16px; /* Margem esquerda */
  /* Adiciona recuo e marcadores para listas dentro do conteúdo formatado */
}

/* Listas ordenadas em conteúdo formatado */
.tc-content ol {
  list-style-type: decimal; /* Estilo de lista numérica */
  /* Define marcadores numéricos para listas ordenadas */
}

/* Tabelas em conteúdo formatado */
.tc-content table {
  margin-top: 0; /* Remove margem superior */
  border-collapse: initial; /* Colapso de borda inicial */
  /* Ajusta o comportamento padrão de tabelas dentro do conteúdo formatado */
}

/* Imagens em conteúdo formatado */
.tc-content img {
  max-width: 100%; /* Largura máxima total */
  /* Garante que imagens não ultrapassem o container e mantenham proporção */
}

/* Células de tabela em conteúdo formatado */
.tc-content table>tbody>tr>td {
  padding: 5px 10px 5px 10px; /* Preenchimento interno */
  /* Adiciona espaçamento adequado dentro das células de tabela */
}

/* Tabelas com borda em conteúdo formatado */
.tc-content table[border="1"],
.tc-content table[border="1"] td {
  border: 1px solid; /* Borda sólida */
  /* Adiciona bordas a tabelas que têm o atributo border="1" */
}

/* Texto em itálico em conteúdo formatado */
.tc-content em {
  font-style: italic; /* Estilo de fonte itálico */
  /* Define o estilo itálico para elementos enfatizados */
}

/* Espaço reservado para parágrafos vazios */
.tc-content p:empty:before {
  content: ' '; /* Conteúdo espaço */
  white-space: pre; /* Preserva espaços */
  /* Mantém a altura de parágrafos vazios para preservar o layout */
}

/* 
 * ==========================================================
 * CONTEÚDO DE COMENTÁRIOS DE TAREFAS
 * ==========================================================
 * Estilos para conteúdo de comentários em modais de tarefas
 */

/* Imagens em conteúdo de comentários de tarefas */
.task-modal-single .comment-content img {
  max-width: 100%; /* Largura máxima total */
  height: auto; /* Altura automática */
  /* Garante que imagens em comentários não ultrapassem o container e mantenham proporção */
}

/* Iframes em conteúdo de comentários de tarefas */
.task-modal-single .comment-content iframe {
  width: 100%; /* Largura total */
  /* Faz com que vídeos e outros iframes ocupem toda a largura disponível */
}

/* 
 * ==========================================================
 * AJUSTES RESPONSIVOS PARA FORMULÁRIOS EM LINHA
 * ==========================================================
 * Ajustes para formulários em linha em dispositivos maiores
 */

@media (min-width: 768px) {
  /* Áreas de texto em formulários em linha */
  .form-inline textarea.form-control {
    display: block !important; /* Exibe como bloco (forçado) */
    width: 100%; /* Largura total */
    /* Garante que áreas de texto em formulários em linha ocupem toda a largura disponível */
  }

  /* Alerta flutuante na página de administração de leads */
  .page-leads-admin .float-alert {
    width: 18%; /* Largura específica */
    /* Define uma largura específica para alertas flutuantes na página de leads */
  }

  /* Grupos de formulário em conteúdo de popovers */
  .form-inline .popover-content .form-group {
    margin-bottom: 15px; /* Margem inferior */
    /* Adiciona espaço entre grupos de formulário dentro de popovers */
  }
}

/* 
 * ==========================================================
 * TOOLTIPS
 * ==========================================================
 * Estilos para tooltips (dicas de ferramentas)
 */

/* Container de tooltip */
.tooltip {
  position: fixed; /* Posicionamento fixo */
  /* Garante que tooltips fiquem visíveis mesmo durante a rolagem da página */
}

/* Conteúdo interno do tooltip */
.tooltip>.tooltip-inner {
  padding: 7px 10px; /* Preenchimento interno */
  background: #1f2d3d; /* Cor de fundo azul escuro */
  /* Define a aparência do conteúdo interno do tooltip com fundo escuro */
}

/* 
 * ==========================================================
 * AJUSTES ADICIONAIS PARA CABEÇALHOS
 * ==========================================================
 * Ajustes adicionais para cabeçalhos de modelos e perfis
 */

/* Ajustes adicionais para cabeçalho de modelo de email */
.email-template-heading {
  margin-bottom: 0; /* Remove margem inferior */
  border-radius: 3px; /* Cantos arredondados */
  margin-left: -24px; /* Margem negativa à esquerda */
  margin-right: -24px; /* Margem negativa à direita */
  border-left: 0; /* Remove borda esquerda */
  border-right: 0; /* Remove borda direita */
  border-top-left-radius: 0; /* Remove arredondamento superior esquerdo */
  border-top-right-radius: 0; /* Remove arredondamento superior direito */
  border-bottom-left-radius: 0; /* Remove arredondamento inferior esquerdo */
  border-bottom-right-radius: 0; /* Remove arredondamento inferior direito */
  padding-left: 28px; /* Preenchimento esquerdo */
  /* Ajusta o cabeçalho de modelo de email para estender-se além das bordas do container */
}

/* Cabeçalho de perfil de cliente */
.customer-heading-profile {
  margin-bottom: 15px; /* Margem inferior */
  margin-top: 0; /* Remove margem superior */
  /* Define o espaçamento para o cabeçalho na página de perfil do cliente */
}

/* 
 * ==========================================================
 * ELEMENTOS DE MENU E TRANSFORMAÇÕES
 * ==========================================================
 * Estilos para ícones de menu e transformações de elementos
 */

/* Ícones em menu de opções (três pontos) */
.menu-dots a>i {
  font-size: 11px; /* Tamanho da fonte */
  /* Define o tamanho dos ícones nos menus de opções (três pontos) */
}

/* Transformação de inclinação para a direita */
.tilt.right {
  transform: rotate(3deg); /* Rotação padrão */
  -moz-transform: rotate(3deg); /* Rotação para Firefox */
  -ms-transform: rotate(-3deg); /* Rotação para IE (nota: valor negativo) */
  -webkit-transform: rotate(3deg); /* Rotação para Chrome/Safari */
  /* Aplica uma leve inclinação para a direita em elementos */
}

/* Transformação de inclinação para a esquerda */
.tilt.left {
  transform: rotate(-3deg); /* Rotação padrão */
  -moz-transform: rotate(-3deg); /* Rotação para Firefox */
  -ms-transform: rotate(-3deg); /* Rotação para IE */
  -webkit-transform: rotate(-3deg); /* Rotação para Chrome/Safari */
  /* Aplica uma leve inclinação para a esquerda em elementos */
}

/* 
 * ==========================================================
 * IMAGENS EM TABELAS
 * ==========================================================
 * Estilos para imagens exibidas em tabelas
 */

/* Container de imagem em tabela */
.table-image {
  height: 75px; /* Altura fixa */
  width: 250px; /* Largura fixa */
  margin: 15px 0; /* Margem superior e inferior */
  /* Define dimensões e espaçamento para imagens exibidas em tabelas */
}

/* 
 * ==========================================================
 * CABEÇALHOS DE CAMPO DE LEAD
 * ==========================================================
 * Estilos para cabeçalhos em páginas de leads
 */

/* Cabeçalho de campo de lead */
.lead-field-heading {
  margin-top: 10px; /* Margem superior */
  margin-bottom: 0; /* Remove margem inferior */
  /* Define espaçamento para cabeçalhos de campos em formulários de leads */
}

/* Primeiro cabeçalho de informações de lead */
.lead-info-heading:first-child {
  margin-left: -20px; /* Margem negativa à esquerda */
  padding-left: 20px; /* Preenchimento à esquerda */
  /* Alinha o primeiro cabeçalho com a borda esquerda da seção */
}

/* Cabeçalho de informações de lead */
.lead-info-heading {
  background: #f9fafb; /* Cor de fundo cinza muito claro */
  font-size: 18px; /* Tamanho da fonte */
  padding: 7px; /* Preenchimento interno */
  border-radius: 3px; /* Cantos arredondados */
  margin-bottom: 15px; /* Margem inferior */
  /* Define o estilo visual para cabeçalhos de seção nas páginas de leads */
}

/* Título em cabeçalho de informações de lead */
.lead-info-heading h4 {
  color: #0f172a; /* Cor azul escuro */
  font-weight: 500; /* Peso da fonte semi-negrito */
  font-size: 13.5px; /* Tamanho da fonte */
  margin: 0px; /* Remove margem */
  /* Define o estilo do título dentro do cabeçalho de informações de lead */
}

/* 
 * ==========================================================
 * ATIVIDADE RECENTE DE LEAD
 * ==========================================================
 * Estilos para seções de atividade recente em páginas de leads
 */

/* Cabeçalho de informações em seção de atividade recente */
.lead-latest-activity .lead-info-heading {
  margin-right: -20px; /* Margem negativa à direita */
  /* Alinha o cabeçalho com a borda direita da seção de atividade recente */
}

/* Abas de navegação para novos leads */
.nav-tabs.lead-new {
  display: none; /* Ocultas por padrão */
  margin-bottom: 10px; /* Margem inferior */
  /* Abas de navegação para novos leads que são exibidas apenas em determinadas condições */
}

/* 
 * ==========================================================
 * CAMPOS TRANSPARENTES
 * ==========================================================
 * Estilos para campos de entrada com aparência transparente
 */

/* Campo de entrada transparente */
.input-transparent {
  box-shadow: none !important; /* Remove sombra (forçado) */
  outline: none; /* Remove contorno */
  border: 0 !important; /* Remove borda (forçado) */
  background: transparent; /* Fundo transparente */
  /* Cria campos de entrada sem elementos visuais de borda ou fundo, usados em formulários embutidos */
}

/* 
 * ==========================================================
 * LINKS DE NAVEGAÇÃO RÁPIDA
 * ==========================================================
 * Estilos para links de navegação rápida para topo e fundo da página
 */

/* Links para navegar para o topo e para o fundo da página */
#toplink,
#botlink {
  position: fixed; /* Posicionamento fixo */
  right: 7.5%; /* Distância da direita */
  bottom: 50%; /* Posicionamento vertical centralizado */
  padding: 10px; /* Preenchimento interno */
  margin: 0 -20px 0 0; /* Margens */
  color: #475569; /* Cor do texto cinza escuro */
  background: #f4f4f5; /* Cor de fundo cinza muito claro */
  font-size: 1.5em; /* Tamanho da fonte */
  border: 1px solid #cbd5e1; /* Borda cinza claro */
  border-bottom: 1px solid #cbd5e1; /* Borda inferior cinza claro */
  border-radius: 6px 6px 0 0; /* Cantos arredondados superiores */
  z-index: 99; /* Camada de empilhamento */
  /* Botões fixos na lateral da página para navegação rápida para o topo e fundo */
}

/* Link para navegar para o fundo da página */
#botlink {
  top: 50%; /* Posicionamento vertical */
  padding: 10px; /* Preenchimento interno */
  bottom: auto; /* Remove posicionamento inferior */
  border: 1px solid #cbd5e1; /* Borda cinza claro */
  border-top: 1px solid #cbd5e1; /* Borda superior cinza claro */
  border-radius: 0 0 6px 6px; /* Cantos arredondados inferiores */
  margin-top: -1px; /* Margem negativa superior */
  /* Botão de navegação para o fundo da página, posicionado abaixo do botão de topo */
}

/* Estado hover para links de navegação */
#toplink:hover,
#botlink:hover {
  color: #0f172a; /* Cor do texto azul escuro */
  background: #e2e8f0; /* Cor de fundo cinza claro */
  text-decoration: none; /* Remove decoração de texto */
  /* Efeito visual ao passar o mouse sobre os botões de navegação */
}

/* Ajustes RTL para links de navegação */
[dir="rtl"] #toplink,
[dir="rtl"] #botlink {
  left: 7.5%; /* Posicionamento à esquerda */
  right: auto; /* Remove posicionamento à direita */
  /* Inverte o posicionamento dos botões de navegação para layouts RTL (direita para esquerda) */
}

/* 
 * ==========================================================
 * LIGHTBOX
 * ==========================================================
 * Estilos para o componente lightbox de visualização de imagens
 */

/* Sobreposição e container de lightbox */
.lightboxOverlay,
#lightbox {
  z-index: 100002 !important; /* Camada de empilhamento muito alta (forçada) */
  /* Garante que o lightbox apareça acima de todos os outros elementos da página */
}

/* 
 * ==========================================================
 * TAGS EM MODAIS DE TAREFAS
 * ==========================================================
 * Estilos para tags em modais de tarefas
 */

/* Listas de tags e novos itens de tag em modais de tarefas */
.task-modal-single ul.tagit,
.task-modal-single ul.tagit li.tagit-new {
  padding-bottom: 0; /* Remove preenchimento inferior */
  margin-top: 5px; /* Margem superior */
  margin-bottom: 5px; /* Margem inferior */
  /* Ajusta o espaçamento para listas de tags e novos itens de tag em modais de tarefas */
}

/* Estado hover para tags em tabelas de dados */
table.dataTable tbody .tags-labels .label-tag:hover {
  cursor: pointer; /* Cursor de ponteiro */
  opacity: 0.8; /* Opacidade reduzida */
  /* Efeito visual ao passar o mouse sobre tags em tabelas de dados */
}

/* 
 * ==========================================================
 * TABELAS DE VISÃO GERAL DE PROJETO
 * ==========================================================
 * Estilos para tabelas de visão geral em páginas de projeto
 */

/* Células em tabelas de visão geral de projeto */
.table.project-overview-table>tbody>tr>td {
  padding-left: 2px; /* Preenchimento esquerdo mínimo */
  /* Reduz o espaçamento horizontal nas células para exibir mais informações */
}

/* Primeira linha em tabelas de visão geral de projeto */
.table.project-overview-table>tbody>tr:first-child>td {
  border-top: 0; /* Remove borda superior */
  /* Elimina a borda superior para melhorar a aparência visual */
}

/* Tags em quadros kanban */
.kanban-tags .tags-labels {
  max-width: 268px; /* Largura máxima */
  min-width: 100%; /* Largura mínima */
  /* Define limites de largura para containers de tags em quadros kanban */
}

/* 
 * ==========================================================
 * ELEMENTOS DE DESTAQUE
 * ==========================================================
 * Estilos para elementos com destaque visual
 */

/* Fundo destacado */
.highlight-bg {
  background: #edfaff; /* Fundo azul claro */
  border: 1px solid #def6ff; /* Borda azul claro */
  /* Aplica um fundo destacado em azul claro para elementos importantes */
}

/* 
 * ==========================================================
 * BOTÕES DE SELEÇÃO DE PROJETO
 * ==========================================================
 * Estilos para botões de seleção no cabeçalho de projetos
 */

/* Botão de seleção de projeto no topo e seus estados */
#project_view_name .bootstrap-select button[data-id="project_top"],
#project_view_name .bootstrap-select button[data-id="project_top"]:focus,
#project_view_name .bootstrap-select button[data-id="project_top"]:hover {
  font-size: 19px; /* Tamanho da fonte maior */
  font-weight: 600; /* Peso da fonte negrito */
  height: auto; /* Altura automática */
  background: transparent; /* Fundo transparente */
  border: 0; /* Remove borda */
  box-shadow: none; /* Remove sombra */
  padding-top: 0; /* Remove preenchimento superior */
  padding-left: 0; /* Remove preenchimento esquerdo */
  padding-bottom: 0; /* Remove preenchimento inferior */
  /* Estiliza o botão de seleção de projeto no cabeçalho para parecer com um título */
}

/* Indicador de seta no seletor de projeto */
#project_view_name .bootstrap-select .bs-caret {
  margin-left: 15px; /* Margem esquerda */
  /* Posiciona o ícone de seta para baixo no seletor de projeto */
}

/* 
 * ==========================================================
 * LINKS DE EDIÇÃO EM LINHA
 * ==========================================================
 * Estilos para links que permitem edição em linha de campos
 */

/* Link de edição em linha para campos personalizados */
.custom-field-inline-edit-link {
  float: left; /* Flutua à esquerda */
  margin-right: 5px; /* Margem direita */
  /* Posiciona o link de edição em linha à esquerda do conteúdo do campo personalizado */
}

/* Ajuste RTL para link de edição em linha */
[dir="rtl"] .custom-field-inline-edit-link {
  float: right; /* Flutua à direita */
  margin-left: 5px; /* Margem esquerda */
  /* Inverte o posicionamento do link de edição em linha para layouts RTL */
}

/* 
 * ==========================================================
 * POPOVERS DE TEMPORIZADORES
 * ==========================================================
 * Estilos para popovers relacionados a temporizadores
 */

/* Popover de nota de temporizador superior */
.popover-top-timer-note {
  z-index: 88888; /* Camada de empilhamento muito alta */
  /* Garante que o popover de notas de temporizador apareça acima de outros elementos */
}

/* 
 * ==========================================================
 * CAMPOS DE PREENCHIMENTO AUTOMÁTICO FALSOS
 * ==========================================================
 * Estilos para campos ocultos usados para evitar preenchimento automático
 */

/* Campo falso para evitar preenchimento automático */
.fake-autofill-field {
  height: 1px !important; /* Altura mínima (forçada) */
  width: 1px !important; /* Largura mínima (forçada) */
  border: 0 !important; /* Remove borda (forçada) */
  padding: 0 !important; /* Remove preenchimento (forçado) */
  /* Campo invisível usado para enganar o preenchimento automático do navegador */
}

/* 
 * ==========================================================
 * MARCADORES DE NOTIFICAÇÃO NÃO LIDA
 * ==========================================================
 * Estilos para indicadores de notificações não lidas
 */

/* Marcador de notificação não lida em linha */
.not-mark-as-read-inline {
  width: auto !important; /* Largura automática (forçada) */
  position: absolute; /* Posicionamento absoluto */
  right: 5px; /* Distância da direita */
  bottom: 7px; /* Distância do fundo */
  /* Indicador visual de notificação não lida posicionado no canto inferior direito */
}

/* Ajuste RTL para marcador de notificação não lida */
[dir="rtl"] .not-mark-as-read-inline {
  left: 5px; /* Distância da esquerda */
  right: auto; /* Remove posicionamento à direita */
  /* Inverte o posicionamento do marcador de notificação não lida para layouts RTL */
}

/* Estados hover, active e focus para marcadores de notificação */
.not-mark-as-read-inline:hover,
.not-mark-as-read-inline:active,
.not-mark-as-read-inline:focus {
  background-color: transparent !important; /* Fundo transparente (forçado) */
  /* Mantém o fundo transparente ao passar o mouse ou focar o marcador */
}

/* Marcador de notificação não lida em página de perfil */
.not-mark-as-read-inline.notification-profile {
  position: relative; /* Posicionamento relativo */
  right: auto; /* Remove posicionamento à direita */
  bottom: auto; /* Remove posicionamento inferior */
  /* Ajusta o posicionamento do marcador quando usado em páginas de perfil */
}

/* 
 * ==========================================================
 * BOTÕES DE NAVEGAÇÃO DE TAREFAS
 * ==========================================================
 * Estilos para botões de navegação entre tarefas e outras páginas
 */

/* Botão de retorno da tarefa */
.back-to-from-task {
  float: right; /* Flutua à direita */
  margin-left: 10px; /* Margem esquerda */
  margin-top: 1px; /* Margem superior */
  font-size: 17px; /* Tamanho da fonte */
  /* Botão usado para retornar da visualização de tarefa para a página anterior */
}

/*
 * ==========================================================
 * INDICADOR DE CARREGAMENTO DO MENU DE CONFIGURAÇÕES
 * ==========================================================
 * Mostra um overlay semitransparente quando a página de Configurações está carregando
 * Exemplo no Perfex CRM: ao abrir Configurações » Empresa, este overlay aparece.
 */
.setup-menu-loading {
  position: absolute; /* Fica posicionado em relação ao container */
  top: 0; /* Alinha no topo do container */
  background: rgba(0, 0, 0, 0.2); /* Fundo escuro transparente */
  width: 100%; /* Cobre toda a largura do container */
  height: 100%; /* Cobre toda a altura do container */
  z-index: 99; /* Fica acima do conteúdo do menu */
  left: 0; /* Alinha na esquerda do container */
  text-align: center; /* Centraliza o conteúdo interno (ícone) */
  padding-top: 15px; /* Espaço no topo para o ícone */
}

/* Ícone dentro do overlay de carregamento (geralmente um spinner) */
.setup-menu-loading i {
  color: #fff; /* Ícone branco para bom contraste */
  /* Exemplo: o spinner (fa fa-spinner) exibido ao carregar as opções do menu */
}

/*
 * ==========================================================
 * AVISO DE TROCA DE SENHA DO COFRE (VAULT)
 * ==========================================================
 * Ajusta o espaçamento do aviso que informa alteração de senha do cofre
 * Exemplo no Perfex CRM: em Clientes » Senhas/Notas (Vault) ao alterar a senha
 */
.vault_password_change_notice {
  margin-top: -10px; /* Aproxima o aviso do elemento acima */
}

/*
 * ==========================================================
 * CABEÇALHO DE GRUPO NO PERFIL DO CLIENTE
 * ==========================================================
 * Título fixo que identifica grupos/seções no perfil do cliente
 * Exemplo no Perfex CRM: Clientes » Perfil » seção "Informações do Cliente"
 */
.customer-profile-group-heading {
  font-weight: 700; /* Texto em negrito para dar destaque */
  position: absolute; /* Posiciona o título sobre o conteúdo */
  color: #1e293b; /* Azul escuro para boa leitura */
  font-size: 1.125rem; /* Tamanho de fonte (18px aprox.) */
  line-height: 1.75rem; /* Altura de linha para respiro do texto */
  top: -48px; /* Move o título para cima do bloco */
  left: 0px; /* Alinha o título à esquerda */
}

/* Ajuste responsivo: aproxima o título em telas pequenas */
@media (max-width: 768px) {
  .customer-profile-group-heading {
    top: -40px; /* Menos espaço acima em dispositivos móveis */
  }
}

/*
 * ==========================================================
 * AJUSTES VISUAIS DO EDITOR TINYMCE
 * ==========================================================
 * Aparência dos containers e botões do editor de texto
 * Exemplo no Perfex CRM: qualquer campo com editor rico (ex: descrição de tarefa)
 */
.mce-container.mce-panel {
  padding-top: 0 !important; /* Remove espaço superior do painel */
  padding-bottom: 0 !important; /* Remove espaço inferior do painel */
  border-radius: 6px; /* Cantos levemente arredondados */
}

/* Tamanho da fonte dos botões da barra do TinyMCE */
.mce-btn button {
  font-size: 13px !important; /* Texto um pouco menor (forçado) */
}

/* Borda direita sutil na área de edição do editor simples */
.simple-editor .mce-container.mce-panel.mce-edit-area {
  border-right-width: 1px !important; /* Realça separação da área */
}

/* Espaçamento compacto na barra de ferramentas do editor simples */
.simple-editor .mce-toolbar-grp {
  padding-top: 2px !important; /* Menos espaço acima (forçado) */
  padding-bottom: 2px !important; /* Menos espaço abaixo (forçado) */
}

/*
 * ==========================================================
 * EXTRATO/RELATÓRIO FINANCEIRO
 * ==========================================================
 * Ajustes em rodapés e resumo de extratos de conta
 * Exemplo: Clientes » Extrato (Statement)
 */
.statement_tfoot td:last-child {
  border-left: 0; /* Remove borda esquerda da última célula */
}

.statement_tfoot td:first-child {
  border-right: 0; /* Remove borda direita da primeira célula */
}

.statement-account-summary tbody>tr>td {
  padding: 3px 6px; /* Espaçamento interno das células */
  border-top: 0; /* Remove borda superior entre linhas */
}

.statement-account-summary thead>tr>th {
  border: 0 !important; /* Remove borda dos cabeçalhos (forçado) */
}

/* Utilitário: aplica tamanho de fonte 14px */
.font-size-14 {
  font-size: 14px; /* Texto tamanho médio */
}

/* Espaçador vertical de 10px acima e abaixo */
.hr-10 {
  margin-top: 10px; /* Espaço superior */
  margin-bottom: 10px; /* Espaço inferior */
}

/*
 * ==========================================================
 * BUSCA AJAX (SELECT)
 * ==========================================================
 * Esconde o select original quando substituído por componente AJAX
 * Exemplo: selects com busca em Leads, Projetos etc.
 */
select.ajax-search {
  display: none; /* Oculta o elemento original */
}

/* Campo de tags (componente de múltiplas tags) */
.tagsinput,
input#tags {
  width: 100%; /* Ocupa toda a largura */
  opacity: 0; /* Invisível até plugin aplicar estilo */
  height: 31.56px; /* Altura base do campo */
}

/* Formularios com fundo transparente (consistência visual) */
#expense-form,
#new-post-form,
#project-expense-form {
  background-color: transparent; /* Remove fundo cinza padrão */
}

/* Título do popover (cabeçalho claro com linha inferior) */
.popover-title {
  background: #f9fafc; /* Fundo claro */
  border-bottom: 1px solid #e4e5e7; /* Linha separadora sutil */
  font-weight: 500; /* Negrito médio */
}

/* Remove espaço extra abaixo dos filtros na página de tarefas (desktop) */
@media (min-width: 769px) {
  .tasks-page ._filter_data {
    margin-bottom: 0 !important; /* Elimina espaço (forçado) */
  }
}

/* Textarea com editor-inline de tarefa (leve transparência) */
textarea[data-task-ae-editor="1"] {
  opacity: 0.7; /* Sutileza visual para indicar edição */
}

/*
 * ==========================================================
 * BARRA INFERIOR DE AÇÕES (FORMULÁRIOS LONGOS)
 * ==========================================================
 * Fixa ações (botões) no rodapé da tela para facilitar salvar/aplicar
 * Exemplo: formulários longos de tarefas, propostas, faturas
 */
.btn-bottom-toolbar {
  position: fixed; /* Fixa no rodapé da janela */
  bottom: 0; /* Encosta no fundo */
  left: 0; /* Alinha à esquerda */
  padding: 10px 30px; /* Espaçamento interno confortável */
  margin-left: 230px; /* Considera a largura da sidebar */
  box-shadow: 0 -4px 5px -3px rgb(0 0 0 / 10%); /* Sombra sutil superior */
  background: #fff; /* Fundo branco */
  width: calc(100% - 230px); /* Largura total menos sidebar */
  z-index: 5; /* Sobrepõe conteúdo, sem cobrir modais */
}

/* Em modais, a barra inferior e o empurrador não são exibidos */
.modal .btn-bottom-toolbar,
.modal .btn-bottom-pusher {
  display: none; /* Evita sobreposição em janelas modais */
}

/* Elemento espaçador para evitar que conteúdo fique sob a barra */
.btn-bottom-pusher {
  margin-top: 60px; /* Altura equivalente à barra fixa */
}

/* Quando a sidebar está oculta, a barra ocupa toda a largura */
body.hide-sidebar .btn-bottom-toolbar {
  width: 100%; /* Largura total */
  min-width: 100%; /* Garante largura total */
  margin-left: 0; /* Remove deslocamento da sidebar */
}

/* Ajuste RTL: compensa a sidebar do lado direito */
[dir="rtl"] .btn-bottom-toolbar {
  margin-left: 0; /* Zera margem esquerda */
  margin-right: 230px; /* Espaço para sidebar à direita */
}

/* Em telas pequenas, remove a margem da sidebar (menu recolhido) */
@media (max-width: 768px) {
  .btn-bottom-toolbar {
    margin-left: 0px; /* Sem deslocamento lateral */
  }
}

@media (max-width: 500px) {
  .btn-bottom-toolbar .btn-toolbar-notice {
    display: none; /* Esconde aviso para economizar espaço */
  }

  .btn-bottom-toolbar {
    padding-right: 6px; /* Menos espaçamento à direita */
    text-align: center; /* Centraliza botões */
  }

  .btn-bottom-toolbar .btn:first-child {
    margin-right: 10px; /* Espaço entre primeiros botões */
  }

  .btn-bottom-toolbar .btn-group .btn:first-child {
    margin-right: 0; /* Sem margem quando dentro de grupos */
  }

  .btn-bottom-toolbar .btn {
    text-align: center; /* Centraliza rótulos dos botões */
    margin-left: 5px !important; /* Espaço lateral (forçado) */
  }

  .btn-bottom-toolbar .btn-group .btn {
    margin-left: 0 !important; /* Evita duplo espaçamento */
  }

  [dir="rtl"] .btn-bottom-toolbar {
    margin-right: -36px !important; /* Ajuste fino em RTL */
  }

  [dir="rtl"] .btn-bottom-toolbar .btn:first-child {
    margin-right: 5px !important; /* Espaço antes do primeiro botão */
  }

  [dir="rtl"] .btn-bottom-toolbar .btn-group .btn:first-child {
    margin-right: 0 !important; /* Sem margem extra em grupos */
  }

  [dir="rtl"] .btn-bottom-toolbar .btn {
    margin-right: 5px !important; /* Espaço entre botões */
  }

  [dir="rtl"] .btn-bottom-toolbar .btn-group .btn {
    margin-right: 0 !important; /* Evita margem dupla */
  }
}

/* 
 * ==========================================================
 * ELEMENTOS DE TABELA E CHECKBOX
 * ==========================================================
 * Estilos para checkboxes em tabelas e informações de projeto
 */

/* Checkbox em linhas de tabela */
table tbody tr .checkbox {
  margin-top: 0; /* Remove margem superior padrão */
  /* Alinha checkboxes com o conteúdo da linha da tabela */
}

/* 
 * ==========================================================
 * INFORMAÇÕES DE PROJETO
 * ==========================================================
 * Estilos para área de informações de projeto
 */

/* Container de informações do projeto */
.project-info {
  margin-left: -20px; /* Margem esquerda negativa */
  margin-right: -15px; /* Margem direita negativa */
  margin-top: -10px; /* Margem superior negativa */
  padding: 8px 22px; /* Preenchimento interno */
  /* Expande o container de informações além dos limites do painel */
  /* Exemplo no Perfex CRM: área de informações na página de projeto */
}

/* 
 * ==========================================================
 * TEMPLATES DE CHECKLIST
 * ==========================================================
 * Estilos para gerenciamento de templates de checklist
 */

/* Botão para remover template de checklist */
.checklist-template-remove {
  position: absolute; /* Posicionamento absoluto */
  right: 5px; /* Distância da direita */
  top: 2px; /* Distância do topo */
  /* Botão X para remover template de checklist */
}

/* Container de templates de checklist em tarefa única */
.task-single-checklist-templates {
  margin-top: -12px; /* Margem superior negativa */
  /* Ajusta o espaçamento dos templates de checklist */
}

/* Botão para remover item de template de checklist */
.checklist-items-template-select .checklist-item-template-remove {
  position: absolute; /* Posicionamento absoluto */
  right: 17px; /* Distância da direita */
  top: 10px; /* Distância do topo */
  /* Botão para remover item específico do template */
}

/* Ajuste quando template está marcado */
.checklist-items-template-select.show-tick .checklist-item-template-remove {
  margin-right: 20px; /* Margem direita aumentada */
  margin-top: -2px; /* Margem superior ajustada */
  /* Reposiciona o botão quando checkbox está marcado */
}

/* 
 * ==========================================================
 * AJUSTES RTL PARA TAREFAS
 * ==========================================================
 * Estilos para layouts RTL (direita para esquerda) em tarefas
 */

/* Ícone de informação de tarefa em RTL */
[dir="rtl"] .task-info .task-info-icon {
  margin-left: 6px !important; /* Margem esquerda (forçada) */
  /* Ajusta posicionamento do ícone em layouts RTL */
}

/* Menu de tarefa única em RTL */
[dir="rtl"] .task-single-menu {
  left: 21px; /* Distância da esquerda */
  right: inherit; /* Remove posicionamento à direita */
  /* Inverte posicionamento do menu para RTL */
}

/* Nome de tarefa em tabela principal em RTL */
[dir="rtl"] .main-tasks-table-href-name {
  margin-left: 3px; /* Margem esquerda */
  margin-top: -2px; /* Margem superior ajustada */
  /* Ajusta espaçamento do nome da tarefa em RTL */
}

/* Tarefa relacionada em tabela em RTL */
[dir="rtl"] .task-table-related {
  margin-top: 5px; /* Margem superior */
  display: block; /* Exibe como bloco */
  /* Ajusta exibição de tarefas relacionadas em RTL */
}

/* Quebra de linha antes de tarefa relacionada em RTL */
[dir="rtl"] .task-table-related:before {
  content: "\a"; /* Caractere de quebra de linha */
  white-space: pre; /* Preserva espaços em branco */
  /* Adiciona quebra de linha antes do conteúdo em RTL */
}

/* 
 * ==========================================================
 * CHECKLISTS E INFORMAÇÕES
 * ==========================================================
 * Estilos para checklists e informações de itens
 */

/* Checklist sendo arrastado com posicionamento relativo */
.checklist.ui-sortable-helper.relative {
  position: inherit; /* Herda posicionamento do pai */
  /* Mantém posicionamento relativo durante arraste */
}

/* Informações do item de checklist */
.checklist-item-info {
  margin: 5px 0px 0px 0px; /* Margem superior */
  /* Espaçamento para informações adicionais do item */
}

/* Esconde informações de item em dispositivos móveis */
.mobile .checklist-item-info {
  display: none; /* Oculta elemento */
  /* Economiza espaço em telas pequenas */
}

/* 
 * ==========================================================
 * POPUPS DO SISTEMA
 * ==========================================================
 * Estilos para popups de sistema (manutenção, atualizações, etc.)
 */

/* Corpo da página quando popup de sistema está ativo */
body.system-popup {
  overflow: hidden; /* Esconde scroll da página */
  /* Previne scroll quando popup de sistema está aberto */
}

/* Container principal do popup de sistema */
.system-popup {
  position: fixed; /* Posicionamento fixo na tela */
  width: 100%; /* Largura total da tela */
  height: 100%; /* Altura total da tela */
  top: 0; /* Alinha no topo */
  left: 0; /* Alinha à esquerda */
  background: #f9fafb; /* Fundo cinza claro */
  z-index: 99999; /* Camada de empilhamento muito alta */
  text-align: center; /* Centraliza conteúdo */
  /* Overlay de tela cheia para popups de sistema */
  /* Exemplo no Perfex CRM: popup de manutenção ou atualização */
}

/* Wrapper do conteúdo do popup */
.system-popup .popup-wrapper {
  width: 60%; /* Largura de 60% da tela */
  margin: 0 auto; /* Centraliza horizontalmente */
  display: table; /* Fallback para navegadores antigos */
  height: 100%; /* Altura total */
  display: -webkit-box; /* Flexbox para WebKit */
  display: -ms-flexbox; /* Flexbox para IE */
  display: flex; /* Flexbox moderno */
  /* works with row or column */
  -webkit-box-orient: vertical; /* Orientação vertical para WebKit */
  -webkit-box-direction: normal; /* Direção normal para WebKit */
  -ms-flex-direction: column; /* Direção coluna para IE */
  flex-direction: column; /* Direção coluna */
  -webkit-box-align: center; /* Alinha ao centro para WebKit */
  -ms-flex-align: center; /* Alinha ao centro para IE */
  align-items: center; /* Alinha itens ao centro */
  -webkit-box-pack: center; /* Centraliza para WebKit */
  -ms-flex-pack: center; /* Centraliza para IE */
  justify-content: center; /* Centraliza conteúdo */
  /* Container flexível que centraliza o conteúdo verticalmente */
}

/* Conteúdo do popup de sistema */
.system-popup .popup-content {
  margin-top: 25px; /* Margem superior */
  width: 100%; /* Largura total */
  /* Container do conteúdo principal do popup */
}

/* Mensagem principal do popup */
.system-popup .popup-message {
  font-family: "Helvetica"; /* Fonte Helvetica */
  font-weight: 600; /* Peso da fonte semi-negrito */
  font-size: 38px; /* Tamanho grande da fonte */
  /* Mensagem principal exibida no popup de sistema */
}

/* Botão de fechar do popup */
.system-popup .system-popup-close {
  position: absolute; /* Posicionamento absoluto */
  width: 30px; /* Largura */
  height: 30px; /* Altura */
  overflow: hidden; /* Esconde conteúdo que transborda */
  top: 30px; /* Distância do topo */
  right: 150px; /* Distância da direita */
  background: none; /* Remove fundo */
  border: 0; /* Remove borda */
  opacity: 0.3; /* Opacidade baixa */
  outline: 0; /* Remove contorno */
  /* Botão X para fechar o popup de sistema */
}

/* Estados hover para botão de fechar */
.system-popup .system-popup-close:hover::before,
.system-popup .system-popup-close:hover::after {
  background: #000; /* Fundo preto */
  opacity: 1; /* Opacidade total */
  /* Destaca o botão ao passar o mouse */
}

/* Pseudo-elementos para criar o X */
.system-popup .system-popup-close::before,
.system-popup .system-popup-close::after {
  content: ""; /* Conteúdo vazio */
  position: absolute; /* Posicionamento absoluto */
  height: 3px; /* Altura da linha */
  width: 100%; /* Largura total */
  top: 50%; /* Posição vertical central */
  left: 0; /* Alinha à esquerda */
  margin-top: -1px; /* Ajuste fino vertical */
  background: #000; /* Cor preta */
  /* Cria as duas linhas que formam o X */
}

/* Primeira linha do X (diagonal positiva) */
.system-popup .system-popup-close::before {
  -webkit-transform: rotate(45deg); /* Rotação para WebKit */
  transform: rotate(45deg); /* Rotação de 45 graus */
  /* Linha diagonal positiva do X */
}

/* Segunda linha do X (diagonal negativa) */
.system-popup .system-popup-close::after {
  -webkit-transform: rotate(-45deg); /* Rotação negativa para WebKit */
  transform: rotate(-45deg); /* Rotação de -45 graus */
  /* Linha diagonal negativa do X */
}

/* Ajustes responsivos para popup de sistema */
@media (max-width: 768px) {
  /* Wrapper do popup em dispositivos móveis */
  .system-popup .popup-wrapper {
    width: 100%; /* Largura total em mobile */
  }

  /* Mensagem do popup em mobile */
  .system-popup .popup-message {
    font-size: 18px; /* Tamanho menor da fonte */
    max-width: 100%; /* Largura máxima total */
  }

  /* Botão de fechar em mobile */
  .system-popup .close {
    right: auto; /* Remove posicionamento à direita */
  }
}

/* 
 * ==========================================================
 * NAVEGAÇÃO E DASHBOARD
 * ==========================================================
 * Estilos para navegação e elementos do dashboard
 */

/* Estados de navegação à direita quando aberta */
.nav.navbar-right .open>a,
.nav.navbar-right .open>a:focus,
.nav.navbar-right .open>a:hover {
  border-color: #535f6d; /* Cor da borda */
  /* Destaca item de menu quando dropdown está aberto */
}

/* Metas no dashboard */
.dashboard .goal {
  padding-bottom: 25px; /* Preenchimento inferior */
  margin-top: 25px; /* Margem superior */
  /* Espaçamento para cards de metas no dashboard */
  /* Exemplo no Perfex CRM: cards de metas na página inicial */
}

/* Primeira meta no dashboard */
.dashboard .goal:first-child {
  margin-top: 0; /* Remove margem superior */
  /* Remove margem da primeira meta para alinhamento */
}

/* Remove sombra de elementos */
.no-shadow {
  -webkit-box-shadow: none; /* Remove sombra para WebKit */
  box-shadow: none; /* Remove sombra */
  /* Classe utilitária para remover sombras */
}

/* Primeiro painel em coluna kanban */
.kan-ban-col-wrapper .panel_s:first-child {
  /* -webkit-box-shadow: none;
    box-shadow: none; */
  /* Comentado: remove sombra do primeiro painel kanban */
}

/* Containers com atributo data-container */
div[data-container] {
  min-height: 20px; /* Altura mínima */
  min-width: 20px; /* Largura mínima */
  /* Define tamanho mínimo para containers dinâmicos */
}

/* 
 * ==========================================================
 * WIDGETS DO DASHBOARD
 * ==========================================================
 * Estilos para widgets arrastáveis do dashboard
 */

/* Esconde widgets na pré-visualização */
.preview-widgets .widget {
  display: none; /* Oculta elementos */
  /* Esconde widgets durante pré-visualização do dashboard */
}

/* Espaço reservado para widgets do dashboard */
.placeholder-dashboard-widgets {
  border: 2px dashed #b9b9b9; /* Borda tracejada cinza */
  margin-bottom: 25px; /* Margem inferior */
  min-height: 130px; /* Altura mínima */
  /* Área reservada onde widgets podem ser arrastados */
  /* Exemplo no Perfex CRM: área de drop para widgets no dashboard */
}

/* Ícone do arrastador de widget */
.widget-dragger:before {
  content: "\f58e"; /* Código do ícone Font Awesome */
  font-family: "Font Awesome 6 Free"; /* Fonte dos ícones */
  -moz-osx-font-smoothing: grayscale; /* Suavização para macOS */
  -webkit-font-smoothing: antialiased; /* Suavização para WebKit */
  display: var(--fa-display, inline-block); /* Exibição inline-block */
  font-style: normal; /* Estilo normal */
  font-variant: normal; /* Variante normal */
  line-height: 1; /* Altura da linha */
  text-rendering: auto; /* Renderização automática */
  font-weight: 900; /* Peso da fonte negrito */
  /* Configuração do ícone de arrastar (grip) */
}

/* Elemento arrastador de widget */
.widget-dragger {
  position: absolute; /* Posicionamento absoluto */
  top: 15px; /* Distância do topo */
  left: -15px; /* Distância da esquerda (negativa) */
  color: #cbd5e1; /* Cor cinza claro */
  cursor: move; /* Cursor de mover */
  z-index: 2; /* Camada de empilhamento */
  /* Handle para arrastar widgets do dashboard */
}

/* Estados hover e active do arrastador */
.widget-dragger:hover,
.widget-dragger:active {
  color: #94a3b8; /* Cor mais escura ao interagir */
  /* Destaca o arrastador ao passar o mouse ou clicar */
}

/* Esconde arrastador em dispositivos móveis */
.mobile .widget-dragger {
  display: none; /* Oculta elemento */
  /* Remove funcionalidade de arrastar em mobile */
}

/* 
 * ==========================================================
 * OPÇÕES DE TELA
 * ==========================================================
 * Estilos para área de opções de tela e botão de alternância
 */

/* Área de opções de tela */
.screen-options-area {
  background: #f9fafb; /* Fundo cinza claro */
  padding: 10px 30px 10px 30px; /* Preenchimento interno */
  border-bottom: 1px solid #e5e7eb; /* Borda inferior */
  display: none; /* Oculta por padrão */
  /* Área que contém opções de personalização da tela */
  /* Exemplo no Perfex CRM: opções de colunas em tabelas */
}

/* Botão para mostrar/ocultar opções de tela */
.screen-options-btn {
  position: absolute; /* Posicionamento absoluto */
  background: #e5e7eb; /* Fundo cinza */
  color: #111827; /* Cor do texto escura */
  padding: 5px 15px; /* Preenchimento interno */
  display: inline-flex; /* Exibição flexível inline */
  align-items: center; /* Alinha itens ao centro */
  right: 31px; /* Distância da direita */
  z-index: 98; /* Camada de empilhamento */
  border-left: 1px solid #e5e7eb; /* Borda esquerda */
  border-right: 1px solid #e5e7eb; /* Borda direita */
  border-bottom: 1px solid #e5e7eb; /* Borda inferior */
  border-bottom-left-radius: 6px; /* Raio do canto inferior esquerdo */
  border-bottom-right-radius: 6px; /* Raio do canto inferior direito */
  cursor: pointer; /* Cursor de ponteiro */
  font-size: 13px; /* Tamanho da fonte */
  font-weight: 500; /* Peso da fonte médio */
  /* Botão que alterna a exibição das opções de tela */
}

/* Ajuste RTL para botão de opções de tela */
[dir="rtl"] .screen-options-btn {
  right: auto; /* Remove posicionamento à direita */
  left: 31px; /* Distância da esquerda */
  /* Inverte posicionamento para layouts RTL */
}

/* 
 * ==========================================================
 * PAINÉIS DE PROJETO
 * ==========================================================
 * Estilos para painéis de estimativas, faturas e propostas
 */

/* Painéis de estimativas, faturas e propostas de projeto */
.project_estimates .panel_s,
.project_invoices .panel_s,
.project_proposals .panel_s {
  box-shadow: none !important; /* Remove sombra (forçado) */
  border: 0; /* Remove borda */
  /* Remove estilos visuais padrão dos painéis de projeto */
  /* Exemplo no Perfex CRM: painéis na página de projeto */
}

/* Texto com ação (clicável) */
.text-has-action {
  border-bottom: 1px dashed #e5e7eb; /* Borda inferior tracejada */
  padding-bottom: 2px; /* Preenchimento inferior */
  /* Indica visualmente que o texto é clicável */
}

/* 
 * ==========================================================
 * ELEMENTOS DE TAREFA E FORMULÁRIOS
 * ==========================================================
 * Estilos para campos de edição inline e elementos de formulário
 */

/* Campo de entrada para edição inline de informações de tarefa */
.task-info-inline-input-edit {
  margin-top: -1px; /* Margem superior negativa */
  background: #f8fafc; /* Fundo cinza muito claro */
  border: 0; /* Remove borda */
  outline: 0; /* Remove contorno */
  box-shadow: none; /* Remove sombra */
  border-bottom: 1px dashed #e2e8f0; /* Borda inferior tracejada */
  width: 100%; /* Largura total */
  /* Campo de texto para edição inline de informações de tarefa */
  /* Exemplo no Perfex CRM: edição inline de nome de tarefa */
}

/* Tags em linha de tabela */
.tags-in-table-row {
  width: 100%; /* Largura total */
  margin-top: 5px; /* Margem superior */
  /* Container para tags exibidas em linhas de tabela */
}

/* Esconde labels de campos personalizados (exceto checkboxes) */
td.custom_field label:not(.cf-chk-label) {
  display: none; /* Oculta elemento */
  /* Remove labels de campos personalizados em tabelas */
}

/* 
 * ==========================================================
 * ALINHAMENTO DE TABELAS
 * ==========================================================
 * Estilos para alinhamento de células de tabela
 */

/* Alinhamento à esquerda */
th[align="left"],
td[align="left"] {
  text-align: left; /* Alinha texto à esquerda */
  /* Força alinhamento à esquerda para células com atributo align="left" */
}

/* Alinhamento à direita */
th[align="right"],
td[align="right"] {
  text-align: right; /* Alinha texto à direita */
  /* Força alinhamento à direita para células com atributo align="right" */
}

/* Alinhamento central */
th[align="center"],
td[align="center"] {
  text-align: center !important; /* Alinha texto ao centro (forçado) */
  /* Força alinhamento central para células com atributo align="center" */
}

/* Ajustes RTL para alinhamento à esquerda */
[dir="rtl"] th[align="left"],
[dir="rtl"] td[align="left"] {
  text-align: right !important; /* Alinha à direita em RTL (forçado) */
  /* Inverte alinhamento à esquerda para layouts RTL */
}

/* Ajustes RTL para alinhamento à direita */
[dir="rtl"] th[align="right"],
[dir="rtl"] td[align="right"] {
  text-align: left !important; /* Alinha à esquerda em RTL (forçado) */
  /* Inverte alinhamento à direita para layouts RTL */
}

/* 
 * ==========================================================
 * ELFINDER E GERENCIADOR DE ARQUIVOS
 * ==========================================================
 * Estilos para o gerenciador de arquivos Elfinder
 */

/* Ícones da barra de título do visualizador rápido */
.elfinder-quicklook-titlebar .ui-icon-circle-close,
.elfinder-quicklook .ui-icon-gripsmall-diagonal-se {
  z-index: 99; /* Camada de empilhamento alta */
  /* Garante que ícones do Elfinder fiquem visíveis */
}

/* Botões do diálogo de upload do Elfinder */
.elfinder-upload-dialog-wrapper .ui-button {
  padding: 6px !important; /* Preenchimento interno (forçado) */
  margin-left: 5px !important; /* Margem esquerda (forçada) */
  margin-right: 5px !important; /* Margem direita (forçada) */
  /* Estiliza botões do diálogo de upload do gerenciador de arquivos */
}
}

/* 
 * ==========================================================
 * COMENTÁRIOS DE TAREFAS E EDITORES
 * ==========================================================
 * Estilos para comentários de tarefas e editores
 */

/* Container do editor TinyMCE em comentários de tarefas */
.tasks-comments .mce-container.mce-panel {
  -webkit-box-shadow: none; /* Remove sombra para WebKit */
  box-shadow: none; /* Remove sombra */
  /* Remove sombra do editor em comentários de tarefas */
}

/* Botão adjacente a select em wrapper de seleção */
.items-select-wrapper>._select_input_group select+button {
  border-top-right-radius: 0; /* Remove raio do canto superior direito */
  border-bottom-right-radius: 0; /* Remove raio do canto inferior direito */
  /* Remove cantos arredondados do lado direito para conectar com select */
}

/* Arrastador de assinatura desabilitado */
.subscription .dragger {
  background: none; /* Remove fundo */
  pointer-events: none; /* Desabilita eventos de ponteiro */
  /* Desabilita funcionalidade de arrastar em assinaturas */
}

/* 
 * ==========================================================
 * ZONA DE UPLOAD E ANEXOS DE COMENTÁRIOS
 * ==========================================================
 * Estilos para upload de arquivos em comentários
 */

/* Zona de upload para comentários de tarefa */
.task-comment-dropzone {
  min-height: 120px; /* Altura mínima */
  max-height: 120px; /* Altura máxima */
  padding: 50px; /* Preenchimento interno */
  margin-top: 10px !important; /* Margem superior (forçada) */
  margin-bottom: 10px !important; /* Margem inferior (forçada) */
  /* Área de drop para upload de arquivos em comentários */
  /* Exemplo no Perfex CRM: upload de anexos em comentários de tarefa */
}

/* Wrapper de anexo em comentário de tarefa */
.task-comment .task-attachment-wrapper {
  margin-left: 0; /* Remove margem esquerda */
  /* Remove margem padrão do wrapper de anexo */
}

/* Coluna de anexo em comentário */
.task-comment .task-attachment-col {
  margin-left: 0; /* Remove margem esquerda */
  padding-left: 0; /* Remove preenchimento esquerdo */
  /* Remove espaçamento padrão da coluna de anexo */
}

/* Primeira e segunda colunas de anexo */
.task-comment .task-attachment-col[data-num="1"],
.task-comment .task-attachment-col[data-num="2"] {
  margin-top: 15px; /* Margem superior */
  /* Espaçamento para primeira e segunda colunas de anexo */
}

/* Coluna "mais anexos" sempre visível */
.task-comment .task-attachment-col-more {
  display: block !important; /* Exibe como bloco (forçado) */
  /* Garante que coluna "mais" seja sempre visível */
}

/* Esconde usuário do anexo em comentários */
.task-comment .task-attachment-wrapper .task-attachment-user {
  display: none; /* Oculta elemento */
  /* Remove informação do usuário em anexos de comentários */
}

/* Anexo em comentário de tarefa */
.task-comment .task-attachment {
  max-height: 135px; /* Altura máxima */
  min-height: 135px; /* Altura mínima */
  padding: 5px; /* Preenchimento interno */
  /* Define altura fixa para anexos em comentários */
}

/* 
 * ==========================================================
 * GDPR E CONSENTIMENTO
 * ==========================================================
 * Estilos para elementos relacionados ao GDPR
 */

/* Container de propósito GDPR */
.gdpr-purpose {
  border: 1px solid #d8d8d8; /* Borda cinza */
  padding: 15px; /* Preenchimento interno */
  margin-bottom: 10px; /* Margem inferior */
  border-radius: 8px; /* Cantos arredondados */
  /* Container para informações de propósito GDPR */
  /* Exemplo no Perfex CRM: formulários de consentimento */
}

/* Cabeçalho do propósito GDPR */
.gdpr-purpose .gdpr-purpose-heading {
  margin-top: 0; /* Remove margem superior */
  margin-bottom: 0; /* Remove margem inferior */
  font-size: 16px; /* Tamanho da fonte */
  font-weight: 500; /* Peso da fonte médio */
  color: #5a5a5a; /* Cor cinza */
  /* Título do propósito GDPR */
}

/* Coluna de consentimento em tabela */
#th-consent {
  min-width: 150px; /* Largura mínima */
  /* Define largura mínima para coluna de consentimento */
}

/* 
 * ==========================================================
 * CORPO DE MÍDIA E EDITORES
 * ==========================================================
 * Estilos para páginas de mídia e editores
 */

/* Corpo da página quando em modo mídia */
body.media {
  margin-top: 0px !important; /* Remove margem superior (forçada) */
  overflow: inherit; /* Herda overflow do pai */
  zoom: initial; /* Zoom inicial */
  /* Ajustes para páginas de mídia */
}

/* Barra de ferramentas mobile do TinyMCE */
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
  background: #2563eb !important; /* Fundo azul (forçado) */
  /* Estiliza grupos de ferramentas do editor mobile */
}

/* Estados hover e focus da barra de menu do TinyMCE */
.mce-menubar .mce-menubtn:hover,
.mce-menubar .mce-menubtn.mce-active,
.mce-menubar .mce-menubtn:focus {
  border-radius: 8px; /* Cantos arredondados */
  /* Estiliza botões da barra de menu do editor */
}

/* Ajuste RTL para grupo de seleção */
[dir="rtl"] .input-group-select .inner.open {
  overflow-y: initial !important; /* Overflow vertical inicial (forçado) */
  /* Corrige overflow em layouts RTL */
}

/* Ajuste RTL para caixa de busca */
[dir="rtl"] .bs-searchbox input {
  margin-bottom: 10px; /* Margem inferior */
  /* Ajusta espaçamento de input em RTL */
}

/* 
 * ==========================================================
 * SELETOR DE CORES
 * ==========================================================
 * Estilos para o seletor de cores (gpicker)
 */

/* Seletor de cores oculto */
.gpicker {
  opacity: 0; /* Opacidade zero (invisível) */
  /* Esconde o seletor de cores por padrão */
}

/* Estilos do seletor de cores */
.gpicker {
  height: 14px; /* Altura */
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Fonte */
  font-size: 11px; /* Tamanho da fonte */
  color: #4c4c4c; /* Cor do texto */
  text-decoration: none; /* Remove decoração do texto */
  padding: 1px 7px 5px 3px; /* Preenchimento interno */
  border: 1px solid #ebebeb; /* Borda cinza claro */
  border-radius: 2px; /* Cantos levemente arredondados */
  border-bottom-color: #d4d4d4; /* Cor da borda inferior */
  background: #fcfcfc; /* Fundo branco */
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#fcfcfc),
      to(#f5f5f5)); /* Gradiente para WebKit */
  background: linear-gradient(to bottom, #fcfcfc 0%, #f5f5f5 100%); /* Gradiente moderno */
  /* Estiliza o seletor de cores quando visível */
}
/* Propriedades adicionais do seletor de cores */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f5f5f5', GradientType=0); /* Gradiente para IE */
  line-height: 18px !important; /* Altura da linha (forçada) */
  text-decoration: none !important; /* Remove decoração (forçada) */
  box-sizing: content-box !important; /* Modelo de caixa (forçado) */
  -webkit-box-sizing: content-box !important; /* Modelo de caixa para WebKit (forçado) */
  -moz-box-sizing: content-box !important; /* Modelo de caixa para Firefox (forçado) */
  /* Propriedades adicionais do seletor de cores */
}

/* 
 * ==========================================================
 * ELEMENTOS DIVERSOS
 * ==========================================================
 * Estilos para elementos diversos do sistema
 */

/* Informações do submissor de ticket */
.ticket-submitter-info {
  word-wrap: break-word; /* Quebra palavras longas */
  /* Permite quebra de palavras em informações de ticket */
}

/* Badge do menu */
.menu-badge {
  margin-left: 7px; /* Margem esquerda */
  /* Espaçamento para badges em menus */
}

/* Texto "leia mais" */
.read-more {
  overflow: hidden; /* Esconde conteúdo que transborda */
  max-height: 150px; /* Altura máxima */
  /* Limita altura do texto com opção de expandir */
}

/* Notificações do TinyMCE */
.mce-notification {
  z-index: 99999 !important; /* Camada de empilhamento muito alta (forçada) */
  /* Garante que notificações do editor fiquem visíveis */
}

/* Listas no conteúdo do TinyMCE */
.mce-content-body.tc-content ul,
.mce-content-body.tc-content ol {
  line-height: 18px; /* Altura da linha */
  /* Espaçamento para listas no editor */
}

/* Autocompletar do editor de texto rico */
.rte-autocomplete {
  z-index: 999999 !important; /* Camada de empilhamento muito alta (forçada) */
  /* Garante que sugestões de autocompletar fiquem visíveis */
}

/* Item de carregamento no autocompletar */
.rte-autocomplete>li.loading {
  background: none !important; /* Remove fundo (forçado) */
  height: 16px; /* Altura fixa */
  /* Estiliza item de carregamento no autocompletar */
}

/* Menção em texto */
span.mention {
  background-color: #eeeeee; /* Fundo cinza claro */
  padding: 3px; /* Preenchimento interno */
  /* Destaca menções de usuários em texto */
  /* Exemplo no Perfex CRM: @usuario em comentários */
}

/* Barra de ferramentas do calendário FullCalendar */
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
  -ms-flex-wrap: wrap; /* Quebra de linha para IE */
  flex-wrap: wrap; /* Permite quebra de linha */
  /* Permite quebra de linha na barra de ferramentas do calendário */
}

/* Chunk da barra de ferramentas */
.fc-toolbar-chunk {
  margin: 5px 0px; /* Margem vertical */
  /* Espaçamento para elementos da barra de ferramentas */
}

/* Visualização do calendário em widgets */
#widget-calendar .fc-view,
.calendar .fc-view {
  overflow: hidden; /* Esconde conteúdo que transborda */
  /* Remove scroll do calendário */
}

/* 
 * ==========================================================
 * NOTIFICAÇÕES
 * ==========================================================
 * Estilos para sistema de notificações
 */

/* Data da notificação */
.notification-wrapper .notification-date {
  color: #6b7280; /* Cor cinza */
  /* Cor para data das notificações */
}

/* Notificação não lida */
.notification-wrapper .unread-notification {
  background: #eff6ff; /* Fundo azul claro */
  color: #2563eb; /* Cor azul */
  font-weight: 500 !important; /* Peso da fonte médio (forçado) */
  /* Destaca notificações não lidas */
  /* Exemplo no Perfex CRM: notificações no menu superior */
}

/* Data de notificação não lida */
.notification-wrapper .unread-notification .notification-date {
  color: #1e40af; /* Cor azul escura */
  font-weight: 500 !important; /* Peso da fonte médio (forçado) */
  /* Destaca data de notificações não lidas */
}

/* Estado hover para notificação não lida */
.notification-wrapper .unread-notification:hover {
  background: #dbeafe; /* Fundo azul mais claro */
  color: #2563eb; /* Cor azul */
  /* Efeito hover para notificações não lidas */
}

/* 
 * ==========================================================
 * ELEMENTOS EDITÁVEIS E SELETORES
 * ==========================================================
 * Estilos para elementos editáveis e seletores
 */

/* Remove contorno de elementos editáveis quando focados */
div[contenteditable]:focus {
  outline: none; /* Remove contorno */
  /* Remove contorno padrão de elementos editáveis */
}

/* Seletor de ação de tarefa */
.bootstrap-select.task-action-select .btn-default,
.bootstrap-select.task-action-select.btn-default:active,
.bootstrap-select.task-action-select>.btn-default:hover,
.bootstrap-select.task-action-select.btn-default.active,
.bootstrap-select.task-action-select.open>.dropdown-toggle.btn-default {
  color: #64748b !important; /* Cor cinza (forçada) */
  font-size: 13.5px; /* Tamanho da fonte */
  margin-bottom: 0; /* Remove margem inferior */
  margin-top: 0; /* Remove margem superior */
  box-shadow: none; /* Remove sombra */
  /* Estiliza botão do seletor de ação de tarefa */
}

/* Estado hover do seletor de ação */
.bootstrap-select.task-action-select>.btn-default:hover {
  color: #1e293b !important; /* Cor escura (forçada) */
  /* Cor mais escura ao passar o mouse */
}

/* Campo inline novo */
.inline-field-new {
  color: #64748b; /* Cor cinza */
  /* Cor para campos inline novos */
}

/* Estados hover e active do campo inline */
.inline-field-new:hover,
.inline-field-new:active {
  color: #334155; /* Cor mais escura */
  /* Cor mais escura ao interagir */
}

/* 
 * ==========================================================
 * TABELAS COM ÍNDICES NUMÉRICOS
 * ==========================================================
 * Estilos para tabelas com colunas numeradas
 */

/* Ajustes para telas médias e grandes */
@media (min-width: 768px) {

  /* Primeira coluna de tabela com índice 1 */
  table.number-index-1 thead>tr>th:nth-child(1),
  table.number-index-1 tbody>tr>td:nth-child(1) {
    text-align: center; /* Centraliza texto */
    /* Centraliza primeira coluna de tabelas numeradas */
  }

  /* Segunda coluna de tabela com índice 2 */
  table.number-index-2 thead>tr>th:nth-child(2),
  table.number-index-2 tbody>tr>td:nth-child(2) {
    text-align: center; /* Centraliza texto */
    /* Centraliza segunda coluna de tabelas numeradas */
  }

  /* Preenchimento da segunda coluna */
  table.number-index-2 tbody>tr>td:nth-child(2) {
    padding-right: 30px; /* Preenchimento direito */
    /* Espaçamento adicional para segunda coluna */
  }
}

/* 
 * ==========================================================
 * AJUSTES FINAIS E RTL
 * ==========================================================
 * Estilos finais e ajustes para RTL
 */

/* Cabeçalho e wrapper em dispositivos móveis */
.mobile #header,
.mobile #wrapper {
  margin-left: 0; /* Remove margem esquerda */
  /* Remove margens em dispositivos móveis */
}

/* Ajustes RTL para menu mobile em dispositivos pequenos */
@media (max-width: 768px) {
  [dir="rtl"] ul.mobile-icon-menu .dropdown-menu {
    left: 0; /* Posiciona à esquerda */
    right: auto; /* Remove posicionamento à direita */
    /* Ajusta posicionamento de dropdown em RTL mobile */
  }
}

/* Setas dos menus em RTL */
[dir="rtl"] #side-menu .arrow,
[dir="rtl"] #setup-menu .arrow {
  margin-left: 10px; /* Margem esquerda */
  /* Ajusta posicionamento das setas em layouts RTL */
}

/* Wrapper principal em RTL */
[dir="rtl"] #wrapper {
  margin-left: 0; /* Remove margem esquerda */
  margin-right: 230px; /* Margem direita para sidebar */
  /* Ajusta posicionamento do wrapper principal em RTL */
}

/* Sidebar em RTL */
[dir="rtl"] .sidebar {
  right: 0; /* Posiciona à direita */
  left: auto; /* Remove posicionamento à esquerda */
  /* Inverte posicionamento da sidebar para RTL */
}

/* Sidebar oculta em RTL */
[dir="rtl"] body.hide-sidebar:not(.show-sidebar) .sidebar {
  margin-left: auto; /* Margem esquerda automática */
  margin-right: -230px; /* Margem direita negativa */
  /* Esconde sidebar movendo para fora da tela em RTL */
}

/* Wrapper e header quando sidebar oculta em RTL */
[dir="rtl"] body.hide-sidebar:not(.show-sidebar) #wrapper,
[dir="rtl"] body.hide-sidebar:not(.show-sidebar) #header {
  margin-left: auto; /* Margem esquerda automática */
  margin-right: 0; /* Remove margem direita */
  /* Ajusta wrapper e header quando sidebar está oculta em RTL */
}

/* Sidebar pequena em RTL */
[dir="rtl"] body.page-small .sidebar {
  margin-left: auto; /* Margem esquerda automática */
  margin-right: -230px; /* Margem direita negativa */
  /* Esconde sidebar pequena em RTL */
}

/* Wrapper pequeno em RTL */
[dir="rtl"] body.page-small #wrapper {
  margin-left: 0; /* Remove margem esquerda */
  margin-right: 0; /* Remove margem direita */
  /* Remove margens do wrapper pequeno em RTL */
}

/* Sidebar pequena visível em RTL */
[dir="rtl"] body.page-small.show-sidebar .sidebar,
[dir="rtl"] body.page-small.show-sidebar #header {
  margin-left: auto; /* Margem esquerda automática */
  margin-right: 0; /* Remove margem direita */
  /* Mostra sidebar pequena em RTL */
}

/* Wrapper pequeno com sidebar visível em RTL */
[dir="rtl"] body.page-small.show-sidebar #wrapper {
  margin-left: auto; /* Margem esquerda automática */
  margin-right: 230px; /* Margem direita para sidebar */
  /* Adiciona margem para sidebar pequena visível em RTL */
}

/* 
 * ==========================================================
 * DESCRIÇÃO DE TAREFA E ELEMENTOS FINAIS
 * ==========================================================
 * Estilos finais para descrição de tarefa e outros elementos
 */

/* Corpo da descrição de tarefa no editor */
#task_view_description.mce-content-body {
  background: #f8fafc; /* Fundo cinza muito claro */
  padding: 8px; /* Preenchimento interno */
  border-radius: 4px; /* Cantos levemente arredondados */
  /* Estiliza área de descrição de tarefa no editor TinyMCE */
  /* Exemplo no Perfex CRM: campo de descrição ao criar/editar tarefa */
}

/* Ícone chevron moderno */
.chevron::before {
  content: ''; /* Conteúdo vazio */
  display: inherit; /* Herda display do elemento pai */
  width: 0.9rem; /* Largura */
  height: 0.9rem; /* Altura */
  background: currentColor; /* Usa cor atual do texto */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" /></svg>') no-repeat; /* Máscara SVG para WebKit */
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" /></svg>') no-repeat; /* Máscara SVG moderna */
  /* Cria ícone de seta para baixo usando SVG como máscara */
  /* Exemplo no Perfex CRM: setas em dropdowns e menus expansíveis */
}

/* Coluna direita de ticket */
.ticket-right-column {
  width: 100%; /* Largura total */
  width: -moz-available; /* Largura disponível para Firefox */
  width: -webkit-fill-available; /* Largura disponível para WebKit */
  width: fill-available; /* Largura disponível padrão */
  /* Garante que coluna direita ocupe toda largura disponível */
  /* Exemplo no Perfex CRM: coluna direita na página de tickets */
}