/*
 * Perfex CRM - Custom CSS
 *
 * Este arquivo é carregado automaticamente pelo sistema
 * após o style.css principal (assets_helper.php).
 *
 * Ative ou desative o dark mode comentando/descomentando
 * a linha abaixo.
 */
@import url('/assets/css/dark-mode.css?v=20260311-01');

/* =========================================================
   Chat Widget (Support Board) - Theme override
   Regras: apenas CSS, sem alterar JS/HTML
   ========================================================= */

/* Modo claro (padrão) */
.sb-chat .sb-body {
	background: #ffffff !important;
	border: 1px solid #d0d0d0 !important;
}

.sb-chat .sb-scroll-area {
	background: #f7f7f7 !important;
}

.sb-chat .sb-scroll-area .sb-header {
	background: #1F7A83 !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 1px rgba(31, 122, 131, 0.15) !important;
}

.sb-chat .sb-scroll-area .sb-header,
.sb-chat .sb-scroll-area .sb-header .sb-title,
.sb-chat .sb-scroll-area .sb-header .sb-title *,
.sb-chat .sb-scroll-area .sb-header .sb-text,
.sb-chat .sb-scroll-area .sb-header p,
.sb-chat .sb-scroll-area .sb-header span,
.sb-chat .sb-scroll-area .sb-header div {
	color: #FFFFFF !important;
}

.sb-chat .sb-header-hide + .sb-scroll-area {
	border-top: 1px solid #d0d0d0 !important;
}

.sb-chat .sb-editor {
	background: #ffffff !important;
	border-top: 1px solid #d0d0d0 !important;
}

.sb-chat .sb-editor textarea {
	color: #000000 !important;
}

.sb-chat .sb-editor textarea::placeholder {
	color: #777777 !important;
}

.sb-chat .sb-body,
.sb-chat .sb-body .sb-title,
.sb-chat .sb-body .sb-text,
.sb-chat .sb-body p,
.sb-chat .sb-body span,
.sb-chat .sb-body label,
.sb-chat .sb-body li,
.sb-chat .sb-body .sb-rich-message .sb-text {
	color: #000000 !important;
}

.sb-chat-btn {
	background: #1F7A83 !important;
	background-color: #1F7A83 !important;
	color: #FFFFFF !important;
	border: 1px solid #17636A !important;
}

.sb-chat-btn:hover,
.sb-chat-btn:focus,
.sb-chat-btn:active {
	background: #17636A !important;
	background-color: #17636A !important;
	color: #FFFFFF !important;
	border: 1px solid #0F4D56 !important;
}

.sb-chat-btn i,
.sb-chat-btn [class*="sb-icon"],
.sb-chat-btn [class^="sb-icon"] {
	color: #FFFFFF !important;
}

/* Modo escuro */
body.dark-mode .sb-chat .sb-body {
	background: #1F1F1F !important;
	border: 1px solid #444444 !important;
}

body.dark-mode .sb-chat .sb-scroll-area {
	background: #1F1F1F !important;
}

body.dark-mode .sb-chat .sb-scroll-area .sb-header {
	background: #1F7A83 !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 8px rgba(31, 122, 131, 0.3) !important;
}

body.dark-mode .sb-chat .sb-scroll-area .sb-header,
body.dark-mode .sb-chat .sb-scroll-area .sb-header .sb-title,
body.dark-mode .sb-chat .sb-scroll-area .sb-header .sb-title *,
body.dark-mode .sb-chat .sb-scroll-area .sb-header .sb-text,
body.dark-mode .sb-chat .sb-scroll-area .sb-header p,
body.dark-mode .sb-chat .sb-scroll-area .sb-header span,
body.dark-mode .sb-chat .sb-scroll-area .sb-header div {
	color: #FFFFFF !important;
}

body.dark-mode .sb-chat .sb-header-hide + .sb-scroll-area {
	border-top: 1px solid #444444 !important;
}

body.dark-mode .sb-chat .sb-editor {
	background: #333333 !important;
	border-top: 1px solid #444444 !important;
}

body.dark-mode .sb-chat .sb-editor textarea {
	color: #EAEAEA !important;
}

body.dark-mode .sb-chat .sb-editor textarea::placeholder {
	color: #b8b8b8 !important;
}

body.dark-mode .sb-chat .sb-body,
body.dark-mode .sb-chat .sb-body .sb-title,
body.dark-mode .sb-chat .sb-body .sb-text,
body.dark-mode .sb-chat .sb-body p,
body.dark-mode .sb-chat .sb-body span,
body.dark-mode .sb-chat .sb-body label,
body.dark-mode .sb-chat .sb-body li,
body.dark-mode .sb-chat .sb-body .sb-rich-message .sb-text {
	color: #EAEAEA !important;
}

body.dark-mode .sb-chat-btn {
	background: #1F7A83 !important;
	background-color: #1F7A83 !important;
	color: #FFFFFF !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(31, 122, 131, 0.4) !important;
}

body.dark-mode .sb-chat-btn:hover,
body.dark-mode .sb-chat-btn:focus,
body.dark-mode .sb-chat-btn:active {
	background: #17636A !important;
	background-color: #17636A !important;
	color: #FFFFFF !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(23, 99, 106, 0.5) !important;
}

body.dark-mode .sb-chat-btn i,
body.dark-mode .sb-chat-btn [class*="sb-icon"],
body.dark-mode .sb-chat-btn [class^="sb-icon"] {
	color: #EAEAEA !important;
}

/* =========================================================
   TEMA CLARO OFICIAL - Easy I.T. Group
   Paleta baseada no logo Easy I.T.
   Aplica ao modo padrão (sem body.dark-mode)
   ========================================================= */

/* Variáveis de cor da marca */
body:not(.dark-mode) {
	--ei-primary:        #1F7A83;
	--ei-primary-light:  #2F9AA5;
	--ei-primary-dark:   #17636A;
	--ei-primary-faint:  #7FB7BC;
	--ei-bg:             #F5F6F8;
	--ei-white:          #FFFFFF;
	--ei-border:         #E5E7EB;
	--ei-text:           #374151;
	--ei-muted:          #6B7280;
	--ei-active-bg:      #E8F3F4;
	--ei-hover-bg:       #EEF6F7;
}

/* ------- 1. Fundo principal do sistema ------- */
body:not(.dark-mode),
body:not(.dark-mode) #wrapper,
body:not(.dark-mode) #page-wrapper,
body:not(.dark-mode) .content-wrapper,
body:not(.dark-mode) .app,
body:not(.dark-mode) .app-content {
	background-color: var(--ei-bg) !important;
	color: var(--ei-text) !important;
}

/* ------- 2. Cards e superfícies ------- */
body:not(.dark-mode) .panel,
body:not(.dark-mode) .panel_s,
body:not(.dark-mode) .panel-default,
body:not(.dark-mode) .panel-body,
body:not(.dark-mode) .widget,
body:not(.dark-mode) .dashboard-widget,
body:not(.dark-mode) .summary-box,
body:not(.dark-mode) .well,
body:not(.dark-mode) .list-group-item,
body:not(.dark-mode) .card,
body:not(.dark-mode) .box,
body:not(.dark-mode) .box-body,
body:not(.dark-mode) [class*="tw-bg-white"],
body:not(.dark-mode) [class*="!tw-bg-white"] {
	background: var(--ei-white) !important;
	border: 1px solid var(--ei-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
	padding: 20px !important;
	color: var(--ei-text) !important;
}

/* Linha superior colorida nos cards de dashboard */
body:not(.dark-mode) .top_stats_wrapper {
	border-top: 3px solid var(--ei-primary) !important;
	border-radius: 10px !important;
	background: var(--ei-white) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
	padding: 16px 20px !important;
}

/* ------- 3. Números principais das métricas ------- */
body:not(.dark-mode) .top_stats_wrapper .tw-font-semibold {
	font-size: 28px !important;
	font-weight: 600 !important;
	color: var(--ei-text) !important;
}

/* Texto de rótulo dos cards (título da métrica) */
body:not(.dark-mode) .top_stats_wrapper .tw-font-medium,
body:not(.dark-mode) .top_stats_wrapper .tw-truncate {
	color: var(--ei-muted) !important;
	font-size: 13px !important;
}

/* Ícones dos cards de métricas */
body:not(.dark-mode) .top_stats_wrapper svg.tw-text-neutral-600 {
	color: var(--ei-primary) !important;
}

/* ------- 4. Barras de progresso ------- */
body:not(.dark-mode) .progress-bar {
	background-color: var(--ei-primary-light) !important;
	background-image: none !important;
}

body:not(.dark-mode) .progress-bar-success {
	background-color: var(--ei-primary-light) !important;
	background-image: none !important;
}

body:not(.dark-mode) .progress-bar-info {
	background-color: var(--ei-primary-faint) !important;
	background-image: none !important;
}

body:not(.dark-mode) .progress-bar-danger {
	background-color: var(--ei-primary) !important;
	background-image: none !important;
}

body:not(.dark-mode) .progress-bar-warning {
	background-color: var(--ei-primary-light) !important;
	background-image: none !important;
}

/* ------- 5. Menu lateral ------- */
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) aside.sidebar {
	background: var(--ei-white) !important;
	border-right: 1px solid var(--ei-border) !important;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important;
}

/* Item ativo no menu lateral */
body:not(.dark-mode) #side-menu li.active > a,
body:not(.dark-mode) #side-menu .active > a,
body:not(.dark-mode) #setup-menu li.active > a,
body:not(.dark-mode) .sidebar > ul.nav > li.active > a:first-child {
	background: var(--ei-active-bg) !important;
	border-left: 3px solid var(--ei-primary) !important;
	color: var(--ei-primary) !important;
}

/* Hover no menu lateral */
body:not(.dark-mode) #side-menu li > a:hover,
body:not(.dark-mode) #side-menu li > a:focus,
body:not(.dark-mode) #setup-menu li > a:hover,
body:not(.dark-mode) #setup-menu li > a:focus,
body:not(.dark-mode) .sidebar > ul.nav > li:hover > a:first-child {
	background: var(--ei-hover-bg) !important;
	color: var(--ei-primary) !important;
}

/* Ícones do menu lateral */
body:not(.dark-mode) #side-menu li a i.menu-icon,
body:not(.dark-mode) #setup-menu li a i.menu-icon {
	color: var(--ei-primary) !important;
}

/* Texto dos links do menu */
body:not(.dark-mode) #side-menu li a .hide-menu,
body:not(.dark-mode) #side-menu li a {
	color: var(--ei-text) !important;
}

body:not(.dark-mode) #side-menu li.active > a .hide-menu,
body:not(.dark-mode) #side-menu li.active > a {
	color: var(--ei-primary) !important;
}

/* ------- 6. Botões primários ------- */
body:not(.dark-mode) .btn-primary {
	background-color: var(--ei-primary) !important;
	border-color: var(--ei-primary) !important;
	color: #FFFFFF !important;
}

body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .btn-primary:focus,
body:not(.dark-mode) .btn-primary:active,
body:not(.dark-mode) .btn-primary.active,
body:not(.dark-mode) .open > .dropdown-toggle.btn-primary {
	background-color: var(--ei-primary-dark) !important;
	border-color: var(--ei-primary-dark) !important;
	color: #FFFFFF !important;
}

/* ------- 7. Header / top navbar ------- */
body:not(.dark-mode) #header,
body:not(.dark-mode) .mobile-navbar {
	background: var(--ei-white) !important;
	border-bottom: 1px solid var(--ei-border) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Ícones e links do header */
body:not(.dark-mode) .navbar-nav > li > a {
	color: var(--ei-text) !important;
}

body:not(.dark-mode) .navbar-nav > li > a:hover,
body:not(.dark-mode) .navbar-nav > li > a:focus {
	color: var(--ei-primary) !important;
}

/* ------- 8. Tipografia global ------- */
body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6,
body:not(.dark-mode) .panel-title,
body:not(.dark-mode) .panel-title > a {
	color: var(--ei-text) !important;
}

body:not(.dark-mode) .text-muted,
body:not(.dark-mode) small,
body:not(.dark-mode) label {
	color: var(--ei-muted) !important;
}

/* ------- 9. Cabeçalhos de painéis e tabelas ------- */
body:not(.dark-mode) .panel-heading,
body:not(.dark-mode) .panel-default > .panel-heading,
body:not(.dark-mode) .box-header {
	background: var(--ei-white) !important;
	border-bottom: 1px solid var(--ei-border) !important;
	color: var(--ei-text) !important;
	border-radius: 10px 10px 0 0 !important;
}

/* Cabeçalho de tabela */
body:not(.dark-mode) .table > thead > tr > th,
body:not(.dark-mode) .table.items thead,
body:not(.dark-mode) table.dataTable thead tr > th {
	color: var(--ei-muted) !important;
	border-bottom: 2px solid var(--ei-border) !important;
}

/* Linhas de tabela */
body:not(.dark-mode) .table td,
body:not(.dark-mode) .table th {
	color: var(--ei-text) !important;
	border-color: var(--ei-border) !important;
}

/* ------- 10. Cores de link padrão ------- */
body:not(.dark-mode) a {
	color: var(--ei-primary) !important;
}

body:not(.dark-mode) a:hover,
body:not(.dark-mode) a:focus {
	color: var(--ei-primary-dark) !important;
}

/* ------- 11. Tailwind: classes de cor primária do Perfex ------- */
body:not(.dark-mode) .tw-bg-primary-600,
body:not(.dark-mode) [class*="tw-bg-primary"] {
	background-color: var(--ei-primary) !important;
}

body:not(.dark-mode) .tw-text-primary-600,
body:not(.dark-mode) [class*="tw-text-primary"] {
	color: var(--ei-primary) !important;
}

body:not(.dark-mode) .tw-border-primary-600,
body:not(.dark-mode) [class*="tw-border-primary"] {
	border-color: var(--ei-primary) !important;
}

/* ------- 12. Aba ativa (nav-tabs) ------- */
body:not(.dark-mode) .nav-tabs > li.active > a,
body:not(.dark-mode) .nav-tabs > li.active > a:hover,
body:not(.dark-mode) .nav-tabs > li.active > a:focus {
	color: var(--ei-primary) !important;
	border-bottom-color: var(--ei-primary) !important;
}

/* ------- 13. Paginação ------- */
body:not(.dark-mode) .pagination > li.active > a,
body:not(.dark-mode) .pagination > li.active > span {
	background-color: var(--ei-primary) !important;
	border-color: var(--ei-primary) !important;
}

/* ------- 14. Badges e labels ------- */
body:not(.dark-mode) .label-primary,
body:not(.dark-mode) .badge-primary {
	background-color: var(--ei-primary) !important;
}

/* ------- 15. Scrollbar personalizada (Webkit) ------- */
body:not(.dark-mode) ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

body:not(.dark-mode) ::-webkit-scrollbar-track {
	background: var(--ei-bg);
}

body:not(.dark-mode) ::-webkit-scrollbar-thumb {
	background: #C8CDD5;
	border-radius: 4px;
}

body:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
	background: var(--ei-primary-faint);
}

/* =========================================================
   AI CHAT MODULE - Easy I.T. Brand Colors
   Customiza o widget nativo de chat com cores da marca
   ========================================================= */

/* AI Chat Header - Cor principal teal */
.ai-chat-header {
	background: #1F7A83 !important;
	border-bottom: 1px solid #17636A !important;
}

/* Título e informações do assistente - branco */
.ai-assistant-title {
	color: #FFFFFF !important;
}

.ai-status-badge,
.ai-status-text {
	color: #FFFFFF !important;
	opacity: 0.95;
}

.ai-status-dot {
	background: #7FB7BC !important;
}

/* Botões no header - mantém branco com border sutilmente claro */
.ai-header-btn {
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	background: transparent !important;
}

.ai-header-btn:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #FFFFFF !important;
}

/* Botão de nova conversa - cor primária da marca */
.ai-new-chat-btn {
	background: #1F7A83 !important;
	border: none !important;
}

.ai-new-chat-btn:hover {
	background: #17636A !important;
	box-shadow: 0 2px 8px rgba(31, 122, 131, 0.3) !important;
}

.ai-new-chat-btn:active {
	background: #0F4D56 !important;
}

/* Conversa ativa - destaque com cor mais clara da marca */
.ai-conversation-item.active {
	background: #2F9AA5 !important;
	border-color: #1F7A83 !important;
	color: #FFFFFF !important;
}

.ai-conversation-item.active .ai-conv-icon {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #FFFFFF !important;
}

.ai-conversation-item.active .ai-conv-icon:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

.ai-conversation-item:hover .ai-conv-icon {
	background: #2F9AA5 !important;
	color: #FFFFFF !important;
}

/* Sugestões iniciais - border com cor primária leve */
.ai-suggestion-btn {
	border-color: #E5E7EB !important;
	transition: all 0.2s ease !important;
}

.ai-suggestion-btn:hover {
	border-color: #2F9AA5 !important;
	background: #F5F6F8 !important;
	box-shadow: 0 2px 8px rgba(31, 122, 131, 0.1) !important;
}

/* Campo de mensagens mantém claro */
.ai-messages-container {
	background: #FFFFFF !important;
	color: #374151 !important;
}

/* Input de mensagem claro com border suave */
.ai-input-area,
.ai-message-input {
	background: #FFFFFF !important;
	border: 1px solid #E5E7EB !important;
	color: #374151 !important;
}

.ai-message-input::placeholder {
	color: #9CA3AF !important;
}

.ai-message-input:focus {
	border-color: #2F9AA5 !important;
	box-shadow: 0 0 0 3px rgba(31, 122, 131, 0.1) !important;
	outline: none !important;
}

/* Botão de enviar - cor primária */
.ai-send-btn {
	background: #1F7A83 !important;
	border: none !important;
	color: #FFFFFF !important;
}

.ai-send-btn:hover:not(:disabled) {
	background: #17636A !important;
	box-shadow: 0 2px 8px rgba(31, 122, 131, 0.3) !important;
}

.ai-send-btn:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}