@charset "UTF-8";

:root {
	--bs-primary: #337ab7;
	--bs-primary-border: #2e6da4;
	--bs-success: #5cb85c;
	--bs-success-border: #4cae4c;
	--bs-danger: #d9534f;
	--bs-danger-border: #d43f3a;
	--bs-warning: #f0ad4e;
	--bs-warning-border: #eea236;
	--bs-info: #5bc0de;
	--bs-info-border: #46b8da;
	--bs-gray-light: #f7f7f7;
	--bs-gray-border: #ccc;
	--bs-gray-mid: #777;
	--bs-gray-dark: #555;
	--bs-yellow-lighter: #ffff66;
	--bs-green-lighter: #66ff66;
	--bs-red-lighter: #ff6666;
	--bs-gray-darker: #333;
	--bs-primary-hover: #286090;
	--bs-info-light: #d9edf7;
	--bs-warning-soft: #ffff9d;
	--bs-white: #fff;
	--bs-black: #000;

	/* Cores pastel para opções adicionais de design */
	--bs-pastel-blue: #a0c4ff;
	--bs-pastel-lavender: #cdb4db;
	--bs-pastel-mint: #a8e6cf;
	--bs-pastel-pink: #ffafcc;
	--bs-pastel-yellow: #fdffb6;
	--bs-pastel-peach: #ffd6a5;
	--bs-pastel-teal: #9bf6ff;
	--bs-pastel-salmon: #ffc8dd;
	--bs-pastel-lilac: #bdb2ff;
	--bs-pastel-green: #b9fbc0;

	/* Variações de intensidade para pastel-blue */
	--bs-pastel-blue-light: #c1d7fe;
	--bs-pastel-blue-dark: #7ea3e7;

	/* Variações de intensidade para pastel-lavender */
	--bs-pastel-lavender-light: #e0d0eb;
	--bs-pastel-lavender-dark: #b594ca;

	/* Variações de intensidade para pastel-mint */
	--bs-pastel-mint-light: #c7f5e2;
	--bs-pastel-mint-dark: #8ad5ba;

	/* Outras tonalidades pastel úteis para interface */
	--bs-pastel-bg-light: #f8f9fa;
	--bs-pastel-bg-subtle: #f0f1f3;
	--bs-pastel-border-light: #e2e6ea;

	/* Novas variáveis para substituir cores fixas */
	--bs-coral: #f5886c;
	--bs-light-green: #d1e7dd;
	--bs-success-dark: #0f5132;
	--bs-light-red: #f8d7da;
	--bs-danger-dark: #842029;
	--bs-gray-600: #6c757d;
	--bs-red-bright: #ff5252;
	--bs-light-grey: #9e9ea1;
	--bs-dark-transparent: rgba(0, 0, 0, 0.8);
	--bs-primary-light-transparent: rgba(0, 152, 218, 0.4);
	--bs-primary-medium-transparent: rgba(0, 152, 218, 0.7);

	/* Variáveis para emojis */
	--emoji-picker-bg: #ffffff;
	--emoji-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	--emoji-hover-bg: #f0f0f0;
}

.modal-backdrop {
	z-index: auto !important;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.dashboard_graph {
	height: 550px;
	overflow: auto;
}

.search-form-layout-financeiro {
	clear: both;
}

.search-form-layout-financeiro .search-form-section {
	margin: 0 0 15px;
	padding: 12px 15px 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fafafa;
}

.search-form-layout-financeiro .search-form-section > legend {
	width: auto;
	margin: 0 0 10px;
	padding: 0 8px;
	border: 0;
	font-size: 14px;
	font-weight: 600;
	color: #555;
}

.search-form-layout-financeiro .search-form-section .row {
	margin-left: -10px;
	margin-right: -10px;
}

.search-form-layout-financeiro .search-form-section [class*="col-md-"] {
	padding-left: 10px;
	padding-right: 10px;
}

.search-form-layout-financeiro .search-form-actions {
	margin-top: 10px;
}

.table-xs,
.table-xs th,
.table-xs td {
	font-size: 11px !important;
	padding: 1px !important;
	margin: 0px !important;
	border: 1px solid var(--bs-gray-border);
	border-collapse: collapse;
	min-width: 5px !important;
	text-align: center;
}

.btn-success {
	background-color: var(--bs-success) !important;
	border-color: var(--bs-success-border) !important;
}

.btn-primary {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary-border) !important;
}

.btn-alert {
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning-border) !important;
}

.btn-danger {
	background-color: var(--bs-danger) !important;
	border-color: var(--bs-danger-border) !important;
}

.btn-info {
	background-color: var(--bs-info) !important;
	border-color: var(--bs-info-border) !important;
}

.btn-warning {
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning-border) !important;
}

.btn-default {
	background-color: var(--bs-gray-light) !important;
	border-color: var(--bs-gray-border) !important;
}

.btn-link {
	background-color: transparent !important;
	border-color: transparent !important;
}

.btn-dark {
	background-color: var(--bs-gray-darker) !important;
	border-color: var(--bs-gray-darker) !important;
}

.sort-link {
	display: inline !important;
}

.fancybox-overlay {
	z-index: 2000000 !important;
}

/* Garantir que o conteúdo da Fancybox fique acima das janelas do chat e de qualquer overlay */
#fancybox-wrap,
#fancybox-outer,
#fancybox-inner,
#fancybox-loading {
	z-index: 2000001 !important;
}

.inline-flex {
	display: inline-flex !important;
}

.navbar-nav .active > a {
	background-color: var(--bs-primary-hover) !important;
	color: var(--bs-white) !important;
}

.navbar-nav li:has(.active) > a {
	background-color: var(--bs-primary-hover) !important;
	color: var(--bs-white) !important;
}

.navbar-nav li > ul > li > a {
	background-color: transparent !important;
	color: var(--bs-black);
}

/* ===========================================
   ANIMAÇÕES DO MENU - HOVER E CLICK
   =========================================== */

/* ===========================================
   ANIMAÇÕES DO MENU - HOVER E CLICK
   =========================================== */

/* Animação suave para hover nos itens do menu principal */
.navbar-nav > li > a,
.navbar-nav .dropdown-menu > li > a {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.navbar-nav > li > a:hover,
.navbar-nav .dropdown-menu > li > a:hover {
	transform: translateX(3px);
	padding-left: 12px;
}

/* CORREÇÃO: Garantir contraste adequado para itens .active em hover dentro de dropdown menus */
/* Evita que background branco e texto branco tornem o item ilegível */
/* Prioridade: Sobrescreve a regra genérica acima para itens .active */
.navbar-nav .dropdown-menu > .active > a:hover,
.navbar-nav .dropdown-menu > .active > a:focus,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu .dropdown-menu > .active > a:hover,
.dropdown-menu .dropdown-menu > .active > a:focus,
.dropdown-submenu.active > a:hover,
.dropdown-submenu.active > a:focus,
.navbar-nav .dropdown-menu .dropdown-submenu.active > a:hover,
.navbar-nav .dropdown-menu .dropdown-submenu.active > a:focus {
	color: #fff !important;
	background-color: #286090 !important;
	transform: translateX(3px);
	padding-left: 12px;
	/* Garantir que texto não seja removido */
	text-indent: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* CORREÇÃO ESPECÍFICA: Multi-level dropdown menus */
/* Garantir contraste para itens .active em multi-level dropdown menus */
/* Prioridade máxima: Sobrescreve TODAS as regras genéricas de hover */
.multi-level > .active > a:hover,
.multi-level > .active > a:focus,
.multi-level .dropdown-menu > .active > a:hover,
.multi-level .dropdown-menu > .active > a:focus,
.multi-level .dropdown-menu .dropdown-menu > .active > a:hover,
.multi-level .dropdown-menu .dropdown-menu > .active > a:focus,
.multi-level .dropdown-submenu.active > a:hover,
.multi-level .dropdown-submenu.active > a:focus,
.multi-level li.active > a:hover,
.multi-level li.active > a:focus,
.multi-level .dropdown-menu li.active > a:hover,
.multi-level .dropdown-menu li.active > a:focus,
.multi-level .dropdown-menu .dropdown-menu li.active > a:hover,
.multi-level .dropdown-menu .dropdown-menu li.active > a:focus,
.navbar-nav .dropdown-menu.multi-level > .active > a:hover,
.navbar-nav .dropdown-menu.multi-level > .active > a:focus,
.navbar-nav .dropdown-menu.multi-level li.active > a:hover,
.navbar-nav .dropdown-menu.multi-level li.active > a:focus,
.navbar-nav .dropdown-menu.multi-level .dropdown-menu > .active > a:hover,
.navbar-nav .dropdown-menu.multi-level .dropdown-menu > .active > a:focus,
.navbar-nav .dropdown-menu.multi-level .dropdown-menu li.active > a:hover,
.navbar-nav .dropdown-menu.multi-level .dropdown-menu li.active > a:focus,
.navbar-nav .dropdown-menu.multi-level .dropdown-submenu.active > a:hover,
.navbar-nav .dropdown-menu.multi-level .dropdown-submenu.active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level > .active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level li.active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level li.active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level .dropdown-menu > .active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level .dropdown-menu li.active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level .dropdown-menu li.active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level .dropdown-submenu.active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu.multi-level .dropdown-submenu.active > a:focus {
	color: #fff !important;
	background-color: #286090 !important;
	transform: translateX(3px);
	padding-left: 12px;
	/* Garantir que texto não seja removido */
	text-indent: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Efeito de ripple no click dos links do menu */
.navbar-nav > li > a:active,
.navbar-nav .dropdown-menu > li > a:active {
	transform: scale(0.98);
	transition: transform 0.1s ease;
}

/* Animação de abertura para dropdown menus */
.dropdown-menu {
	animation: menuFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	animation-duration: 0.25s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-name: menuFadeIn;
	animation-iteration-count: 1;
	transform-origin: top center;
}

@keyframes menuFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Animação para submenus (direita) */
.dropdown-submenu > .dropdown-menu {
	animation: submenuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	animation-duration: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-name: submenuSlideIn;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	transform-origin: left center;
}

@keyframes submenuSlideIn {
	from {
		opacity: 0;
		transform: translateX(-15px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

/* Animação para pull-left submenu (esquerda) */
.dropdown-submenu.pull-left > .dropdown-menu {
	animation: submenuSlideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	animation-duration: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-name: submenuSlideInLeft;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	transform-origin: right center;
}

@keyframes submenuSlideInLeft {
	from {
		opacity: 0;
		transform: translateX(15px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

/* Efeito de brilho sutil no hover dos itens do menu */
.navbar-nav > li > a::before,
.navbar-nav .dropdown-menu > li > a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
	z-index: 1;
	pointer-events: none;
}

.navbar-nav > li > a:hover::before,
.navbar-nav .dropdown-menu > li > a:hover::before {
	left: 100%;
}

/* Animação suave para ícones no menu */
.navbar-nav > li > a i,
.navbar-nav .dropdown-menu > li > a i {
	transition: transform 0.3s ease;
	display: inline-block;
}

.navbar-nav > li > a:hover i,
.navbar-nav .dropdown-menu > li > a:hover i {
	transform: scale(1.1) rotate(5deg);
}

/* Animação de bounce sutil no click */
@keyframes menuClickBounce {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.95);
	}
}

.navbar-nav > li > a:active,
.navbar-nav .dropdown-menu > li > a:active {
	animation: menuClickBounce 0.2s ease;
	animation-duration: 0.2s;
	animation-timing-function: ease;
	animation-name: menuClickBounce;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.color-black {
	color: var(--bs-black);
}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-responsive table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 15px;
	background-color: transparent;
}

.table-responsive td,
.table-responsive th {
	white-space: nowrap;
}

/* Override específico para permitir quebra em headers de grids redimensionáveis (EColumns) */
.table-responsive th[data-ecolumns-key] {
	white-space: normal;          /* permite quebra */
	word-wrap: break-word;        /* compatibilidade antiga */
	word-break: break-word;       /* quebra gentil */
	overflow-wrap: anywhere;      /* navegadores modernos */
}

/* Evita que conteúdo colado sem espaços force overflow */
.table-responsive th[data-ecolumns-key] span, 
.table-responsive th[data-ecolumns-key] div, 
.table-responsive th[data-ecolumns-key] a {
	white-space: normal !important;
}

.table-responsive {
	min-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-super-selected tr {
	border: 1px solid var(--bs-gray-border);
	transition: all 0.3s ease;
	padding: 10px;
}

.table-super-selected tr.selected {
	outline: 5px solid var(--bs-yellow-lighter);
	border: 1px solid var(--bs-gray-border);
}

.table-super-selected tr,
.table-super-selected div.table-super-selected tr {
	border: 1px solid var(--bs-gray-border);
}

div.table-super-selected tr.selected {
	outline: 5px solid var(--bs-yellow-lighter);
	border: 1px solid var(--bs-gray-border);
}

.bs-alert-compact {
	font-size: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 22px;
}

.table-responsive table {
	white-space: nowrap;
	table-layout: auto;
}

.loading-1 {
	background: url(../images/icons/loading-1.gif) no-repeat center center;
	background-size: 20px 20px;
	display: inline-block;
	width: 20px;
	height: 20px;
}

/* BGrid: contagem regressiva do debounce de filtros (mesma área do grid-view-loading / loading.gif) */
.grid-view.bgrid-filter-debounce-pending {
	position: relative;
}

/* Mesmo canto do .grid-view-loading (background loading.gif: no-repeat, posição 0 0 no padding-box) */
.grid-view.bgrid-filter-debounce-pending > .bgrid-filter-debounce-indicator {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 12;
	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding: 0;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	color: #333;
	background-color: rgba(255, 255, 255, 0.92);
	border: none;
	box-sizing: border-box;
	pointer-events: none;
}

.grid-view.grid-view-loading > .bgrid-filter-debounce-indicator {
	display: none !important;
}

.meu-link {
	cursor: pointer;
	color: var(--bs-primary);
}

.table-responsive td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	max-width: 300px;
}

/* ===========================================
   BGRID - DEFAULT WRAP (quebra de linha, altura automática, sem supressão)
   Escopo: apenas tabelas BGrid (.bgrid-table-wrapper + table.items).
   Para nowrap/ellipsis por coluna, usar cellWrap na config e classes abaixo.
   =========================================== */
.bgrid-table-wrapper.table-responsive table.items td,
.bgrid-table-wrapper.table-responsive table.items th {
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	overflow: visible !important;
	max-width: none !important;
	text-overflow: clip !important;
}

/* Por coluna: nowrap (uma linha, sem quebra) */
.bgrid-table-wrapper.table-responsive table.items td.bgrid-cell-nowrap,
.bgrid-table-wrapper.table-responsive table.items th.bgrid-cell-nowrap {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: clip !important;
}

/* Por coluna: ellipsis (uma linha, conteúdo truncado com reticências) */
.bgrid-table-wrapper.table-responsive table.items td.bgrid-cell-ellipsis,
.bgrid-table-wrapper.table-responsive table.items th.bgrid-cell-ellipsis {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100%;
}

/* Helpdesk/Chamado admin: célula Descrição — evita que HTML (ex.: tabelas) na descrição estoure a largura do td */
#chamado-grid .bgrid-table-wrapper table.items td.chamado-grid-descricao-cell,
#chamado-grid .bgrid-table-wrapper table.items td:has(.chamado-grid-descricao-wrap) {
	max-width: 500px !important;
	overflow: visible !important;
	word-wrap: break-word !important;
}
/* Wrapper dentro da célula Descrição: limita largura e scroll horizontal quando há tabelas HTML */
#chamado-grid .bgrid-table-wrapper table.items td .chamado-grid-descricao-wrap,
.grid-view .chamado-grid-descricao-wrap {
	display: block !important;
	max-width: 500px !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
}
@media (min-width: 1200px) {
	#chamado-grid .bgrid-table-wrapper table.items td.chamado-grid-descricao-cell,
	#chamado-grid .bgrid-table-wrapper table.items td:has(.chamado-grid-descricao-wrap) {
		max-width: 600px !important;
	}
	#chamado-grid .bgrid-table-wrapper table.items td .chamado-grid-descricao-wrap,
	.grid-view .chamado-grid-descricao-wrap {
		max-width: 600px !important;
	}
}
/* Tabelas dentro da descrição: limitar largura ao container */
#chamado-grid .bgrid-table-wrapper table.items td.chamado-grid-descricao-cell table,
#chamado-grid .bgrid-table-wrapper table.items td .chamado-grid-descricao-wrap table {
	max-width: 100% !important;
}
/* Células das tabelas dentro da descrição: quebrar texto para não invadir coluna ao lado */
#chamado-grid .bgrid-table-wrapper table.items td.chamado-grid-descricao-cell table td,
#chamado-grid .bgrid-table-wrapper table.items td.chamado-grid-descricao-cell table th,
#chamado-grid .bgrid-table-wrapper table.items td .chamado-grid-descricao-wrap table td,
#chamado-grid .bgrid-table-wrapper table.items td .chamado-grid-descricao-wrap table th {
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	white-space: normal !important;
}

@media (min-width: 761px) {
	.table-responsive td {
		max-width: 300px;
	}
}
@media (max-width: 760px) {
	.table-responsive td {
		max-width: 100%;
	}
	
	/* ===========================================
	   BGRID MOBILE - SCROLL HORIZONTAL
	   =========================================== */
	/* Permitir que a tabela expanda para sua largura natural no mobile */
	.bgrid-table-wrapper.table-responsive {
		overflow-x: auto !important;
		overflow-y: visible !important; /* Permitir rolagem vertical da página */
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-y pan-x !important; /* Permitir ambos os scrolls - JavaScript detecta direção */
		width: 100% !important;
		max-width: 100% !important;
		position: relative;
	}
	
	/* Forçar tabela a usar largura baseada no conteúdo */
	.bgrid-table-wrapper.table-responsive table.items {
		table-layout: auto !important; /* MUDANÇA CRÍTICA: de fixed para auto */
		width: auto !important;
		min-width: 100% !important; /* Mínimo do container, mas pode expandir */
		max-width: none !important; /* REMOVER limitação de max-width */
	}
	
	/* BGRID default: quebra de linha e altura automática (igual desktop) */
	.bgrid-table-wrapper.table-responsive table.items td,
	.bgrid-table-wrapper.table-responsive table.items th {
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		overflow: visible !important;
		max-width: none !important;
		text-overflow: clip !important;
		min-width: 0 !important; /* permite colunas estreitas quando wrap */
	}
	/* Por coluna nowrap/ellipsis continuam válidos no mobile */
	.bgrid-table-wrapper.table-responsive table.items td.bgrid-cell-nowrap,
	.bgrid-table-wrapper.table-responsive table.items th.bgrid-cell-nowrap {
		white-space: nowrap !important;
		min-width: fit-content !important;
	}
	.bgrid-table-wrapper.table-responsive table.items td.bgrid-cell-ellipsis,
	.bgrid-table-wrapper.table-responsive table.items th.bgrid-cell-ellipsis {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	
	/* ============================================================
	   INDICADORES VISUAIS DE SCROLL HORIZONTAL - REMOVIDOS
	   ============================================================
	   Os pseudo-elementos ::before e ::after que criavam gradientes
	   esbranquiçados nas bordas da tabela foram REMOVIDOS para
	   atender ao requisito de interface limpa em dispositivos móveis.
	   
	   Mantido apenas comentário para documentação.
	   Ref: Ticket BGrid Mobile Responsiveness - 2026-01-16
	   ============================================================ */
	
	/* ===========================================
	   BGRID MOBILE - BOTÕES DE AÇÕES E CONTROLES
	   =========================================== */
	/* Botões de ações (bulk actions, filtros, etc) */
	.grid-view .bulk-actions-btn,
	.grid-view .btn,
	.grid-view button.btn,
	.grid-view a.btn,
	.grid-view .btn-sm,
	.grid-view .btn-primary,
	.grid-view .btn-danger,
	.grid-view .btn-success,
	.grid-view .btn-info,
	.grid-view .btn-warning,
	.grid-view .btn-default,
	.grid-view .btn-link,
	.grid-view .buttonStateful {
		min-height: 48px !important; /* Padrão mobile UI - 48px mínimo */
		padding: 12px 16px !important; /* Padding aumentado para facilitar toque */
		font-size: 16px !important; /* Tamanho mínimo para evitar zoom automático no iOS */
		line-height: 1.5 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
	}
	
	/* Botões pequenos também precisam de tamanho adequado no mobile */
	.grid-view .btn-sm {
		min-height: 48px !important;
		padding: 12px 16px !important;
		font-size: 16px !important;
	}
	
	/* Select de quantidade de linhas (pageSize) */
	.grid-view select[name="pageSize"],
	.grid-view select[name*="pageSize"],
	.grid-view select[name*="per-page"],
	.grid-view select.form-control,
	.grid-view .pagination select {
		min-height: 48px !important; /* Padrão mobile UI */
		padding: 12px 16px !important; /* Padding aumentado */
		font-size: 16px !important; /* Tamanho mínimo para evitar zoom automático no iOS */
		line-height: 1.5 !important;
		-webkit-appearance: none !important; /* Remove estilo padrão iOS */
		-moz-appearance: none !important;
		appearance: none !important;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		border-radius: 4px !important;
		background-color: #fff !important;
		border: 1px solid #ccc !important;
		width: auto !important;
		min-width: 80px !important;
	}
	
	/* Links de paginação */
	.grid-view .pagination > li > a,
	.grid-view .pagination > li > span {
		min-height: 48px !important;
		padding: 12px 16px !important;
		font-size: 16px !important;
		line-height: 1.5 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 48px !important;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
	}
	
	/* Botões de pesquisa avançada e outros links que são botões */
	.grid-view .search-button-slide,
	.grid-view a[class*="btn"],
	.grid-view a[class*="button"] {
		min-height: 48px !important;
		padding: 12px 16px !important;
		font-size: 16px !important;
		line-height: 1.5 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
	}
	
	/* Links de ordenação (sort-link) - manter menor mas ainda clicável */
	.grid-view .sort-link {
		min-height: 44px !important; /* Um pouco menor mas ainda adequado */
		padding: 8px 12px !important;
		font-size: 14px !important;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
	}
	
	/* Espaçamento entre botões para evitar cliques acidentais */
	.grid-view .form-actions .btn,
	.grid-view .form-actions button {
		margin-bottom: 8px !important;
		margin-right: 8px !important;
	}
	
	/* Container de ações em bloco para melhor organização */
	.grid-view .form-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
	}
	
	.grid-view .form-actions .btn {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* ===========================================
	   BGRID MOBILE - CHECKBOXES E BOTÕES DE AÇÃO
	   =========================================== */
	/* Checkboxes maiores para facilitar toque */
	.bgrid-table-wrapper.table-responsive table.items input[type="checkbox"],
	.bgrid-table-wrapper.table-responsive table.items tbody input[type="checkbox"],
	.bgrid-table-wrapper.table-responsive table.items thead input[type="checkbox"] {
		width: 32px !important; /* Aumentado de ~13px para 32px */
		height: 32px !important; /* Aumentado de ~13px para 32px */
		min-width: 32px !important;
		min-height: 32px !important;
		cursor: pointer !important;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		transform: scale(1.2) !important; /* Aumenta visualmente sem afetar layout */
		margin: 8px !important;
	}
	
	/* Células de ação - permitir quebra de linha */
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"],
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] {
		white-space: normal !important; /* Permite quebra de linha */
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		padding: 8px 4px !important; /* Padding reduzido para dar mais espaço */
		vertical-align: top !important;
	}
	
	/* Container flexível para botões de ação */
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"],
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] {
		display: flex !important;
		flex-wrap: wrap !important; /* Permite quebra de linha */
		gap: 4px !important; /* Espaçamento entre botões */
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	
	/* Botões de ação dentro das células da tabela */
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child a,
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child button,
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child .btn,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"] a,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"] button,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"] .btn,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] a,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] button,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] .btn {
		min-height: 48px !important; /* Padrão mobile UI */
		min-width: 48px !important; /* Garante área de toque adequada */
		width: auto !important; /* Largura baseada no conteúdo */
		max-width: 100% !important; /* Não ultrapassa a célula */
		padding: 12px 16px !important; /* Padding aumentado */
		font-size: 16px !important; /* Tamanho mínimo para evitar zoom automático no iOS */
		line-height: 1.5 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important; /* Não encolhe */
		margin: 0 !important; /* Remove margens padrão */
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
		white-space: nowrap !important; /* Texto do botão não quebra */
		box-sizing: border-box !important;
	}
	
	/* Botões de ação que são apenas ícones (sem texto) */
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child a:empty,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"] a:empty,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] a:empty,
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child a[title]:not([title=""]),
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"] a[title]:not([title=""]),
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"] a[title]:not([title=""]) {
		min-width: 48px !important;
		min-height: 48px !important;
		padding: 12px !important;
		font-size: 20px !important; /* Ícones maiores */
	}
	
	/* Garantir que células de ação tenham largura mínima adequada */
	.bgrid-table-wrapper.table-responsive table.items tbody td:last-child,
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="action"],
	.bgrid-table-wrapper.table-responsive table.items tbody td[class*="510152025501002505001000250050009999Todos"],
	.bgrid-table-wrapper.table-responsive table.items tbody td.ecolumns-styled[class*="510152025501002505001000250050009999Todos"] {
		min-width: 200px !important; /* Largura mínima para acomodar 2-3 botões por linha */
		width: 200px !important; /* Forçar largura para garantir espaço - sobrescreve inline styles */
		max-width: none !important;
	}
	
	/* Header da coluna de ação também precisa de largura adequada */
	.bgrid-table-wrapper.table-responsive table.items thead th:last-child,
	.bgrid-table-wrapper.table-responsive table.items thead th[class*="action"],
	.bgrid-table-wrapper.table-responsive table.items thead th[class*="510152025501002505001000250050009999Todos"],
	.bgrid-table-wrapper.table-responsive table.items thead th.ecolumns-styled[class*="510152025501002505001000250050009999Todos"] {
		min-width: 200px !important;
		width: 200px !important; /* Forçar largura para garantir espaço */
	}
	
	/* Garantir que a tabela não force largura fixa nas células de ação */
	.bgrid-table-wrapper.table-responsive table.items {
		table-layout: auto !important; /* Já está definido, mas garantir */
	}
	
	/* ============================================================
	   BGRID MOBILE - FIXAÇÃO DA PRIMEIRA COLUNA - REMOVIDA
	   ============================================================
	   A fixação sticky da primeira coluna foi REMOVIDA porque causava
	   desalinhamento visual entre o header (th) sticky e as células (td)
	   que ficavam com position: static, prejudicando a experiência do usuário.
	   
	   REQUISITO: Nenhuma coluna deve ser fixa em telas pequenas.
	   A tabela deve rolar livremente na horizontal.
	   
	   Ref: Ticket BGrid Mobile Responsiveness - 2026-01-16
	   ============================================================ */
	
	/* Primeira coluna mantém estilo normal (sem fixação) */
	.bgrid-table-wrapper.table-responsive table.items tbody td:first-child,
	.bgrid-table-wrapper.table-responsive table.items thead th:first-child {
		position: relative !important; /* Sobrescrever qualquer sticky residual */
		left: auto !important;
		z-index: auto !important;
		box-shadow: none !important;
		min-width: 48px !important; /* Espaço para checkbox maior */
		padding: 8px 4px !important;
		text-align: center !important;
	}
}

.icon-green {
	color: green;
}

.icon-red {
	color: red;
}

.icon-large {
	font-size: 25px;
}

table td[class*='col-'],
table th[class*='col-'] {
	max-width: 1em !important;
}

/* ===========================================
   CORREÇÃO: ALINHAMENTO CONSISTENTE TH/TD
   Especialmente para checkbox-column e button-column (actions)
   que precisam de alinhamento centralizado
   =========================================== */

/* ✅ CORREÇÃO CRÍTICA: Checkbox Column - Alinhamento TH/TD */
.grid-view table.items th.checkbox-column {
	vertical-align: middle !important;
	text-align: center !important;
	padding: 8px 1px !important; /* Padding lateral mínimo */
	position: relative !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.grid-view table.items td.checkbox-column {
	vertical-align: middle !important;
	text-align: center !important;
	padding: 8px 1px !important; /* Padding lateral mínimo */
	box-sizing: border-box !important;
}

/* Garantir que checkbox tenha mesmo padding no header e body */
.grid-view table.items thead th.checkbox-column,
.grid-view table.items tbody td.checkbox-column {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	padding-left: 1px !important;
	padding-right: 1px !important;
}

/* Garantir que checkbox fique centralizado mesmo com resize handle */
.grid-view table.items th.checkbox-column input[type="checkbox"],
.grid-view table.items td.checkbox-column input[type="checkbox"] {
	margin: 0 auto !important;
	display: block !important;
	vertical-align: middle !important;
}

/* ✅ CORREÇÃO CRÍTICA: Button Column (Actions) - Alinhamento TH/TD
   TH precisa de apenas 4px a mais que TD para compensar resize handle */
.grid-view table.items th.button-column,
.grid-view table.items thead th:last-child {
	min-width: auto !important;
	vertical-align: middle !important;
	text-align: center !important;
	padding: 8px 4px !important;
	position: relative !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

/* Aplicar largura extra via width se já existir largura definida */
.grid-view table.items th.button-column[style*="width"],
.grid-view table.items thead th:last-child[style*="width"] {
	min-width: auto !important;
}

.grid-view table.items td.button-column,
.grid-view table.items tbody td:last-child {
	vertical-align: middle !important;
	text-align: center !important;
	padding: 8px 4px !important;
	box-sizing: border-box !important;
}

/* Garantir alinhamento consistente para todas as colunas */
.grid-view table.items th,
.grid-view table.items td {
	vertical-align: middle !important;
}

/* Sobrescrever para headers com conteúdo textual centralizado */
.grid-view table.items thead th[style*="text-align: center"],
.grid-view table.items thead th[class*="center"] {
	vertical-align: middle !important;
}

/* Garantir que resize handle não cause desalinhamento */
.grid-view table.items th.checkbox-column .ecolumns-resize-handle,
.grid-view table.items th.button-column .ecolumns-resize-handle,
.grid-view table.items thead th:last-child .ecolumns-resize-handle {
	right: 0 !important;
	top: 0 !important;
	height: 100% !important;
	width: 6px !important;
}

.ui-pnotify {
	position: fixed !important;
	max-height: 90%;
	overflow-y: auto;
}

.alert-keep {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.tbl-preco-btn {
	display: inline !important;
}

body > .ui-pnotify {
	position: absolute;
	z-index: 100040;
}

thead.tableFloatingHeaderOriginal {
	background-color: var(--bs-white);
	z-index: 40 !important;
}

.cams {
	float: left;
}

#resumo > hr {
	margin-top: 0px;
	margin-bottom: 0px;
	border: 0;
	border-top: 1px solid var(--bs-gray-darker);
}

#resumo > span {
	font-weight: 800;
}

#resumo > #result {
	font-size: 25px;
	color: var(--bs-danger) !important;
}

#resumo > #left {
	float: left;
}

label.page-title {
	font-size: 36px;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.page-title, label.page-title, h1.page-title {
		font-size: clamp(16px, 7.5vw, 28px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		max-width: 100%;
		vertical-align: middle;
	}
}

@keyframes blink {
	50% {
		visibility: hidden;
	}
}

.blink {
	animation: blink 1s linear infinite;
}

.bubble {
	width: 100%;
	clear: both;
	float: left;
	border-radius: 15px;
	padding: 10px;
}

.margin-right-2 {
	margin-right: 2%;
}

.margin-left-2 {
	margin-left: 2%;
}

.mensagem-header {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.mensagem-nome {
	font-weight: bold;
}

.mensagem-data {
	font-size: 12px;
	color: var(--bs-gray-600);
	margin-left: 10px;
}

.janela {
	margin-bottom: 60px;
	position: relative;
	float: none;
	display: inline-block;
	z-index: 9;
	top: -500px;
	border-radius: 6px;
	overflow: hidden;
	transition: all 0.3s ease;
}
.janela-minimizada {
	z-index: 9999;
	height: 25px;
	top: 0px;
	transform: translateY(0);
	transition: all 0.3s ease;
}
div.topo.fixar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 400px;
}

div#janelas {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 4;
	width: 100%;
	height: 25px;
	display: none;
}

div#janelas span {
	font-size: 10px;
}

div#janelas div.janela {
	width: 400px;
	margin-right: 5px;
	float: right;
	margin-bottom: 0;
	border-left: 1px solid var(--bs-gray-dark);
	border-right: 1px solid var(--bs-gray-dark);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
div#janelas div.janela:hover {
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
	transform: translateY(-5px);
}
div.janela div.topo {
	float: left;
	width: 100%;
	background: var(--bs-pastel-blue);
	color: var(--bs-gray-darker);
	height: 25px;
	border-bottom: 1px solid var(--bs-gray-dark);
	cursor: pointer;
	transition: background-color 0.3s ease;
}
div.janela div.topo:hover {
	background: var(--bs-pastel-blue-dark);
}
div.topo span {
	float: left;
	font: 14px tahoma, arial, helvetica;
	margin: 4px;
}
div.topo a.btn {
	opacity: 0.7;
	transition: all 0.3s ease;
}

div#video-container {
	width: 100%;
	height: 100%;
}
video#my-video {
	height: 100%;
	width: 100%;
}
video#their-video {
	height: 100%;
	width: 100%;
}
div#corpo {
	float: left;
	width: 100%;
}
div.janela textarea {
	padding: 8px;
	border: 0;
	outline: none;
	background: var(--bs-white);
	font: 13px arial, tahoma;
	color: var(--bs-gray-darker);
	width: 100%;
	border-radius: 0 0 4px 4px;
	transition: all 0.3s ease;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}
div.janela textarea:focus {
	background: #f9f9f9;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--bs-primary-medium-transparent) !important;
	box-shadow: 0 0 8px var(--bs-primary-light-transparent);
}
div.mensagens {
	float: left;
	width: 100%;
	background: var(--bs-white);
	height: 450px;
	border-bottom: 1px solid var(--bs-gray-darker);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
div.mensagens ul.listar {
	list-style-type: none;
	float: left;
	width: 100%;
	background: var(--bs-white);
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding-left: 0px;
	padding: 0px;
}
div.mensagens ul.listar li {
	float: left;
	width: 100%;
	border-bottom: 1px dotted var(--bs-gray-darker);
	padding-bottom: 3px;
}
div.mensagens ul.listar li span {
	font: 18px tahoma, arial, helvetica;
	color: var(--bs-white);
	float: left;
	width: 100%;
	margin: 3px;
}
div.mensagens ul.listar li p {
	font: 13px tahoma, arial, helvetica;
	color: var(--bs-white);
	float: left;
	width: 100%;
	margin-left: 3px;
	font-weight: 400;
}
div.mensagens ul.listar li p .emoji {
	margin: 0 2px;
}
/* Botão de chat fixo no topo esquerdo, sobre a navbar */
#menu-chat {
	z-index: 1100; /* Acima da navbar (1030) e menu (1040), mas abaixo dos dialogs (2050) */
	margin-left: 0px;
	border-radius: 0;
	padding: 14.5px;
	position: fixed !important;
	top: 0;
	left: 0;
	bottom: auto;
	right: auto;
	bottom: 20px;
	right: 20px;
	top: auto;
	left: auto;
	transition: all 0.3s ease;
	overflow: visible;
}

#menu-chat-unread-badge,
.menu-chat-unread-badge {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 2;
	min-width: 13px;
	height: 13px;
	padding: 0 2px;
	border-radius: 4px;
	font-size: 8px;
	font-weight: 600;
	line-height: 13px;
	text-align: center;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(0, 0, 0, 0.38);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
	pointer-events: none;
	box-sizing: border-box;
}

#menu-chat.btn-danger #menu-chat-unread-badge,
#menu-chat.btn-danger .menu-chat-unread-badge {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
}

/* Chartbar como container fixo no topo esquerdo, sobre a navbar */
.chartbar {
	position: fixed !important;
	top: 0;
	left: 0;
	bottom: auto;
	right: auto;
	width: auto;
	height: auto;
	z-index: 1099; /* Acima da navbar */
	pointer-events: none; /* cliques passam para #menu-chat */
}

.chartbar > #menu-chat,
.chartbar > #chat-sidebar {
	pointer-events: auto;
}

span#chat-message-total {
	padding: 0px;
	font-size: 15px;
	position: relative;
	top: -18px;
	right: 40px;
	background-color: var(--bs-coral);
	color: var(--bs-white);
	margin: -10px;
}

.sidr ul li a,
.sidr ul li span {
	padding: 0 15px;
	display: inline;
	text-decoration: none;
	color: var(--bs-white);
	font-size: 12px;
}
.sidr ul li {
	display: block;
	margin: 0;
	line-height: 20px;
	border-top: 1px solid #4d4d4d;
	border-bottom: 1px solid #1a1a1a;
}
.sidr ul li:hover,
.sidr ul li.active,
.sidr ul li.sidr-class-active {
	border-top: none;
	line-height: 20px;
}
.sidr ul {
	display: block;
	margin: 0 0 0px;
	padding: 0;
	border-top: 0px solid #1a1a1a;
	border-bottom: 0px solid #4d4d4d;
}

.jiggly,
.jiggle,
.shake {
	-webkit-animation: jiggle 0.2s infinite;
	-moz-animation-duration: 0.2s;
	-moz-animation-name: jiggle;
	-moz-animation-iteration-count: infinite;
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
}

.clickable {
	cursor: pointer;
}

.clickable:hover,
.clickable:active {
}

#app {
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	height: 114px;
	width: 114px;
	margin: 0 auto;
}

@-moz-keyframes jiggle {
	0% {
		-moz-transform: rotate(-15deg);
	}
	50% {
		-moz-transform: rotate(15deg);
	}
}

@-webkit-keyframes jiggle {
	0% {
		-webkit-transform: rotate(-15deg);
	}
	50% {
		-webkit-transform: rotate(15deg);
	}
}

.btn-danger.jiggly {
	animation: pulsando 1.5s infinite;
}

@keyframes pulsando {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 0 15px rgba(217, 83, 79, 0.8);
	}
	100% {
		transform: scale(1);
	}
}

ul#chat-list {
	list-style-type: square;
}
ul#chat-list li:before {
	content: '•';
	margin-right: 10px;
	font-weight: bold;
}

.vxgplayer {
	display: inline-block;
	background-color: var(--bs-black);
	border: 2px solid var(--bs-primary);
	box-shadow: 0 0 10px rgba(0, 0, 0, 1);
	margin: 0px !important;
	overflow: hidden;
}

td .filter-container input {
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: var(--bs-gray-dark);
	background-color: var(--bs-white);
	background-image: none;
	border: 1px solid var(--bs-gray-border);
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s,
		box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	min-width: 50px !important;
}

.col-md-3.anotacao-item {
	height: 175px;
}

#anotacaolist > .pagination {
	width: 100%;
}

#pdv-h1 {
	font-size: 85px;
}

#formulario_produto_adicionar input {
	width: 100%;
}

#form_pdv input {
	width: 100%;
}

.badge-icon img {
	max-height: 75px;
	display: table;
	margin: auto;
}

.badge-icon > div.item-fade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 5px 4px;
	min-height: 100px;
}

.badge-icon > div.item-fade a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	gap: 6px;
}

.badge-icon i.fas,
.badge-icon i.far,
.badge-icon i.fab {
	font-size: 55px;
	display: block;
	margin: 0;
	line-height: 1;
	color: var(--bs-white);
	width: 100%;
	text-align: center;
	transition: transform 0.2s ease-in-out;
	flex-shrink: 0;
}

.badge-icon > div.item-fade:hover i.fas,
.badge-icon > div.item-fade:hover i.far,
.badge-icon > div.item-fade:hover i.fab {
	transform: scale(1.1);
}

.badge-icon label {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
	flex-shrink: 0;
}

.badge-icon-pdv img {
	max-height: 50px;
	display: table;
	margin: auto;
}

.item-fade {
	vertical-align: top;
	opacity: 1;
	transition: opacity 0.25s ease-in-out;
}

.item-hover-opacity:hover {
	opacity: 0.2;
}

.box-shadow {
	-webkit-box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.68);
	-moz-box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.68);
	box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.68);
}
.box-shadow:hover {
	-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.68);
	-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.68);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.68);
}

h1.page-title {
	margin: 10px 0px 0px 0px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background-color: var(--bs-gray-light);
}

.ui-pnotify {
	z-index: 50000;
}

/*
 * PNotify + Bootstrap 3: botões de confirmação (confirm.buttons)
 * O PNotify pode aplicar btn-default em TODOS os botões; com btn-danger isso deixa
 * fundo claro herdado de .btn-default e texto claro de .btn-danger = ilegível.
 * Ver: .agent/instructions/troubleshooting/ERRO_COMUM_CONTRASTE_UI_PNIFY_E_CARDS.md
 */
.ui-pnotify .ui-pnotify-action-button.btn-danger,
.ui-pnotify button.btn.btn-danger {
	background-color: #c9302c !important;
	border-color: #ac2925 !important;
	color: #fff !important;
}
.ui-pnotify .ui-pnotify-action-button.btn-success,
.ui-pnotify button.btn.btn-success {
	background-color: var(--bs-success) !important;
	border-color: var(--bs-success-border) !important;
	color: #fff !important;
}
.ui-pnotify .ui-pnotify-action-button.btn-warning,
.ui-pnotify button.btn.btn-warning {
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning-border) !important;
	color: #fff !important;
}
.ui-pnotify .ui-pnotify-action-button.btn-primary,
.ui-pnotify button.btn.btn-primary {
	background-color: #337ab7 !important;
	border-color: #2e6da4 !important;
	color: #fff !important;
}
.ui-pnotify .ui-pnotify-action-button.btn-default:not(.btn-danger):not(.btn-primary):not(.btn-success):not(.btn-warning),
.ui-pnotify button.btn.btn-default:not(.btn-danger):not(.btn-primary):not(.btn-success):not(.btn-warning) {
	background-color: #fff !important;
	border-color: #ccc !important;
	color: #333 !important;
}

/* Acima do PNotify (themes/.../scripts.php: .ui-pnotify { z-index: 500000 }) e do modal Bootstrap (~1050). */
.datepicker {
	z-index: 502000 !important;
}

/* Garantir que CJuiDialog/jQuery UI Dialog esteja acima do navbar e backdrop do Bootstrap 3 */
.ui-dialog.ui-front { z-index: 2050 !important; }
.ui-widget-overlay.ui-front { z-index: 2040 !important; }

/* ✅ CJuiDialog: NÃO customizar o botão de fechar (X)
 * Padrão oficial: .agent/instructions/standards/PADRAO_CJUIDIALOGS.md (seção 9.1)
 * O jQuery UI já gerencia o ícone/texto acessível corretamente.
 */

/* ✅ FIX (seguro): alinhamento do "X" do close do CJuiDialog
 * Alguns temas (ex.: jquery-ui-bootstrap.css do yiibooster) aplicam `margin: 1px` no `span`,
 * o que pode desalinhá-lo visualmente dentro do botão.
 * Mantém o comportamento padrão do jQuery UI (não altera estrutura, apenas zera a margem).
 * 
 * Problema: jquery-ui-bootstrap.css define .ui-button-icon-only .ui-icon com margin-top:-3px
 * mas o ícone tem 16px, então deveria ser -8px para centralizar perfeitamente.
 */
.ui-dialog .ui-dialog-titlebar-close span {
	margin: 0 !important;
}

/* Centralizar o ícone "X" perfeitamente dentro do botão close */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	margin-top: -8px !important;  /* metade de 16px */
	margin-left: -8px !important; /* metade de 16px */
}

/* 
 * HIERARQUIA DE Z-INDEX GLOBAL:
 * 
 * 50000 - PNotify (notificações) - Máxima prioridade
 * 40010 - Tooltips - Informações contextuais rápidas
 * 40000 - Popovers - Informações detalhadas (hover)
 * 2050  - CJuiDialog/jQuery UI Dialog - Modais do sistema
 * 2040  - UI Widget Overlay - Backdrop dos modais
 * 1151  - Datepicker - Calendários
 * 1030  - Navbar - Menu principal
 * 9999  - Elementos diversos (vários)
 * 
 * Popovers e Tooltips devem aparecer acima de quase tudo,
 * exceto PNotify que tem prioridade máxima para notificações.
 */

/* ===== HIERARQUIA DE Z-INDEX - POPOVERS (MAIOR PRIORIDADE) ===== */
/* 
 * 10000000 - Tooltips (1 a mais que popover para ficar acima)
 * 9999999  - Popovers (SEMPRE VISÍVEL - ajuda contextual)
 * 500000   - PNotify (notificações)
 * 400000   - CJuiDialog (dialogs)
 * 399000   - UI Widget Overlay (backdrop)
 * 350000   - Bootstrap Modal
 * 349000   - Modal Backdrop
 * 2060     - Datepicker
 */

/* Garantir que Popovers (Bootstrap) fiquem SEMPRE acima de tudo */
.popover,
.popover.in,
.popover.fade.in,
.popover.top,
.popover.bottom,
.popover.left,
.popover.right {
    z-index: 9999999 !important; /* MÁXIMO - sempre no topo */
    opacity: 1 !important;
    background-color: #ffffff !important; /* Branco sólido */
    max-width: 350px;
    position: absolute !important; /* Garantir posicionamento absoluto */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra mais forte */
    border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Borda definida */
}

/* Seta do popover também com z-index correto */
.popover .arrow,
.popover .arrow::before,
.popover .arrow::after {
    z-index: 10000000 !important; /* Acima do próprio popover */
    border-width: 5px;
}

/* Garantir que a seta também seja opaca */
.popover.top .arrow::after {
    border-top-color: #ffffff !important;
}

.popover.bottom .arrow::after {
    border-bottom-color: #ffffff !important;
}

.popover.left .arrow::after {
    border-left-color: #ffffff !important;
}

.popover.right .arrow::after {
    border-right-color: #ffffff !important;
}

/* Header do popover - Azul info bonito */
.popover-title {
    background-color: #5bc0de !important; /* Azul info */
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
    opacity: 1 !important; /* Sem transparência */
    z-index: inherit !important;
}

/* Conteúdo do popover */
.popover-content {
    font-size: 12px !important;
    line-height: 1.6 !important;
    background-color: #ffffff !important; /* Branco sólido */
    opacity: 1 !important; /* Sem transparência */
    z-index: inherit !important;
}

/* Ícones dentro do conteúdo */
.popover-content .fa {
    margin-right: 5px;
    color: #5bc0de;
}

/* Garantir que Tooltips também tenham z-index alto e opacidade total */
/* Tooltip deve ter z-index 1 a mais que o popover global (9999999 + 1) */
.tooltip { 
    z-index: 10000000 !important; 
    opacity: 1 !important;
}

/* ✅ CORREÇÃO ADICIONAL: Forçar opacidade e z-index em todos os estados do tooltip */
.tooltip.fade.in,
.tooltip.fade,
.tooltip.in,
.tooltip.top,
.tooltip.bottom,
.tooltip.left,
.tooltip.right {
    z-index: 10000000 !important;
    opacity: 1 !important;
}

/* =====================================================================
 * TbButtonColumn / Ações em grids: ícones "estilo Glyphicon" (Bootstrap 3)
 *
 * Objetivo:
 * - Permitir usar FontAwesome Free em botões de ação de grid mantendo o
 *   mesmo "layout visual" dos glyphicons (ícone simples, azul do link,
 *   sem background, alinhamento consistente).
 *
 * Escopo:
 * - Apenas dentro de `td.button-column` (Yii/TbButtonColumn), para não
 *   impactar outros usos de FontAwesome no sistema.
 * ===================================================================== */
.grid-view td.button-column a {
    text-decoration: none;
    display: inline-block;
    padding: 0 2px;
}

.grid-view td.button-column a + a {
    margin-left: 6px;
}

.grid-view td.button-column a > .glyphicon,
.grid-view td.button-column a > .fa,
.grid-view td.button-column a > .fas,
.grid-view td.button-column a > .far,
.grid-view td.button-column a > .fab,
.grid-view td.button-column a > .fa-solid,
.grid-view td.button-column a > .fa-regular,
.grid-view td.button-column a > .fa-brands,
.grid-view td.button-column a > .svg-inline--fa {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    position: relative;
    top: 1px;
    color: inherit;
}

.grid-view td.button-column a > .svg-inline--fa {
    height: 14px;
}

/* =====================================================================
 * Variações de cor (somente cor do ícone/link, SEM background)
 *
 * Como usar na TbButtonColumn (options['class']):
 * - 'class' => 'ww-icon-success'  (verde)
 * - 'class' => 'ww-icon-info'     (azul info)
 * - 'class' => 'ww-icon-primary'  (azul primary)
 * - 'class' => 'ww-icon-danger'   (vermelho)
 * - 'class' => 'ww-icon-warning'  (amarelo/alerta)
 *
 * Aliases pedidos:
 * - error  -> danger
 * - alert  -> warning
 *
 * Também aceitamos classes Bootstrap 3:
 * - text-success, text-info, text-primary, text-danger, text-warning
 *
 * Importante:
 * - Dentro de td.button-column, se alguém usar 'btn btn-...' por engano,
 *   removemos o fundo/borda para manter o padrão “ícone simples”.
 * ===================================================================== */
.grid-view td.button-column a.btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 2px !important;
    line-height: inherit !important;
}

.grid-view td.button-column a.ww-icon-success,
.grid-view td.button-column a.text-success,
.grid-view td.button-column a.btn-success {
    color: #3c763d !important;
}

.grid-view td.button-column a.ww-icon-info,
.grid-view td.button-column a.text-info,
.grid-view td.button-column a.btn-info {
    color: #31708f !important;
}

.grid-view td.button-column a.ww-icon-primary,
.grid-view td.button-column a.text-primary,
.grid-view td.button-column a.btn-primary {
    color: #337ab7 !important;
}

.grid-view td.button-column a.ww-icon-danger,
.grid-view td.button-column a.ww-icon-error,
.grid-view td.button-column a.text-danger,
.grid-view td.button-column a.btn-danger,
.grid-view td.button-column a.delete {
    color: #a94442 !important;
}

.grid-view td.button-column a.ww-icon-warning,
.grid-view td.button-column a.ww-icon-alert,
.grid-view td.button-column a.text-warning,
.grid-view td.button-column a.btn-warning {
    color: #8a6d3b !important;
}

/* Hover/focus: mantém “ícone simples” e melhora contraste */
.grid-view td.button-column a.ww-icon-success:hover,
.grid-view td.button-column a.ww-icon-success:focus,
.grid-view td.button-column a.text-success:hover,
.grid-view td.button-column a.text-success:focus,
.grid-view td.button-column a.btn-success:hover,
.grid-view td.button-column a.btn-success:focus {
    color: #2b542c !important;
}

.grid-view td.button-column a.ww-icon-info:hover,
.grid-view td.button-column a.ww-icon-info:focus,
.grid-view td.button-column a.text-info:hover,
.grid-view td.button-column a.text-info:focus,
.grid-view td.button-column a.btn-info:hover,
.grid-view td.button-column a.btn-info:focus {
    color: #245269 !important;
}

.grid-view td.button-column a.ww-icon-primary:hover,
.grid-view td.button-column a.ww-icon-primary:focus,
.grid-view td.button-column a.text-primary:hover,
.grid-view td.button-column a.text-primary:focus,
.grid-view td.button-column a.btn-primary:hover,
.grid-view td.button-column a.btn-primary:focus {
    color: #286090 !important;
}

.grid-view td.button-column a.ww-icon-danger:hover,
.grid-view td.button-column a.ww-icon-danger:focus,
.grid-view td.button-column a.ww-icon-error:hover,
.grid-view td.button-column a.ww-icon-error:focus,
.grid-view td.button-column a.text-danger:hover,
.grid-view td.button-column a.text-danger:focus,
.grid-view td.button-column a.btn-danger:hover,
.grid-view td.button-column a.btn-danger:focus,
.grid-view td.button-column a.delete:hover,
.grid-view td.button-column a.delete:focus {
    color: #843534 !important;
}

.grid-view td.button-column a.ww-icon-warning:hover,
.grid-view td.button-column a.ww-icon-warning:focus,
.grid-view td.button-column a.ww-icon-alert:hover,
.grid-view td.button-column a.ww-icon-alert:focus,
.grid-view td.button-column a.text-warning:hover,
.grid-view td.button-column a.text-warning:focus,
.grid-view td.button-column a.btn-warning:hover,
.grid-view td.button-column a.btn-warning:focus {
    color: #66512c !important;
}

.tab-content {
	background-color: var(--bs-pastel-bg-subtle);
}

.tab-pane {
	border: 1px solid var(--bs-gray-border);
	border-top: none;
}

.item-produto .text-center {
	margin-left: 2em !important;
}

.panel-group {
	margin-bottom: 5px;
}

#content {
	float: left;
	width: 100%;
	border-radius: 5px;
	margin: 10px 0;
}

#footer {
	background: var(--bs-gray-darker);
	padding: 15px 0;
	border-radius: 6px;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

#respostaslist {
	margin-top: 10px;
}

.detail-view {
	width: 100%;
}

.center {
	margin: auto;
	float: none;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.img-center {
	margin: auto;
	display: block;
}

#formulario {
	width: 220px;
	margin: 0 auto;
}

.operacoes a {
	padding: 8px 15px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.btn-operacoes {
	padding: 8px 15px;
	background-color: var(--bs-gray-light);
	display: block;
	cursor: auto;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.btn-operacoes:hover {
	background-color: var(--bs-gray-light);
	text-decoration: none;
	cursor: pointer;
}

#chamados-recebidos-enviados .view {
	margin: 5px 2px;
	background: var(--bs-gray-light);
	padding: 10px 5px;
	border-radius: 6px;
	border: 1px solid var(--bs-gray-border);
}

.view-dados {
	margin: 10px;
	float: left;
	padding: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 6px;
}

.os,
.end_destino,
.end_origem {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}

.os > div,
.valor > div,
.end_destino > div,
.end_origem > div {
	width: 25%;
	float: left;
}

.form-vertical {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 10px 0px;
	width: 100%;
}

.model {
	float: left;
	width: 300px;
	padding: 10px;
	margin: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

.maps {
	float: left;
	width: 400px;
	height: 400px;
	padding: 10px;
	margin: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

.tab-content {
	background-color: rgba(221, 221, 221, 0.33);
}

.item-produto .text-center {
	margin-left: 2em !important;
}

.tab-pane {
	border-left: 1px solid var(--bs-gray-border);
	border-right: 1px solid var(--bs-gray-border);
	border-bottom: 1px solid var(--bs-gray-border);
}

.panel-group {
	margin-bottom: 5px;
}

#content {
	float: left;
	width: 100%;
	border-radius: 5px;
	margin: 10px 0;
}

#footer {
	background: var(--bs-gray-light);
	padding: 15px 0;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#respostaslist {
	margin-top: 10px;
}

.detail-view {
	width: 100%;
}

.center {
	margin: auto;
}

.img-center {
	margin: auto;
	display: block;
}

#formulario {
	width: 220px;
	margin: 0 auto;
}

.operacoes {
	float: right;
	background-color: var(--bs-gray-light);
	position: relative;
	right: 250px;
	z-index: 1;
	margin: 10px 0;
	border-radius: 4px;
	width: 300px;
	right: auto;
}

.operacoes a {
	padding: 8px 15px;
}

.btn-operacoes {
	padding: 8px 15px;
	background-color: var(--bs-gray-light);
	display: block;
	cursor: auto;
	border-radius: 4px;
}

.btn-operacoes:hover {
	background-color: var(--bs-gray-light);
	text-decoration: none;
	cursor: pointer;
}

#menu-operacoes {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.form-actions {
	float: left;
	width: 100%;
	margin: 5px 0px 5px 0px;
	float: left;
	display: block;
}

div > .view {
	margin: 10px 0;
	background: var(--bs-gray-light);
	padding: 10px 5px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.view-dados {
	margin: 10px;
	float: left;
	padding: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 6px;
}

.os {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}
.os > div,
.valor > div,
end_destino > div,
end_origem > div {
	width: 25%;
	float: left;
}

.end_destino {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}
.end_origem {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}

.form-vertical {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

.mtp {
	margin-top: 8px;
}

.model {
	float: left;
	width: 300px;
	padding: 10px;
	margin: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

.maps {
	float: left;
	width: 400px;
	height: 400px;
	padding: 10px;
	margin: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: 0;
	margin-left: -1px; /* Sobreposição mínima para eliminar gap */
	padding: 0;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

/* Garantir que o submenu permaneça aberto quando hover no submenu */
.dropdown-submenu > .dropdown-menu:hover {
	display: block;
}

/* Área invisível de hover para conectar item ao submenu (elimina gap) */
.dropdown-submenu:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: 2px;
	height: 100%;
	z-index: 1001;
	background: transparent;
}

.dropdown-submenu > a:after {
	display: block;
	content: ' ';
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: var(--bs-gray-border);
	margin-top: 5px;
	margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
	border-left-color: var(--bs-white);
}

.dropdown-submenu.pull-left {
	float: none !important;
}

.dropdown-submenu.pull-left > .dropdown-menu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: -1px; /* Sobreposição mínima para eliminar gap */
	padding: 0;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}

/* Área invisível de hover para pull-left (elimina gap) */
.dropdown-submenu.pull-left:hover::after {
	left: auto;
	right: 100%;
}

/* ===========================================
   MELHORIAS MOBILE - MENU E SUBMENUS
   Baseado em boas práticas UX mobile 2024
   =========================================== */

/* Media query para dispositivos móveis */
@media (max-width: 768px) {
	/* Desabilitar hover no mobile - usar apenas touch */
	.dropdown-submenu:hover > .dropdown-menu {
		display: none !important;
	}
	
	.dropdown-submenu > .dropdown-menu:hover {
		display: none !important;
	}
	
	/* Área de toque mínima de 48x48px (padrão recomendado Android/iOS - 48dp/48pt) */
	.navbar-nav > li > a,
	.navbar-nav .dropdown-menu > li > a,
	.dropdown-submenu > a {
		min-height: 48px !important; /* Aumentado de 44px para 48px (padrão recomendado) */
		padding: 14px 20px 14px 16px !important; /* Padding-right aumentado para 20px para dar espaço ao indicador */
		font-size: 16px !important; /* Tamanho mínimo para evitar zoom automático no iOS */
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
		tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
		overflow: visible !important; /* Garantir que indicadores não sejam cortados */
	}

	/*
	 * CORREÇÃO (mobile): itens com ícone (<i>) ficavam desalinhados.
	 * Motivo: com flex + justify-content: space-between, o <i> vira um flex-item
	 * e o texto vira outro flex-item, indo parar no lado direito.
	 * Solução: para links que começam com <i>, alinhar conteúdo à esquerda e usar gap.
	 * (Setas/caret continuam funcionando porque são posicionadas como absolute.)
	 */
	.navbar-nav > li > a:has(> i),
	.navbar-nav .dropdown-menu > li > a:has(> i),
	.dropdown-submenu > a:has(> i),
	.navbar-collapse .navbar-nav > li > a:has(> i),
	.navbar-collapse .navbar-nav .dropdown-menu > li > a:has(> i),
	.navbar-collapse .dropdown-submenu > a:has(> i) {
		justify-content: flex-start !important;
		gap: 10px !important;
	}

	.navbar-nav > li > a > i,
	.navbar-nav .dropdown-menu > li > a > i,
	.dropdown-submenu > a > i,
	.navbar-collapse .navbar-nav > li > a > i,
	.navbar-collapse .navbar-nav .dropdown-menu > li > a > i,
	.navbar-collapse .dropdown-submenu > a > i {
		flex: 0 0 auto !important;
		width: 20px !important; /* mantém coluna do ícone consistente */
		text-align: center !important;
	}
	
	/* Submenus no mobile: estilo acordeão (vertical, abaixo do item pai) */
	.dropdown-submenu > .dropdown-menu {
		position: static !important;
		left: auto !important;
		right: auto !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		float: none !important;
		display: none !important; /* Oculto por padrão, JavaScript controla */
		border: none !important;
		box-shadow: none !important;
		background-color: rgba(0, 0, 0, 0.15) !important;
		padding-left: 20px !important;
		border-radius: 0 !important;
		transform: none !important;
		animation: none !important;
	}
	
	/* Submenu visível quando tem classe active */
	.dropdown-submenu.active > .dropdown-menu {
		display: block !important;
	}
	
	/* Ícone indicador de submenu (seta) - MELHORADO */
	/* Primeiro nível: Bootstrap usa .caret, vamos melhorar sua visibilidade */
	.navbar-nav > .dropdown > a .caret,
	.navbar-nav > li.dropdown > a .caret,
	.navbar-collapse .navbar-nav > .dropdown > a .caret,
	.navbar-collapse .navbar-nav > li.dropdown > a .caret {
		display: inline-block !important;
		width: 0 !important;
		height: 0 !important;
		margin-left: auto !important;
		margin-right: 15px !important; /* Aumentado para evitar corte */
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		vertical-align: middle !important;
		border-top: 10px solid rgba(255, 255, 255, 0.95) !important; /* Aumentado para melhor visibilidade */
		border-right: 7px solid transparent !important;
		border-bottom: 0 solid transparent !important;
		border-left: 7px solid transparent !important;
		border-style: solid !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition: transform 0.3s ease !important;
		flex-shrink: 0 !important;
		overflow: visible !important;
		position: absolute !important;
		right: 10px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
	
	/* Rotacionar caret quando submenu está aberto (primeiro nível) */
	.navbar-nav > .dropdown.open > a .caret,
	.navbar-nav > .dropdown.active > a .caret,
	.navbar-nav > li.dropdown.open > a .caret,
	.navbar-nav > li.dropdown.active > a .caret {
		transform: rotate(180deg) !important;
		border-top-color: rgba(255, 255, 255, 1) !important;
	}
	
	/* Itens aninhados: submenus dentro de outros submenus - SOBRESCREVER REGRA EXISTENTE */
	/* A regra .dropdown-submenu > a:after com content: ' ' está sendo sobrescrita aqui */
	.dropdown-menu .dropdown-submenu > a::after,
	.navbar-nav .dropdown-menu .dropdown-submenu > a::after,
	.navbar-nav .dropdown-menu li.dropdown-submenu > a::after,
	.dropdown-submenu > a::after,
	.navbar-collapse .dropdown-menu .dropdown-submenu > a::after,
	.navbar-collapse .navbar-nav .dropdown-menu .dropdown-submenu > a::after,
	.navbar-collapse .navbar-nav .dropdown-menu li.dropdown-submenu > a::after,
	.navbar-collapse .dropdown-submenu > a::after {
		content: '▾' !important;
		font-size: 26px !important; /* Aumentado para melhor visibilidade */
		font-weight: bold !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		transition: transform 0.3s ease !important;
		display: inline-block !important;
		opacity: 1 !important;
		visibility: visible !important;
		color: rgba(255, 255, 255, 0.95) !important;
		line-height: 1 !important;
		vertical-align: middle !important;
		min-width: 0 !important;
		text-align: center !important;
		flex-shrink: 0 !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		border: none !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
		position: absolute !important;
		right: 10px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
	
	/* Garantir que o link tenha display flex para alinhar corretamente */
	.navbar-nav > li.dropdown > a,
	.navbar-nav > .dropdown > a,
	.navbar-collapse .navbar-nav > li.dropdown > a,
	.navbar-collapse .navbar-nav > .dropdown > a {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding-right: 35px !important; /* Padding-right aumentado para dar espaço ao indicador */
		overflow: visible !important; /* Garantir que o indicador não seja cortado */
		position: relative !important;
	}
	
	.dropdown-submenu > a,
	.navbar-nav .dropdown-menu .dropdown-submenu > a,
	.navbar-nav .dropdown-menu li.dropdown-submenu > a {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding-right: 35px !important; /* Padding-right aumentado para dar espaço ao indicador */
		overflow: visible !important; /* Garantir que o indicador não seja cortado */
		position: relative !important;
	}
	
	/* Indentação visual para submenus (primeiro nível de submenu) */
	.dropdown-menu > li.dropdown-submenu > a,
	.navbar-nav .dropdown-menu > li.dropdown-submenu > a,
	.navbar-nav .dropdown-menu li.dropdown-submenu > a,
	.navbar-collapse .dropdown-menu > li.dropdown-submenu > a,
	.navbar-collapse .navbar-nav .dropdown-menu > li.dropdown-submenu > a,
	.navbar-collapse .navbar-nav .dropdown-menu li.dropdown-submenu > a {
		padding-left: 30px !important; /* Indentação para indicar submenu */
	}
	
	/* Indentação visual para sub-submenus (segundo nível de submenu) */
	.dropdown-menu .dropdown-menu > li.dropdown-submenu > a,
	.navbar-nav .dropdown-menu .dropdown-menu > li.dropdown-submenu > a,
	.navbar-nav .dropdown-menu .dropdown-menu li.dropdown-submenu > a,
	.navbar-collapse .dropdown-menu .dropdown-menu > li.dropdown-submenu > a,
	.navbar-collapse .navbar-nav .dropdown-menu .dropdown-menu > li.dropdown-submenu > a,
	.navbar-collapse .navbar-nav .dropdown-menu .dropdown-menu li.dropdown-submenu > a {
		padding-left: 50px !important; /* Indentação maior para indicar sub-submenu */
	}
	
	/* Indentação visual para itens diretos dentro de submenus (links finais) */
	.dropdown-menu .dropdown-menu > li > a,
	.navbar-nav .dropdown-menu .dropdown-menu > li > a,
	.navbar-nav .dropdown-menu .dropdown-menu li > a,
	.navbar-collapse .dropdown-menu .dropdown-menu > li > a,
	.navbar-collapse .navbar-nav .dropdown-menu .dropdown-menu > li > a,
	.navbar-collapse .navbar-nav .dropdown-menu .dropdown-menu li > a {
		padding-left: 50px !important; /* Indentação maior para indicar sub-submenu */
	}
	
	/* Rotacionar seta quando submenu está aberto (itens aninhados) */
	.dropdown-submenu.active > a::after {
		transform: rotate(180deg) !important;
		color: rgba(255, 255, 255, 1) !important;
	}
	
	/* Feedback visual ao toque */
	.navbar-nav > li > a:active,
	.navbar-nav .dropdown-menu > li > a:active,
	.dropdown-submenu > a:active {
		background-color: rgba(255, 255, 255, 0.25) !important;
		transform: scale(0.98) !important;
		transition: all 0.1s ease !important;
	}
	
	/* Remover animações de hover no mobile */
	.navbar-nav > li > a:hover,
	.navbar-nav .dropdown-menu > li > a:hover {
		transform: none !important;
		padding-left: 16px !important;
		background-color: rgba(255, 255, 255, 0.1) !important;
	}
	
	/* Remover efeito de brilho no mobile */
	.navbar-nav > li > a::before,
	.navbar-nav .dropdown-menu > li > a::before {
		display: none !important;
	}
	
	/* Remover animação de ícones no mobile */
	.navbar-nav > li > a:hover i,
	.navbar-nav .dropdown-menu > li > a:hover i {
		transform: none !important;
	}
	
	/* Espaçamento adequado entre itens do menu */
	.navbar-nav > li {
		margin-bottom: 2px;
	}
	
	.navbar-nav .dropdown-menu > li {
		margin-bottom: 1px;
	}
	
	/* Dropdown principal também precisa de área de toque adequada */
	.dropdown > a {
		min-height: 44px !important;
		padding: 12px 16px !important;
	}
	
	/* Menu colapsado no mobile deve ocupar altura total quando aberto */
	.navbar-collapse.in,
	.navbar-collapse.collapsing {
		max-height: 100vh !important;
		height: 100vh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 1040 !important;
		background-color: #222 !important; /* Cor do navbar-inverse */
		padding-top: 50px !important; /* Espaço para o header */
	}
	
	/* Quando o menu está fechado, garantir que o collapse não ocupe espaço */
	/* MAS manter a logomarca visível mesmo quando o collapse está fechado */
	.navbar-collapse.collapse:not(.in):not(.collapsing) {
		display: none !important;
	}
	
	/* EXCEÇÃO: Logomarca sempre visível, mesmo quando collapse está fechado */
	.navbar-collapse.collapse:not(.in):not(.collapsing) .menu-logomarca-a {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: fixed !important; /* Fixo para aparecer acima de tudo */
		left: 50% !important;
		transform: translateX(-50%) !important;
		top: 0 !important;
		z-index: 1052 !important; /* Acima do botão hamburger */
		height: 50px !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	.navbar-collapse.collapse:not(.in):not(.collapsing) .menu-logomarca-a .menu-logomarca,
	.navbar-collapse.collapse:not(.in):not(.collapsing) .menu-logomarca-a img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Header do navbar no mobile - centralizar logo */
	.navbar-header {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		position: relative !important;
		height: 50px !important;
		z-index: 1050 !important; /* Acima do menu quando aberto */
	}
	
	/* Logo centralizada no mobile - SEMPRE VISÍVEL */
	.menu-logomarca-a {
		position: absolute !important;
		left: 50% !important;
		-webkit-transform: translateX(-50%) !important;
		-moz-transform: translateX(-50%) !important;
		-ms-transform: translateX(-50%) !important;
		-o-transform: translateX(-50%) !important;
		transform: translateX(-50%) !important;
		top: 0 !important;
		height: 50px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 1051 !important; /* Acima do header */
		margin: 0 !important;
		padding: 0 !important;
		visibility: visible !important;
		opacity: 1 !important;
		cursor: pointer !important;
		pointer-events: auto !important;
	}
	
	/* Garantir que a logomarca apareça mesmo quando o collapse está fechado */
	.navbar-collapse.collapse:not(.in):not(.collapsing) .menu-logomarca-a,
	.navbar-collapse:not(.in) .menu-logomarca-a {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		top: 0 !important;
		z-index: 1051 !important;
	}
	
	/* Garantir que a imagem da logomarca também apareça */
	.menu-logomarca-a .menu-logomarca,
	.menu-logomarca-a img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		max-width: 100px !important;
		max-height: 50px !important;
		cursor: pointer !important;
		pointer-events: auto !important;
	}
	
	/* Garantir que o link dentro da logomarca seja clicável */
	.menu-logomarca-a > a,
	.menu-logomarca-a-clone > a,
	.menu-logomarca-a-clone {
		cursor: pointer !important;
		pointer-events: auto !important;
		text-decoration: none !important;
	}
	
	/* Botão hamburger no mobile - posicionado à direita e sempre visível */
	.navbar-toggle {
		position: fixed !important; /* Fixed para ficar acima do menu */
		right: 15px !important;
		top: 8px !important; /* Posição fixa no topo */
		z-index: 1052 !important; /* Acima de tudo (menu tem 1040, header tem 1050) */
		margin: 0 !important;
		background-color: rgba(34, 34, 34, 0.9) !important; /* Fundo semi-transparente para visibilidade */
		border: 1px solid rgba(255, 255, 255, 0.35) !important;
	}
	
	/* Remover área de hover invisível no mobile */
	.dropdown-submenu:hover::after,
	.dropdown-submenu.pull-left:hover::after {
		display: none !important;
	}
}

#page {
	min-height: 100%;
	margin-bottom: 20px;
}

.language {
	position: absolute;
	z-index: 1031;
	top: 8px;
	right: 10px;
}

#footer {
	background: var(--bs-gray-darker);
	padding: 15px 0;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}
#sub-footer {
	height: 200px;
}

.center {
	margin: auto;
	float: none;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.img-center {
	margin: auto;
	display: block;
}

#formulario {
	width: 220px;
	margin: 0 auto;
}

.operacoes a {
	padding: 8px 15px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.btn-operacoes {
	padding: 8px 15px;
	display: block;
	cursor: auto;
	border-radius: 4px;
}

.btn-operacoes:hover {
	text-decoration: none;
	cursor: pointer;
}

#chamados-recebidos-enviados .view {
	margin: 5px 2px 5px 2px;
	background: var(--bs-gray-light);
	padding: 10px 5px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid var(--bs-gray-border);
}

.view-produto-image {
	margin: 10px;
	float: left;
	max-width: 250px;
	max-height: 250px;
	padding: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 6px;
}

.view-dados {
	margin: 10px;
	float: left;
	padding: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 6px;
}

.os {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}
.os > div,
.valor > div,
end_destino > div,
end_origem > div {
	width: 25%;
	float: left;
}
.end_destino {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}
.end_origem {
	float: left;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
	padding: 5px;
}

.form-vertical {
	float: left;
	border-radius: 5px;
	padding: 10px 0px;
	width: 100%;
}

.model {
	float: left;
	width: 300px;
	padding: 10px;
	margin: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

.maps {
	float: left;
	width: 400px;
	height: 400px;
	padding: 10px;
	margin: 10px;
	background-color: var(--bs-gray-light);
	border-radius: 5px;
}

h1 {
	margin: 0px 0px 14px;
	text-align: left;
	text-transform: uppercase;
}

#fornecedor-has-bancarios {
	margin-bottom: 10px;
	border-radius: 5px;
}

.contrato-clausulas {
	width: 100%;
	float: left;
}

.index-view {
	padding: 0;

	margin: 0;
}

#util-box {
	background-color: var(--bs-dark-transparent);
	background: var(--bs-dark-transparent);
	color: var(--bs-dark-transparent);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 11000;
	display: none;
}

#login-formulario {
	position: fixed;
	z-index: 11001;
	background-color: var(--bs-white);
	padding: 71px;
	border-radius: 78px;
	margin: auto;

	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	width: 221px;
	padding-bottom: 10px;
}

#login-logo {
	margin-bottom: 20px;
}

#modal-chat-input {
	width: 82%;

	margin-top: 9px;
}

#modal-chat-text-area {
	width: 97%;
}

.shadow {
	width: 288px;
	position: absolute;
	bottom: -10px;
	background: var(--bs-black);
	z-index: -1;

	box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	border-radius: 50%;
}

#sidebar {
	float: left;

	width: 100%;
}

#app-content {
	width: 920px;
	height: 200px;
	margin: auto;
}

#app-content img:hover {
	opacity: 0.4;
}

.app-link label {
	text-align: center;
	color: var(--bs-black);
	font-family: monospace;
	font-size: larger;
}

#grafico {
	width: 400px;
}

.view-chamado {
	width: 78%;
}

.view-chamado > span {
	margin: 10px;
}

#chamados-usuario {
	background-color: rgba(255, 255, 255, 0.84);
	border-radius: 15px;
}

#chamados-alvo {
	background-color: rgba(255, 255, 255, 0.84);
	border-radius: 15px;
}

tr.pago,
tr.entregue,
tr.ativo,
.view-finalizado {
	background-color: var(--bs-green-lighter);
}

tr.aberto,
tr.prospectar,
.view-aberto,
#produto-grid .maximo,
#centro-de-estoque-grid .maximo,
#item-grid .maximo,
#prospeccao-grid .prospeccao,
#producao-grid .situacao-3 {
	background-color: var(--bs-yellow-lighter);
}

tr.cancelado,
tr.inativo,
.view-cancelado,
#manutencao-grid .situacao-3,
#ponto-fluxo-grid .situacao-2 {
	background-color: var(--bs-gray-light);
}

tr.desinteressado,
tr.produto,
#produto-grid .minimo,
#centro-de-estoque-grid .minimo,
#item-grid .minimo {
	background-color: var(--bs-red-lighter);
}

#manutencao-grid .situacao-1,
#produto-grid .medio,
#centro-de-estoque-grid .medio,
#item-grid .medio,
#prospeccao-grid .cliente,
#producao-grid .situacao-1,
#produto-identidade-grid .situacao-1,
#produto-estoque-fluxo-grid .situacao-1 {
	background-color: var(--bs-green-lighter);
}

#manutencao-grid .situacao-2 {
	background-color: var(--bs-yellow-lighter);
}

#produto-identidade-grid .situacao-2 {
	background-color: var(--bs-gray-mid);
}

.assign-link {
	background-color: var(--bs-danger);
}

.revoke-link {
	background-color: var(--bs-success);
}

tr.nivel-azul {
	background-color: var(--bs-primary);
}

tr.nivel-verde {
	background-color: var(--bs-info-light);
}

tr.nivel-vermelho {
	background-color: var(--bs-red-lighter);
}

.view-aberto {
	background-color: var(--bs-warning-soft);
}

.view-cancelado {
	background-color: var(--bs-gray-mid);
}

.view-finalizado {
	background-color: var(--bs-green-lighter);
}

.assign-link {
	background-color: var(--bs-danger);
	display: block;
	text-align: center;
	color: var(--bs-white);
}

.revoke-link {
	background-color: var(--bs-success);
	display: block;
	text-align: center;
	color: var(--bs-white);
}

div.produto-dados {
	width: 90%;
	float: left;
}

div.produto-btn {
	width: 10%;
	float: left;
}

div.view.produto-prateleira {
	width: 99%;
	background-color: var(--bs-gray-light);
	border: 1px solid var(--bs-gray-border);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.produto-plus {
	float: right;
	font-weight: bold;
	line-height: 20px;
	color: var(--bs-black);
	filter: alpha(opacity=20);
	border-radius: 40px;
}

.full-width {
	width: 100%;
	float: left;
}

.brand {
	padding: 0 !important;
}

#badge-chamado {
	background-color: var(--bs-primary);
}

#badge-vendas {
	background-color: var(--bs-coral);
}

#badge-financeiro {
	background-color: var(--bs-success);
}

#badge-calendario {
	background-color: var(--bs-gray-dark);
}

.badge-icon {
	padding: 0px;
	min-height: 100px;
	height: 100px;
	color: var(--bs-white);
	display: flex;
	align-items: stretch;
}

.badge-icon > div.col-md-4 {
	display: flex;
	align-items: stretch;
	padding: 0;
	height: 100%;
}

/* Responsividade para badges */
@media (max-width: 1200px) {
	.badge-icon {
		min-height: 95px;
		height: 95px;
	}
	
	.badge-icon i.fas,
	.badge-icon i.far,
	.badge-icon i.fab {
		font-size: 48px;
	}
	
	.badge-icon label {
		font-size: 12px;
	}
	
	.badge-icon > div.item-fade {
		padding: 4px 3px;
		min-height: 95px;
	}
	
	.badge-icon > div.item-fade a {
		gap: 5px;
	}
}

@media (max-width: 992px) {
	.badge-icon {
		min-height: 90px;
		height: 90px;
	}
	
	.badge-icon i.fas,
	.badge-icon i.far,
	.badge-icon i.fab {
		font-size: 42px;
	}
	
	.badge-icon label {
		font-size: 11px;
	}
	
	.badge-icon > div.item-fade {
		padding: 3px 2px;
		min-height: 90px;
	}
	
	.badge-icon > div.item-fade a {
		gap: 4px;
	}
}

@media (max-width: 768px) {
	.badge-icon {
		min-height: 85px;
		height: 85px;
	}
	
	.badge-icon i.fas,
	.badge-icon i.far,
	.badge-icon i.fab {
		font-size: 38px;
	}
	
	.badge-icon label {
		font-size: 10px;
	}
	
	.badge-icon > div.item-fade {
		padding: 2px 2px;
		min-height: 85px;
	}
	
	.badge-icon > div.item-fade a {
		gap: 3px;
	}
}

#badge-data {
	font-size: 40px;

	text-align: center;
	margin-left: 30%;
}

.badge-high {
	font-size: 40px;

	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	line-height: 50px;
}

#calendar-badge-list > div > a {
	color: var(--bs-white);
	text-decoration: none;
}

#calendar-badge-list > div > a:hover {
	color: var(--bs-primary-hover);
	text-decoration: none;
}

.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;

	border: 1px solid var(--bs-gray-border);
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
	height: 200px;
	border: 0px;
}

.menu-logomarca {
	max-width: 100px;
	max-height: 50px;
}
.menu-logomarca-a > a {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;

	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front,
.back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
}

.front {
	z-index: 2;
}

.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

#container-middle {
	margin-top: 15px;
}

#container-middle h4 {
	margin: 5px 0px 0px 10px;
	color: rgb(175, 175, 175);
}

.view-chamado-index {
	float: left;
	margin: 5px 10px 5px 10px;
	border-style: solid;
	border-color: var(--bs-primary);
	border-style: solid;
	border-width: 1px;
	border-color: var(--bs-gray-border);
	border-radius: 5px;
	min-height: 200px;
	padding: 12px;
}

#menu-my-image {
	width: 20px;
	height: 20px;
}

.image-center {
	margin: auto;
	display: block;
	height: 100%;
}

#chamados-usuario img,
#chamados-alvo img {
	width: 100%;
	max-height: 100px;
	max-width: 100px;
}

#chamados-usuario label,
#chamados-alvo label {
	padding: 0px 0px 0px 5px;

	font-size: xx-small;
}

#empresa-form img {
	max-width: 50px;
	max-height: 50px;
}

a.search-button-slide.btn {
	float: right;
}

.fieldset {
	border: 1px solid var(--bs-gray-border);
	border-radius: 5px;
	margin: 5px;
	padding: 10px;
	background-color: rgba(221, 221, 221, 0.33);
	margin: auto;
}

.grafico {
	margin-top: 5px;
	margin-bottom: 5px;
}

.situacao-success {
	background-color: var(--bs-success);
}
.situacao-alert {
	background-color: var(--bs-gray-light);
}

#venda-grid .situacao-2 {
	background-color: var(--bs-warning);
}
#venda-grid .situacao- {
	background-color: var(--bs-warning);
}
#venda-grid .situacao-1 {
	background-color: var(--bs-success);
}
#venda-grid .entregar {
	background-color: var(--bs-danger);
}

#nfe-grid .situacao- {
	background-color: var(--bs-warning);
}
#nfe-grid .situacao-0 {
	background-color: var(--bs-warning);
}
#nfe-grid .situacao-1 {
	background-color: var(--bs-info);
}
#nfe-grid .situacao-2 {
	background-color: var(--bs-primary);
}
#nfe-grid .situacao-3 {
	background-color: var(--bs-success);
}
#nfe-grid .situacao-4 {
	background-color: var(--bs-danger);
}

#caixa-conta-grid .situacao-2 {
	background-color: var(--bs-gray-dark);
}
#caixa-conta-grid .situacao-1 {
	background-color: var(--bs-warning);
}
#caixa-conta-grid .situacao-negociado {
	background-color: var(--bs-danger-border);
}
#caixa-conta-grid .situacao-quitado {
	background-color: var(--bs-success);
}

#venda-comissao-grid .situacao-2 {
	background-color: var(--bs-warning);
}
#venda-comissao-grid .situacao-1 {
	background-color: var(--bs-green-lighter);
}

#funcionario-grid .ponto-1 {
	background-color: var(--bs-green-lighter);
}
#funcionario-grid .ponto-2 {
	background-color: var(--bs-yellow-lighter);
}

#pagamento-forma-grid .situacao-2 {
	background-color: var(--bs-gray-dark);
}
#pagamento-forma-grid .situacao-1 {
	background-color: var(--bs-warning);
}

.tipo-conta-entrada {
	background-color: var(--bs-green-lighter);
}
.tipo-conta-saida {
	background-color: var(--bs-green-lighter);
}

#produto-grid .maximo {
	background-color: var(--bs-yellow-lighter);
}
#produto-grid .medio {
	background-color: var(--bs-green-lighter);
}
#produto-grid .minimo {
	background-color: var(--bs-red-lighter);
}

#centro-de-estoque-grid .maximo {
	background-color: var(--bs-yellow-lighter);
}
#centro-de-estoque-grid .medio {
	background-color: var(--bs-green-lighter);
}
#centro-de-estoque-grid .minimo {
	background-color: var(--bs-red-lighter);
}
#centro-de-estoque-grid #produto-grid {
	margin: 0px 50px;
	padding: 0px 50px;
}

#produto-identidade-grid .situacao-1 {
	background-color: var(--bs-green-lighter);
}
#produto-identidade-grid .situacao-2 {
	background-color: var(--bs-gray-dark);
}

#item-grid .maximo {
	background-color: var(--bs-yellow-lighter);
}
#item-grid .medio {
	background-color: var(--bs-green-lighter);
}
#item-grid .minimo {
	background-color: var(--bs-red-lighter);
}

#prospeccao-grid .prospeccao {
	background-color: var(--bs-yellow-lighter);
}
#prospeccao-grid .cliente {
	background-color: var(--bs-green-lighter);
}

#produto-estoque-fluxo-grid .situacao-0 {
	background-color: var(--bs-warning);
}
#produto-estoque-fluxo-grid .situacao-1 {
	background-color: var(--bs-green-lighter);
}

#ponto-fluxo-grid .situacao-1 {
	background-color: var(--bs-success);
}
#ponto-fluxo-grid .situacao-2 {
	background-color: var(--bs-gray-light);
}
#ponto-fluxo-grid .situacao-3 {
	background-color: var(--bs-warning);
}
#ponto-fluxo-grid .situacao-0 {
	background-color: var(--bs-warning);
}

#producao-grid .situacao-3 {
	background-color: var(--bs-yellow-lighter);
}
#producao-grid .situacao-2 {
	background-color: var(--bs-danger);
}
#producao-grid .situacao-1 {
	background-color: var(--bs-green-lighter);
}

#item-fluxo-grid .tipo-E {
	background-color: var(--bs-danger);
}
#item-fluxo-grid .tipo-S {
	background-color: var(--bs-green-lighter);
}

.super-condensed {
	font-size: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.super-condensed td,
.super-condensed th,
.super-condensed table td,
.super-condensed table th {
	margin: 0 !important;
	padding: 0 !important;
}

.super-condensed input,
.super-condensed select,
.super-condensed textarea {
	margin: 0 !important;
	padding: 0 !important;
}

/* Estilos para a coluna de Saldo nos últimos 8 dias */
.saldo-semana-container {
	/* Sempre ocupar toda a largura disponível no container da célula do grid */
	width: 100%;
	max-width: 100%;
	font-size: 10px;
}

.saldo-semana-container table {
	/* Evita variações de largura (thead menor/maior que tbody) causadas por estilos globais de grids */
	width: 100% !important;
	min-width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0 !important;
	margin-bottom: 0 !important;
	box-sizing: border-box;
}

.saldo-semana-container table thead {
	display: table-header-group !important;
}

.saldo-semana-container table tbody {
	display: table-row-group !important;
}

.saldo-semana-container table tr {
	display: table-row !important;
}

.saldo-semana-container table th {
	text-align: center !important;
	padding: 2px 2px !important;
	font-weight: bold !important;
	border: 1px solid #ddd !important;
	box-sizing: border-box;
	width: calc(100% / 7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.saldo-semana-container table td {
	text-align: center !important;
	padding: 2px 2px !important;
	vertical-align: middle !important;
	border: 1px solid #ddd !important;
	box-sizing: border-box;
	width: calc(100% / 7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.saldo-semana-container .label {
	display: inline-block;
	padding: 3px 6px;
	font-size: 10px;
	font-weight: bold;
	white-space: nowrap;
	border-radius: 3px;
}

.saldo-semana-container .label .glyphicon {
	margin-right: 2px;
}

/* Melhora a legibilidade dos tooltips */
.saldo-semana-container [data-toggle="tooltip"] {
	cursor: help;
}

/* Estilos para tabelas dentro de popovers de saldo */
.popover {
	max-width: 450px !important;
}

.popover table {
	margin-bottom: 10px;
	font-size: 11px;
	width: 100%;
}

.popover table thead {
	background-color: #f5f5f5;
}

.popover table thead th {
	text-align: center;
	padding: 6px 4px;
	font-weight: bold;
	border: 1px solid #ddd;
	font-size: 11px;
}

.popover table tbody td {
	text-align: center;
	padding: 6px 4px;
	border: 1px solid #ddd;
	vertical-align: middle;
}

.popover table tbody tr:hover {
	background-color: #f9f9f9;
}

.popover table tbody tr:last-child {
	border-top: 2px solid #ddd;
	font-weight: bold;
}

.ripple {
	position: absolute;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 0.5s linear;
	pointer-events: none;
}

@keyframes ripple {
	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

.new-msg-badge {
	display: inline-block;
	padding: 3px 6px;
	border-radius: 50%;
	color: var(--bs-white);
	background-color: #ff6b6b;
	box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
	transition: all 0.3s ease;
}

.new-msg-badge.jiggly {
	animation: badgePulse 1.5s infinite;
}

@keyframes badgePulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 rgba(255, 107, 107, 0.5);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 0 15px rgba(255, 107, 107, 0.7);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 rgba(255, 107, 107, 0.5);
	}
}

.chartbar,
#janelas {
	display: none;
}

/* Exclusão de impressão para elementos de chat */
#menu-chat,
.sidr,
.chartbar,
#janelas {
	-webkit-print-color-adjust: exact !important;
	print-color-adjust: exact !important;
}

@media print {
	#menu-chat,
	.sidr,
	.chartbar,
	#janelas {
		display: none !important;
	}
}

.janela-aparecendo {
	animation: janelaSurgindo 0.5s ease-out forwards;
	transform-origin: bottom right;
}

.janela-fechando {
	animation: janelaFechando 0.4s ease-in forwards;
	transform-origin: bottom right;
}

.janela-minimizando {
	animation: minimizando 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.janela-maximizando {
	animation: maximizando 0.4s cubic-bezier(0.18, 1.05, 0.54, 1) forwards;
}

.mensagem-enviando {
	position: relative;
	animation: enviandoMensagem 0.3s ease-out forwards;
	transform-origin: right center;
}

.mensagem-recebendo {
	position: relative;
	animation: recebendoMensagem 0.4s ease-out forwards;
	transform-origin: left center;
}

.sidr-abrindo {
	animation: sidrAbrindo 0.4s ease-out forwards;
}

.sidr-fechando {
	animation: sidrFechando 0.3s ease-in forwards;
}

.botao-pulsando {
	animation: pulsando 1.5s infinite;
}

/* Balanço do ícone do chat (mobile / fallback quando voip.css não carrega) */
@keyframes menu-chat-shake {
	0%,
	100% {
		transform: rotate(0deg);
	}
	15% {
		transform: rotate(-12deg);
	}
	30% {
		transform: rotate(10deg);
	}
	45% {
		transform: rotate(-8deg);
	}
	60% {
		transform: rotate(6deg);
	}
	75% {
		transform: rotate(-4deg);
	}
	90% {
		transform: rotate(2deg);
	}
}

#menu-chat.botao-pulsando .glyphicon-send {
	display: inline-block;
	transform-origin: center center;
	animation: menu-chat-shake 0.55s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	#menu-chat.botao-pulsando .glyphicon-send {
		animation: none;
	}
}

.input-digitando::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--bs-primary);
	animation: digitando 1.5s ease-in-out infinite;
}

@keyframes janelaSurgindo {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

	50% {
		transform: scale(1.05);
		opacity: 0.8;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes janelaFechando {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0.5);
		opacity: 0;
	}
}

@keyframes minimizando {
	0% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0.1);
	}
}

@keyframes maximizando {
	0% {
		transform: scaleY(0.1);
	}

	50% {
		transform: scaleY(1.05);
	}

	100% {
		transform: scaleY(1);
	}
}

@keyframes enviandoMensagem {
	0% {
		right: -20px;
		opacity: 0;
	}

	100% {
		right: 0;
		opacity: 1;
	}
}

@keyframes recebendoMensagem {
	0% {
		left: -20px;
		opacity: 0;
	}

	50% {
		left: 0;
		opacity: 0.7;
	}

	100% {
		left: 0;
		opacity: 1;
	}
}

@keyframes sidrAbrindo {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0);
	}
}

@keyframes sidrFechando {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes pulsando {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes digitando {
	0% {
		width: 0;
	}

	50% {
		width: 100%;
	}

	100% {
		width: 0;
	}
}

.typing-indicator {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
}

.typing-indicator span {
	height: 7px;
	width: 7px;
	float: left;
	margin: 0 1px;
	background-color: var(--bs-light-grey);
	display: block;
	border-radius: 50%;
	opacity: 0.4;
}

.typing-indicator span:nth-child(1) {
	animation: typing 1s infinite 0s;
}

.typing-indicator span:nth-child(2) {
	animation: typing 1s infinite 0.2s;
}

.typing-indicator span:nth-child(3) {
	animation: typing 1s infinite 0.4s;
}

@keyframes typing {
	0% {
		transform: scale(1);
		opacity: 0.4;
	}

	50% {
		transform: scale(1.3);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 0.4;
	}
}

.janela {
	transition: box-shadow 0.3s ease, transform 0.2s ease;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.janela:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.janela .btn {
	transition: all 0.2s ease;
}

.janela .btn:hover {
	transform: scale(1.1);
}

.janela textarea {
	transition: border 0.3s ease, box-shadow 0.3s ease;
}

.janela textarea:focus {
	box-shadow: 0 0 8px var(--bs-primary-light-transparent);
	border: 1px solid var(--bs-primary-medium-transparent) !important;
}

.chartbar,
#janelas {
	display: none;
}

.bubble {
	width: 95%;
	margin: 5px;
	padding: 10px;
	border-radius: 15px;
	position: relative;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
	color: var(--bs-gray-darker);
}

.bubble-enviado {
	background: var(--bs-pastel-mint);
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: 5%;
}

.bubble-recebido {
	background-color: var(--bs-pastel-blue);
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 5px;
	margin-right: auto;
	margin-left: 5%;
}

.bubble .emoji {
	vertical-align: middle;
	font-size: 1.2em;
}

.bubble-texto .emoji {
	margin: 0 1px;
}

.mensagem-data {
	float: left;
	font-size: 12px;
	color: var(--bs-gray-mid);
}

.mensagem-badge.badge-agora {
	background-color: var(--bs-success);
	color: var(--bs-white);
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 10px;
}

.mensagem-badge.badge-recente {
	background-color: var(--bs-warning);
	color: var(--bs-white);
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 10px;
}

.mensagem-badge.badge-hoje {
	background-color: var(--bs-info);
	color: var(--bs-white);
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 10px;
}

.check-icon {
	color: var(--bs-info);
	margin-left: 5px;
	font-size: 12px;
}

.topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	background-color: var(--bs-gray-light);
	border-bottom: 1px solid var(--bs-gray-border);
}

.window-title {
	font-weight: bold;
	flex-grow: 1;
	text-align: left;
}

.topo .btn {
	margin-left: 5px;
}

.mensagem-lida {
	font-size: 12px;
	float: right !important;
	bottom: 5px;
	right: 5px;
	margin: 0px 0px 0px 0px !important;
	color: var(--bs-success);
}

.indicador-tempo {
	font-size: 10px;
	margin-left: 5px;
}

.badge-success {
	background-color: var(--bs-success);
	color: var(--bs-white);
}

.badge-info {
	background-color: var(--bs-info);
	color: var(--bs-white);
}

.badge-warning {
	background-color: var(--bs-warning);
	color: var(--bs-black);
}

.bubble-nome {
	font-weight: bold;
	font-size: 12px;
	color: var(--bs-gray-dark);
	display: block;
	text-align: left;
	margin-bottom: 5px;
}

.bubble-texto {
	text-align: left;
	margin: 0;
}

.bubble-data {
	font-size: 11px;
	color: var(--bs-gray-mid);
	float: right;
}

.bubble-conteudo {
	margin-top: 5px;
}

.mensagem-imagem {
	max-width: 100%;
	border-radius: 10px;
	margin-top: 5px;
}

.mensagem-arquivo {
	font-size: 20px;
	margin-top: 5px;
	color: var(--bs-primary);
}

.bubble-footer {
	font-size: 10px;
	color: var(--bs-gray-mid);
	text-align: right;
	margin-top: 5px;
	position: relative;
}

.me {
	text-align: right;
}

.other {
	text-align: left;
}

.link-acao {
	color: var(--bs-primary);
	text-decoration: none;
	font-size: 14px;
	cursor: pointer;
	margin: auto;
}

.link-acao:hover {
	color: var(--bs-primary-hover);
	text-decoration: underline;
}

.topo-botoes {
	display: flex;
	gap: 5px;
	justify-content: flex-end;
	align-items: right;
}

#lock {
	font-size: 14px;
	margin-right: 10px;
	cursor: pointer;
}

#maximizar {
	width: 16px;
	height: 16px;
	cursor: pointer;
	margin-left: 10px;
	vertical-align: middle;
}

#maximizar:before {
	content: '\e033';
	font-family: 'Glyphicons Halflings';
	font-size: 14px;
	color: var(--bs-black);
	display: inline-block;
	text-align: center;
}

#maximizar:checked:before {
	content: '\e013';
}

.bubble-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 5px;
}

.nome-container {
	font-weight: bold;
	font-size: 12px;
	color: var(--bs-gray-dark);
	text-align: left;
}

.data-container {
	font-size: 11px;
	color: var(--bs-gray-mid);
	text-align: right;
}

.janela .topo .new-msg-badge {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 0 5px;
	font-size: 12px;
	font-weight: bold;
	color: var(--bs-white);
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	background-color: var(--bs-red-bright);
	border-radius: 10px;
	margin-left: 8px;
	box-shadow: 0 0 5px rgba(255, 82, 82, 0.7);
	position: relative;
	top: -1px;
	animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 0 10px 0 rgba(255, 82, 82, 0.7);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
}

/* Suporte para Emojis */
.emoji {
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji',
		'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols';
	font-size: 1.1em;
	line-height: 1;
	vertical-align: middle;
	display: inline-block;
}

/* Seletor de emojis para interfaces de chat */
.emoji-picker {
	display: none;
	position: absolute;
	bottom: 40px;
	right: 0;
	width: 300px;
	height: 200px;
	background-color: var(--emoji-picker-bg);
	border: 1px solid var(--bs-gray-border);
	border-radius: 5px;
	box-shadow: var(--emoji-shadow);
	z-index: 9999;
	overflow-y: auto;
	padding: 10px;
	transition: all 0.3s ease;
}

.emoji-picker.active {
	display: block;
	animation: emojiPickerFadeIn 0.3s ease;
}

.emoji-button {
	cursor: pointer;
	font-size: 18px;
	padding: 5px;
	background: transparent;
	border: none;
	outline: none;
	transition: transform 0.2s ease;
}

.emoji-button:hover {
	transform: scale(1.2);
}

.emoji-category {
	border-bottom: 1px solid var(--bs-pastel-border-light);
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.emoji-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 5px;
}

.emoji-item {
	cursor: pointer;
	text-align: center;
	font-size: 20px;
	padding: 5px;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.emoji-item:hover {
	background-color: var(--emoji-hover-bg);
	transform: scale(1.2);
}

/* Animações para emojis */
@keyframes emojiPickerFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.emoji-inserted {
	display: inline-block;
	animation: emojiInsert 0.5s ease;
}

@keyframes emojiInsert {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Integração com elementos existentes */
.emoji-trigger {
	cursor: pointer;
	color: var(--bs-primary);
	font-size: 16px;
	margin: 0 5px;
	transition: all 0.2s ease;
}

.emoji-trigger:hover {
	color: var(--bs-primary-hover);
	transform: scale(1.1);
}

/* Tooltip para emoji */
.emoji-tooltip {
	position: absolute;
	background: var(--bs-dark-transparent);
	color: var(--bs-white);
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.emoji-tooltip.show {
	opacity: 1;
}

/* Animação para recentes */
.emoji-recent-used {
	background-color: var(--bs-pastel-bg-subtle);
}

/* Estilização para o seletor de cores em bolinhas */
.color-picker-balls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 15px;
	padding: 5px;
	flex-wrap: wrap;
}

.color-ball {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	margin-right: 10px;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #f0f0f0;
	transition: transform 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.color-ball:hover {
	transform: scale(1.1);
}

.color-ball.selected {
	border-color: var(--bs-gray-darker);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.color-ball-custom {
	background-color: #f8f8f8;
	background-image: linear-gradient(
			45deg,
			#ccc 25%,
			transparent 25%,
			transparent 75%,
			#ccc 75%,
			#ccc
		),
		linear-gradient(
			45deg,
			#ccc 25%,
			transparent 25%,
			transparent 75%,
			#ccc 75%,
			#ccc
		);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
}

/* Estilos para a compactação e melhoria visual do módulo de anotações */

/* Compactação geral do módulo de anotações */
#filtro-anotacoes {
	margin-bottom: 8px;
}

#filtro-anotacoes input[type='text'] {
	width: 50%; /* Dobrar o tamanho do input */
	display: inline-block;
}

#filtro-tipo-anotacoes {
	width: 30%;
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
}

#anotacaolist {
	margin-top: 5px;
}

#sortable-anotacoes {
	margin-bottom: 5px;
}

.pagination {
	margin: 10px 0;
}

/* Melhorias para os cards de anotação */
.anotacao-item {
	padding: 5px;
}

.anotacao-card {
	position: relative;
	border-radius: 4px;
	transition: all 0.3s ease;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.anotacao-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Melhorias para as bolinhas de seleção de cor */
.color-picker-mini {
	display: flex;
	position: absolute;
	left: 5px;
	top: 3px; /* Subir 2px */
	opacity: 0.2; /* Diminuir opacidade */
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 5;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	padding: 2px;
	transform: scale(0.8);
}

.color-picker-mini:hover {
	opacity: 1;
	transform: scale(1);
}

.color-ball-mini {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-right: 5px;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--bs-white);
	transition: transform 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.color-ball-mini:hover {
	transform: scale(1.2);
	border-color: var(--bs-gray-darker);
}

.color-ball-mini.selected {
	border: 2px solid var(--bs-gray-darker);
}

.color-ball-custom-mini {
	background-image: linear-gradient(
			45deg,
			#ccc 25%,
			transparent 25%,
			transparent 75%,
			#ccc 75%,
			#ccc
		),
		linear-gradient(
			45deg,
			#ccc 25%,
			transparent 25%,
			transparent 75%,
			#ccc 75%,
			#ccc
		);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.color-ball-custom-mini i {
	color: var(--bs-gray-darker);
	font-size: 8px;
}

/* Correção para o seletor de cores personalizado */
#color-picker-popup-mini {
	position: absolute;
	z-index: 9999;
	background-color: var(--bs-white);
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	display: none;
	width: 200px;
}

#color-picker-popup-mini .input-group {
	margin-bottom: 8px;
}

#color-picker-popup-mini input[type='color'] {
	width: 100%;
	height: 30px;
	padding: 0;
	border: none;
	cursor: pointer;
	background: transparent;
}

#color-picker-popup-mini .btn-group {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

#color-picker-popup-mini .btn {
	flex: 1;
	margin: 0 3px;
	padding: 3px 8px;
	font-size: 12px;
}

/* Mini seletor de cores para view de anotações */
.color-picker-mini {
	display: flex;
	position: absolute;
	left: 5px;
	top: 5px;
	opacity: 0.3;
	transition: opacity 0.3s ease;
	z-index: 5;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	padding: 2px;
}

.color-picker-mini:hover {
	opacity: 1;
}

.color-ball-mini {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-right: 5px;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--bs-white);
	transition: transform 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.color-ball-mini:hover {
	transform: scale(1.2);
	border-color: var(--bs-gray-darker);
}

.color-ball-mini.selected {
	border: 2px solid var(--bs-gray-darker);
}

/* Fix para o seletor de cores personalizado */
#color-picker-popup {
	position: fixed;
	z-index: 9999;
	background-color: var(--bs-white);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	display: none;
	width: 220px;
}

#color-picker-popup .input-group {
	margin-bottom: 10px;
}

#color-picker-popup input[type='color'] {
	width: 100%;
	height: 40px;
	padding: 0;
	border: none;
	cursor: pointer;
	background: transparent;
}

#color-picker-popup .btn-group {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

#color-picker-popup .btn {
	flex: 1;
	margin: 0 5px;
}

#color-picker-popup .btn:first-child {
	margin-left: 0;
}

#color-picker-popup .btn:last-child {
	margin-right: 0;
}

/* Remover restrições de altura que causam barras de rolagem */
.anotacao-container,
.lista-chamado-container,
.chamado-container {
	overflow: visible !important;
	max-height: none !important;
	height: auto !important;
	min-height: auto !important;
}

/* Garantir que os elementos internos também não tenham barras de rolagem */
.anotacao-conteudo,
.lista-chamado-item,
.chamado-item,
.chamado-conteudo {
	overflow: visible !important;
	max-height: none !important;
	height: auto !important;
}

/* Estilos para filtros de anotações */
.anotacao-header {
	margin-bottom: 15px;
}

/* Estilos para o componente de anotações */
.filter-actions-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	margin-bottom: 0px;
}

.action-buttons {
	display: flex;
	margin-right: 10px;
}

.action-buttons .btn {
	margin-right: 5px;
	height: 32px;
	width: 32px;
	padding: 5px 10px;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.animated-btn {
	transition: all 0.3s ease;
	transform-origin: center;
}

.animated-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.animated-btn:active {
	transform: scale(0.95);
}

.search-box {
	width: 140px; /* Campo de busca com largura fixa */
}

.search-box .input-group-sm {
	width: 100%;
}

.search-box .input-group-sm input {
	height: 32px;
	border-right: none;
	background-color: var(--bs-white);
	transition: all 0.3s ease;
	font-size: 13px;
	border-color: var(--bs-gray-lighter);
}

.search-box .input-group-sm .input-group-addon {
	background-color: var(--bs-white);
	border-left: none;
	padding: 5px 10px;
	border-color: var(--bs-gray-lighter);
}

.search-box input:focus {
	border-color: var(--bs-primary-light);
	box-shadow: none;
}

.search-box input:focus + .input-group-addon {
	border-color: var(--bs-primary-light);
}

/* Correção de alinhamento para input-group do Bootstrap 3 */
.input-group .form-control,
.input-group .input-group-addon,
.input-group .input-group-btn > .btn {
	height: 34px;
	line-height: 1.42857143;
	border-radius: 4px;
	vertical-align: middle;
}

.input-group .input-group-addon {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
	min-height: 34px;
	box-sizing: border-box;
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
}

.input-group .input-group-btn {
	position: relative;
	font-size: 0;
	white-space: nowrap;
	width: 1%;
	vertical-align: middle;
	display: table-cell;
}

.input-group .input-group-btn > .btn {
	position: relative;
	height: 34px;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	box-sizing: border-box;
}

.input-group .input-group-btn > .btn-sm {
	height: 34px;
	padding: 6px 12px;
	font-size: 12px;
	line-height: 1.5;
}

/* Correção para links usados como addon (ex: botão de data) */
.input-group a.input-group-addon {
	color: #555;
	text-decoration: none;
	cursor: pointer;
	background-color: #eee;
	border: 1px solid #ccc;
	height: 34px;
	min-height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	border-radius: 4px;
}

.input-group a.input-group-addon:hover {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}

.input-group a.input-group-addon:active {
	background-color: #c3e6cb;
	border-color: #b8dabd;
}

/* Ajustes responsivos para o filtro de anotações */
@media (max-width: 767px) {
	.filter-actions-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.action-buttons {
		margin-bottom: 8px;
		margin-right: 0;
	}

	.search-box {
		width: 100%;
	}
}

/* Estilos para a área de anotações */
#anotacoes-container {
	transition: opacity 0.3s ease;
}

#anotacoes-container.loading {
	opacity: 0.6;
}

.ordenacao-info {
	display: none;
	margin-bottom: 10px;
}

.color-ball-mini {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-right: 5px;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--bs-white);
	transition: transform 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.color-ball-mini:hover {
	transform: scale(1.2);
	border-color: var(--bs-gray-darker);
}

/* Classe para texto em cores escuras */
.dark-color-text {
	color: var(--bs-white) !important;
}

/* Efeito de loading para operações AJAX */
.spinning {
	animation: spin 1s infinite linear;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Estilos para as anotações */
.anotacao-card {
	position: relative;
	border-radius: 6px;
	padding: 10px;
	margin-bottom: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.anotacao-card:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-3px);
}

.anotacao-titulo {
	font-weight: bold;
	margin-bottom: 8px;
	padding-right: 25px; /* Espaço para o botão de fechar */
}

.anotacao-conteudo {
	font-size: 13px;
	line-height: 1.5;
}

.anotacao-data {
	font-size: 11px;
	color: var(--bs-gray-mid);
	margin-top: 8px;
	text-align: right;
}

.anotacao-fechar {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.anotacao-fechar:hover {
	opacity: 1;
}

/* Estilo para anotações no modo de ordenação */
.ui-sortable-helper {
	cursor: grabbing;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
	opacity: 0.9;
}

.ui-state-highlight {
	height: 100px;
	background-color: var(--bs-pastel-bg-subtle);
	border: 2px dashed var(--bs-gray-border);
	border-radius: 6px;
	margin-bottom: 15px;
}

/* Área de cores de anotação */
.color-picker-mini {
	display: flex;
	position: absolute;
	left: 5px;
	top: 5px;
	opacity: 0.3;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 5;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	padding: 2px;
}

.color-picker-mini:hover {
	opacity: 1;
	transform: scale(1.1);
}

/* Estilos para o seletor de cores e anotações */
.seletor-cores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.cor-bolinha {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.2s, border-color 0.2s;
}

.cor-bolinha:hover {
	transform: scale(1.2);
}

.cor-bolinha[data-selected='true'] {
	border: 2px solid var(--bs-gray-darker);
	transform: scale(1.1);
}

#anotacao-modal {
	background-color: var(--cor-destaque);
	transition: background-color 0.5s ease;
}

/* Estilos para o Summernote */
.note-editor {
	border-radius: 4px;
	border: 1px solid var(--bs-gray-border);
	margin-bottom: 15px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.note-toolbar {
	background-color: var(--bs-gray-light);
	border-bottom: 1px solid var(--bs-gray-border);
}

.note-statusbar {
	background-color: var(--bs-gray-light);
}

.note-editable {
	background-color: var(--bs-white);
	color: var(--bs-gray-darker);
	padding: 10px;
}

.note-editor .dropdown-menu {
	border: 1px solid var(--bs-gray-border);
	background-color: var(--bs-white);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.note-editor .note-color .dropdown-menu {
	min-width: 340px;
}

.note-editor .note-color .dropdown-menu .note-palette {
	margin: 2px;
}

.note-editor .note-color .dropdown-menu .note-palette .note-palette-title {
	font-size: 12px;
	margin: 2px 7px;
	font-weight: bold;
	color: var(--bs-gray-mid);
}

.note-editor.note-frame.fullscreen {
	background-color: var(--bs-white);
}

/* Remove borda do summernote quando tiver classe note-frame (chat do helpdesk) */
/* Remove borda do summernote quando tiver classe note-frame (chat do helpdesk) */
/* Remove borda do summernote quando tiver classe note-frame (chat do helpdesk) */
#janelas .note-editor.note-frame,
.janela .note-editor.note-frame,
#chat-sidebar .note-editor.note-frame {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	flex: 1;
	margin: 0 !important;
	padding: 0 !important;
}

/* Re-apply border globally for other instances if needed (safety net) */
.note-editor.note-frame:not(#janelas .note-editor.note-frame):not(.janela .note-editor.note-frame) {
    border: 1px solid #ddd !important;
}

.note-editor .note-toolbar .note-btn-group .note-btn {
	border-color: var(--bs-gray-border);
	background-color: var(--bs-white);
	color: var(--bs-gray-dark);
	padding: 5px 10px;
	transition: all 0.2s ease;
}

.note-editor .note-toolbar .note-btn-group .note-btn:hover {
	background-color: var(--bs-gray-light);
	border-color: var(--bs-gray-mid);
}

.log-detail-container {
	padding: 15px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header do modal de logs */
.log-detail-header {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid var(--bs-gray-border);
}

.log-detail-header h4 {
	margin: 0;
	color: var(--bs-gray-dark);
	font-weight: 600;
}

/* Badge do nível do log */
.log-level-badge {
	font-size: 14px !important;
	padding: 8px 12px !important;
	border-radius: 4px !important;
}

/* Métricas do log */
.metric-item {
	padding: 15px 0;
}

.metric-value {
	font-size: 24px;
	font-weight: bold;
	color: var(--bs-primary);
	margin-bottom: 5px;
}

.metric-label {
	font-size: 12px;
	color: var(--bs-gray-mid);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Display da mensagem do log */
.log-message-display {
	background-color: var(--bs-gray-light);
	border: 1px solid var(--bs-gray-border);
	border-radius: 4px;
	padding: 15px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	line-height: 1.6;
	max-height: 200px;
	overflow-y: auto;
	word-wrap: break-word;
}

/* Stack trace display */
.stack-trace-display {
	background-color: #2d3748;
	color: #e2e8f0;
	border: none;
	border-radius: 4px;
	padding: 15px;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.5;
	max-height: 300px;
	overflow-y: auto;
	white-space: pre-wrap;
	margin: 0;
}

/* Conteúdo completo do log */
.log-full-content {
	background-color: var(--bs-gray-light);
	border: 1px solid var(--bs-gray-border);
	border-radius: 4px;
	padding: 15px;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.5;
	max-height: 400px;
	overflow-y: auto;
	white-space: pre-wrap;
	margin: 0;
	word-wrap: break-word;
}

/* URLs nos logs */
.log-url {
	color: var(--bs-info);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.log-url:hover {
	color: var(--bs-info-border);
	text-decoration: none;
}

/* Paths de arquivos nos logs */
.log-path {
	background-color: var(--bs-warning-soft);
	color: var(--bs-gray-darker);
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 11px;
}

/* Tabela de informações básicas */
.log-detail-container .table td {
	padding: 8px 12px;
	border-top: 1px solid var(--bs-gray-border);
	vertical-align: middle;
}

.log-detail-container .table td strong {
	color: var(--bs-gray-dark);
	font-weight: 600;
}

/* Painéis do modal */
.log-detail-container .panel {
	margin-bottom: 20px;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.log-detail-container .panel-heading {
	border-radius: 6px 6px 0 0;
	padding: 12px 15px;
}

.log-detail-container .panel-heading .panel-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.log-detail-container .panel-body {
	padding: 15px;
}

/* Animação do modal */
.log-detail-container.animated {
	animation-duration: 0.3s;
	animation-fill-mode: both;
}

.fadeIn {
	animation-name: fadeIn;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsividade do modal */
@media (max-width: 768px) {
	.log-detail-container {
		padding: 10px;
	}

	.log-detail-header h4 {
		font-size: 18px;
	}

	.metric-value {
		font-size: 20px;
	}

	.log-message-display,
	.log-full-content {
		font-size: 11px;
		max-height: 150px;
	}

	.stack-trace-display {
		font-size: 10px;
		max-height: 200px;
	}
}

/* Scrollbar customizada para áreas de código */
.log-message-display::-webkit-scrollbar,
.log-full-content::-webkit-scrollbar,
.stack-trace-display::-webkit-scrollbar {
	width: 8px;
}

.log-message-display::-webkit-scrollbar-track,
.log-full-content::-webkit-scrollbar-track,
.stack-trace-display::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.log-message-display::-webkit-scrollbar-thumb,
.log-full-content::-webkit-scrollbar-thumb,
.stack-trace-display::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.log-message-display::-webkit-scrollbar-thumb:hover,
.log-full-content::-webkit-scrollbar-thumb:hover,
.stack-trace-display::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.5);
}

/* ===========================================
   FIM DOS ESTILOS PARA MODAL DE LOGS
   =========================================== */

/* ===========================================
   AJUSTES VISUAIS – BOTÃO HAMBURGER (BOOTSTRAP 3)
   Corrige fundo branco herdado de .btn e melhora contraste no navbar escuro
   =========================================== */
.navbar-inverse .navbar-toggle {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	padding: 6px 8px; /* botão mais compacto */
	border-radius: 6px;
}

/* Anula estilos de .btn aplicados pelo TbButton */
.navbar-toggle.btn {
	background: transparent !important;
	box-shadow: none !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Compact: reduz apenas padding top e bottom de divs internas, mantém left/right padrão do Bootstrap */
.compact div {
	padding-top: 1px !important;
	padding-bottom: 1px !important;
}
.compact > div {
	padding-top: 1px !important;
	padding-bottom: 1px !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #fff !important;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus,
.navbar-toggle.btn:hover,
.navbar-toggle.btn:focus {
	background-color: rgba(255, 255, 255, 0.12) !important;
	border-color: #fff !important;
}

/* ===========================================
   ESTILOS PARA DOCUMENTAÇÃO DA API
   =========================================== */

.api-documentation {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: var(--bs-gray-dark);
}

.api-summary {
	position: sticky;
	top: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.api-summary a {
	color: var(--bs-primary);
	text-decoration: none;
	padding: 3px 0;
	display: block;
	transition: all 0.3s ease;
}

.api-summary a:hover {
	color: var(--bs-primary-hover);
	text-decoration: none;
	background-color: var(--bs-gray-light);
	padding-left: 5px;
}

.api-section {
	margin-bottom: 30px;
}

.code-example {
	background-color: var(--bs-gray-darker);
	color: var(--bs-gray-light);
	border: 1px solid var(--bs-gray-border);
	border-radius: 4px;
	padding: 15px;
	margin: 15px 0;
	overflow-x: auto;
}

.endpoint-detail {
	padding: 20px 0;
	border-bottom: 1px solid var(--bs-gray-light);
}

.api-documentation .panel {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}

/* ===========================================
   FIM DOS ESTILOS PARA DOCUMENTAÇÃO DA API
   =========================================== */

/* ===========================================
	 EColumns – Modern UI (escopo: .ecolumns-form)
	 Mantém compatibilidade com Bootstrap 3 e utiliza variáveis existentes
	 Finalidade: Deixar o diálogo de configuração mais moderno e legível
	 =========================================== */
.ecolumns-form {
	font-size: 13px;
}

/* Cabeçalho do EColumns: fluxo normal dentro de .ecolumns-content-scrollable (rola com a lista; não sticky). */
.ecolumns-header-fixed {
	position: static;
	background: var(--bs-white);
	padding: 12px 12px 8px;
	border-bottom: 1px solid var(--bs-pastel-border-light);
}

.ecolumns-header-fixed h4 {
	margin: 0 0 8px;
	font-weight: 600;
}

.ecolumns-search-container .input-group {
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
	border-radius: 6px;
	overflow: hidden;
}

.ecolumns-search-input {
	height: 36px !important;
}

.ecolumns-search-container .input-group-addon {
	background: var(--bs-pastel-bg-subtle);
	border-color: var(--bs-pastel-border-light);
}

.ecolumns-search-container .ecolumns-clear-search {
	background: transparent;
	border-left: 0;
}

.search-results-info {
	margin-top: 6px;
}

.columns-counter {
	color: var(--bs-gray-600);
}

.columns-counter.counter-updated {
	animation: ecolumnsPulse .6s ease;
}

@keyframes ecolumnsPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.03); }
	100% { transform: scale(1); }
}

.ecolumns-content-scrollable {
	max-height: 52vh;
	overflow: auto;
	padding: 8px 12px;
	background: var(--bs-pastel-bg-light);
}

/* Lista */
.ecolumns-list.list-group {
	margin: 0;
}

.ecolumns-list.list-group > li.list-group-item {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--bs-pastel-border-light);
	border-radius: 6px !important;
	margin: 6px 0;
	padding: 10px 12px;
	background: var(--bs-white);
	transition: box-shadow .2s ease, transform .1s ease;
}

.ecolumns-list .hover-highlight {
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.ecolumns-list .being-dragged {
	transform: scale(1.01);
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.ecolumns-list .drop-placeholder {
	border: 2px dashed var(--bs-primary);
	background: rgba(0, 152, 218, .05);
	min-height: 38px;
}

.ecolumns-list .drop-zone {
	outline: 1px dashed var(--bs-pastel-blue-dark);
}

.ecolumns-list .column-visibility-icon {
	width: 18px;
	text-align: center;
}

.ecolumns-list label {
	margin: 0;
	font-weight: 500;
	cursor: pointer;
}

.ecolumns-list .column-config-icon {
	margin-left: auto;
	color: var(--bs-gray-600);
	float: none !important;
}

.ecolumns-list .column-config-icon:hover {
	color: var(--bs-primary);
}

/* Engrenagem na lista: coluna com configuração guardada — neon vermelho mais chamativo */
@keyframes ecolumnsGearNeonPulse {
	0%, 100% {
		color: #b71c1c;
		filter: drop-shadow(0 0 2px rgba(255, 40, 40, 0.65)) drop-shadow(0 0 6px rgba(220, 0, 0, 0.35));
		box-shadow: 0 0 0 0 rgba(255, 30, 30, 0);
	}
	50% {
		color: #ff1744;
		filter: drop-shadow(0 0 3px rgba(255, 80, 80, 0.95)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.55))
			drop-shadow(0 0 14px rgba(255, 50, 50, 0.25));
		box-shadow: 0 0 6px 1px rgba(255, 40, 40, 0.4), inset 0 0 4px rgba(255, 200, 200, 0.15);
	}
}

.ecolumns-list .column-config-icon.ecolumns-gear-has-config {
	position: relative;
	border-radius: 5px;
	animation: ecolumnsGearNeonPulse 2.2s ease-in-out infinite;
}

.ecolumns-list .column-config-icon.ecolumns-gear-has-config:hover {
	animation-play-state: paused;
	color: #c62828 !important;
	filter: drop-shadow(0 0 2px rgba(200, 0, 0, 0.5));
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.ecolumns-list .column-config-icon.ecolumns-gear-has-config {
		animation: none;
		color: #c62828;
		filter: drop-shadow(0 0 2px rgba(255, 50, 50, 0.7)) drop-shadow(0 0 8px rgba(200, 0, 0, 0.35));
	}
}

.ecolumns-footer-fixed {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: var(--bs-white);
	border-top: 1px solid var(--bs-pastel-border-light);
	padding: 10px 12px 12px;
}

.ecolumns-quick-actions .btn {
	min-width: 140px;
}

.ecolumns-main-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.ecolumns-notification {
	position: absolute;
	right: 12px;
	top: 12px;
	padding: 6px 10px;
	border-radius: 4px;
}

/* Badges de atalhos */
.ecolumns-shortcuts-legend {
	margin-top: 14px;
	color: var(--bs-gray-600);
}

.ecolumns-shortcuts-legend .badge {
	background: var(--bs-pastel-bg-subtle);
	color: var(--bs-gray-dark);
	border: 1px solid var(--bs-pastel-border-light);
	margin-right: 6px;
}

.ecolumns-shortcuts-legend .badge-esc { background: var(--bs-light-red); color: var(--bs-danger-dark); }
.ecolumns-shortcuts-legend .badge-enter { background: var(--bs-light-green); color: var(--bs-success-dark); }
.ecolumns-shortcuts-legend .badge-arrows { background: var(--bs-pastel-blue); color: var(--bs-gray-darker); }
.ecolumns-shortcuts-legend .badge-space { background: var(--bs-warning-soft); color: var(--bs-gray-darker); }

/* Placeholder info no drag */
.placeholder-info {
	font-size: 12px;
	color: var(--bs-gray-600);
	padding: 2px 6px;
}

/* Ação em massa highlight */
.action-highlight {
	animation: ecolumnsFlash .8s ease;
}

@keyframes ecolumnsFlash {
	0% { background: #fff; }
	20% { background: #f5fff2; }
	100% { background: #fff; }
}

/* Sugestões (analytics) */
.ecolumns-suggestions { display: none; padding: 10px 12px; background: var(--bs-info-light); border: 1px solid var(--bs-info-border); border-left-width: 4px; }
.analytics-suggestion { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.analytics-suggestion i { color: var(--bs-primary); }
.analytics-suggestion.suggestion-high { border-left: 3px solid var(--bs-danger); }
.analytics-suggestion.suggestion-medium { border-left: 3px solid var(--bs-warning); }
.analytics-suggestion.suggestion-low { border-left: 3px solid var(--bs-info); }

/* ============================================
   POPOVERS ENRIQUECIDOS - PADRÃO VISUAL UNIFICADO
   ============================================ */

.enriched-popover {
    max-width: 350px;
    min-width: 320px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    font-family: inherit;
    line-height: 1.4;
}

.enriched-popover.gradient-primary {
    background: linear-gradient(135deg, #337ab7 0%, #2e6da4 100%);
    color: white;
}

.enriched-popover.gradient-success {
    background: linear-gradient(135deg, #5cb85c 0%, #4cae4c 100%);
    color: white;
}

.enriched-popover.gradient-info {
    background: linear-gradient(135deg, #5bc0de 0%, #46b8da 100%);
    color: white;
}

.enriched-popover.gradient-warning {
    background: linear-gradient(135deg, #f0ad4e 0%, #eea236 100%);
    color: white;
}

.enriched-popover.gradient-danger {
    background: linear-gradient(135deg, #d9534f 0%, #d43f3a 100%);
    color: white;
}

.ep-header {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ep-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
}

.ep-icon.pulse {
    animation: epPulse 2s infinite;
}

@keyframes epPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.ep-title-group {
    flex: 1;
}

.ep-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.ep-sub {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

.ep-metrics {
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
}

.ep-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ep-metric:last-child {
    border-bottom: none;
}

.ep-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ep-value {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.ep-growth {
    padding: 10px 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ep-growth.positive {
    background: linear-gradient(135deg, rgba(92, 184, 92, 0.2), rgba(76, 174, 76, 0.3));
}

.ep-growth.negative {
    background: linear-gradient(135deg, rgba(217, 83, 79, 0.2), rgba(212, 63, 58, 0.3));
}

.ep-growth.neutral {
    background: linear-gradient(135deg, rgba(240, 173, 78, 0.2), rgba(238, 162, 54, 0.3));
}

.ep-growth strong {
    font-size: 16px;
    font-weight: 700;
}

.ep-growth span {
    font-size: 11px;
    opacity: 0.9;
}

.ep-details {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
}

.ep-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
}

.ep-detail:last-child {
    margin-bottom: 0;
}

.ep-detail.note {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.ep-detail i {
    margin-top: 1px;
    opacity: 0.8;
}

.ep-detail strong {
    font-weight: 600;
}

/* Responsividade */
@media (max-width: 768px) {
    .enriched-popover {
        max-width: 280px;
        min-width: 250px;
    }
    
    .ep-header {
        padding: 12px;
    }
    
    .ep-metrics {
        padding: 12px;
    }
    
    .ep-details {
        padding: 12px;
    }
    
    .ep-title {
        font-size: 13px;
    }
    
    .ep-sub {
        font-size: 10px;
    }
}

/* ===========================================
   BGRID MOBILE - ANIMAÇÃO DE INDICADOR DE SCROLL
   =========================================== */
@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Indicador visual de scroll horizontal (seta animada) */
@media (max-width: 768px) {
    .bgrid-table-wrapper.table-responsive::after {
        /* Adiciona seta animada quando há conteúdo para scrollar */
        content: '→' !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        color: rgba(0, 0, 0, 0.4) !important;
        animation: pulse 2s infinite !important;
    }
    
    /* Remove seta quando já está no final do scroll */
    .bgrid-table-wrapper.table-responsive.scrolled-right::after {
        content: '' !important;
    }
}

/* ===========================================
   FILTROS FISCAIS - CSS CENTRALIZADO
   Aplica para: .nfe-config-filtros, .produto-fiscal-filters, 
                .entidade-fiscal-filters, .patrimonio-fiscal-filters
   =========================================== */

/* Container de filtros */
.nfe-config-filtros,
.produto-fiscal-filters,
.entidade-fiscal-filters,
.patrimonio-fiscal-filters {
    margin-bottom: 15px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
}

/* Headers obrigatórios em vermelho (específico por grid) */
#produto-grid th.header-required,
#produto-grid th.header-required a,
#produto-grid th.header-required a:link,
#produto-grid th.header-required a:visited,
#produto-grid th.header-required a:hover,
#produto-grid th.header-required a:active,
#entidade-grid th.header-required,
#entidade-grid th.header-required a,
#entidade-grid th.header-required a:link,
#entidade-grid th.header-required a:visited,
#entidade-grid th.header-required a:hover,
#entidade-grid th.header-required a:active,
#patrimonio-veiculo-grid th.header-required,
#patrimonio-veiculo-grid th.header-required a {
    color: #d9534f !important;
    font-weight: bold;
}

/* Checkbox inline comum para todos os filtros */
.nfe-config-filtros .checkbox-inline,
.produto-fiscal-filters .checkbox-inline,
.entidade-fiscal-filters .checkbox-inline,
.patrimonio-fiscal-filters .checkbox-inline {
    position: relative;
    margin-right: 15px !important;
    padding-left: 28px;
    font-weight: 500 !important;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    vertical-align: middle;
}

/* Hover do checkbox inline */
.nfe-config-filtros .checkbox-inline:hover,
.produto-fiscal-filters .checkbox-inline:hover,
.entidade-fiscal-filters .checkbox-inline:hover,
.patrimonio-fiscal-filters .checkbox-inline:hover {
    color: #337ab7;
    transform: translateY(-1px);
}

/* Input checkbox oculto */
.nfe-config-filtros .checkbox-inline input[type="checkbox"],
.produto-fiscal-filters .checkbox-inline input[type="checkbox"],
.entidade-fiscal-filters .checkbox-inline input[type="checkbox"],
.patrimonio-fiscal-filters .checkbox-inline input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

/* Box do checkbox (::before) */
.nfe-config-filtros .checkbox-inline::before,
.produto-fiscal-filters .checkbox-inline::before,
.entidade-fiscal-filters .checkbox-inline::before,
.patrimonio-fiscal-filters .checkbox-inline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #bbb;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Hover do box do checkbox */
.nfe-config-filtros .checkbox-inline:hover::before,
.produto-fiscal-filters .checkbox-inline:hover::before,
.entidade-fiscal-filters .checkbox-inline:hover::before,
.patrimonio-fiscal-filters .checkbox-inline:hover::before {
    border-color: #337ab7;
    box-shadow: 0 3px 6px rgba(51, 122, 183, 0.2);
    transform: translateY(-50%) scale(1.05);
}

/* Checkbox marcado - box verde */
.nfe-config-filtros .checkbox-inline.checkbox-checked::before,
.produto-fiscal-filters .checkbox-inline.checkbox-checked::before,
.entidade-fiscal-filters .checkbox-inline.checkbox-checked::before,
.patrimonio-fiscal-filters .checkbox-inline.checkbox-checked::before {
    background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
    border-color: #5cb85c;
    box-shadow: 0 3px 8px rgba(92, 184, 92, 0.4);
    animation: checkboxCheck 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ícone de check (::after) */
.nfe-config-filtros .checkbox-inline::after,
.produto-fiscal-filters .checkbox-inline::after,
.entidade-fiscal-filters .checkbox-inline::after,
.patrimonio-fiscal-filters .checkbox-inline::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform-origin: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    opacity: 0;
    z-index: 1;
}

/* Checkbox marcado - ícone de check visível */
.nfe-config-filtros .checkbox-inline.checkbox-checked::after,
.produto-fiscal-filters .checkbox-inline.checkbox-checked::after,
.entidade-fiscal-filters .checkbox-inline.checkbox-checked::after,
.patrimonio-fiscal-filters .checkbox-inline.checkbox-checked::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 1;
}

/* Animação de check */
@keyframes checkboxCheck {
    0% {
        transform: translateY(-50%) scale(0.8);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

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

   POPOVERS GLOBAIS - AJUSTES DE EXIBI%�%�O

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



/* Garantir que popovers exibam conte%Q%do completo sem cortes */

.popover {

	max-width: 500px !important;

	min-width: 250px !important;

}



/* Conte%Q%do do popover com quebra de linha apropriada */

.popover-content,

.popover-body {

	word-wrap: break-word !important;

	overflow-wrap: break-word !important;

	white-space: normal !important;

	max-height: 500px !important;

	overflow-y: auto !important;

}



/* T%�tulo do popover */

.popover-title {

	word-wrap: break-word !important;

	overflow-wrap: break-word !important;

	white-space: normal !important;

}

/* ===================================================================
   CLASSE .compact - REDUÇÃO DRASTICA DE PADDING E MARGIN
   ===================================================================
   
   Uso: Aplicar em div, form ou input individualmente
   Funciona recursivamente: elementos dentro de .compact também são afetados
   
   Exemplos:
   - <div class="compact">...</div> (afeta todos os inputs dentro)
   - <form class="compact">...</form> (afeta todos os inputs dentro)
   - <input class="compact" ...> (afeta apenas este input)
   =================================================================== */

/* Inputs de texto e similares */
.compact input[type="text"],
.compact input[type="email"],
.compact input[type="password"],
.compact input[type="number"],
.compact input[type="date"],
.compact input[type="time"],
.compact input[type="datetime-local"],
.compact input[type="tel"],
.compact input[type="url"],
.compact input[type="search"],
.compact input[type="color"],
.compact input[type="file"],
.compact input[type="range"],
.compact input[type="month"],
.compact input[type="week"] {
	padding: 2px 4px !important;
	margin: 1px 0 !important;
	height: auto !important;
	min-height: 22px !important;
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

/* Selects */
.compact select,
.compact select.form-control {
	padding: 2px 4px !important;
	margin: 1px 0 !important;
	height: auto !important;
	min-height: 22px !important;
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

/* Textareas */
.compact textarea,
.compact textarea.form-control {
	padding: 2px 4px !important;
	margin: 1px 0 !important;
	font-size: 0.9em !important;
	line-height: 1.2 !important;
	min-height: 40px !important;
}

/* Form controls genéricos (Bootstrap 3) */
.compact .form-control {
	padding: 2px 4px !important;
	margin: 1px 0 !important;
	height: auto !important;
	min-height: 22px !important;
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

/* Labels */
.compact label,
.compact .control-label {
	margin: 1px 0 !important;
	padding: 0 2px !important;
	font-size: 0.85em !important;
	line-height: 1.2 !important;
	font-weight: normal !important;
}

/* Form groups */
.compact .form-group {
	margin-bottom: 3px !important;
	margin-top: 2px !important;
}

/* Checkboxes e Radio buttons */
.compact input[type="checkbox"],
.compact input[type="radio"] {
	margin: 1px 3px 1px 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
}

.compact label input[type="checkbox"],
.compact label input[type="radio"] {
	margin: 1px 3px 1px 0 !important;
}

/* Select2 - Container principal */
.compact .select2-container {
	margin: 1px 0 !important;
}

/* Select2 - Choice (select simples) */
.compact .select2-container .select2-choice {
	padding: 2px 4px !important;
	height: auto !important;
	min-height: 22px !important;
	line-height: 1.2 !important;
	font-size: 1em !important;
}

.compact .select2-container .select2-choice .select2-chosen,
.compact .select2-container .select2-choice > span:first-child {
	padding: 0 2px !important;
	line-height: 1.2 !important;
	font-size: 1em !important;
}

/* Select2 - Arrow */
.compact .select2-container .select2-choice .select2-arrow,
.compact .select2-container .select2-choice div {
	width: 18px !important;
	padding: 2px 0 !important;
}

/* Select2 - Choices (select múltiplo) */
.compact .select2-container .select2-choices {
	padding: 1px 2px !important;
	min-height: 22px !important;
}

.compact .select2-container .select2-choices .select2-search-field input {
	padding: 1px 2px !important;
	margin: 0 !important;
	height: 20px !important;
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

/* Select2 - Search choice (tags no select múltiplo) */
.compact .select2-container .select2-choices .select2-search-choice {
	padding: 1px 4px 1px 16px !important;
	margin: 1px 2px 1px 0 !important;
	font-size: 0.85em !important;
	line-height: 1.2 !important;
	min-height: 18px !important;
}

.compact .select2-container .select2-choices .select2-search-choice-close {
	left: 2px !important;
	top: 2px !important;
	width: 12px !important;
	height: 12px !important;
}

/* Input groups (Bootstrap) */
.compact .input-group {
	margin: 1px 0 !important;
}

.compact .input-group .form-control {
	padding: 2px 4px !important;
}

.compact .input-group-addon {
	padding: 2px 6px !important;
	font-size: 0.85em !important;
	line-height: 1.2 !important;
	min-width: 30px !important;
}

.compact .input-group-btn .btn {
	padding: 2px 8px !important;
	font-size: 0.85em !important;
	line-height: 1.2 !important;
	min-height: 22px !important;
}

/* Help blocks e error messages */
.compact .help-block {
	margin: 1px 0 !important;
	padding: 0 2px !important;
	font-size: 0.8em !important;
	line-height: 1.2 !important;
}

.compact .text-danger,
.compact .text-success,
.compact .text-warning,
.compact .text-info {
	font-size: 0.8em !important;
	margin: 1px 0 !important;
	padding: 0 2px !important;
}

/* Botões dentro de .compact (opcional - reduzir também) */
.compact .btn {
	padding: 2px 6px !important;
	margin: 1px 2px !important;
	font-size: 0.85em !important;
	line-height: 1.2 !important;
	min-height: 22px !important;
}

.compact .btn-sm {
	padding: 1px 4px !important;
	font-size: 0.8em !important;
	min-height: 18px !important;
}

.compact .btn-xs {
	padding: 1px 3px !important;
	font-size: 0.75em !important;
	min-height: 16px !important;
}

/* Checkbox e Radio inline */
.compact .checkbox,
.compact .radio {
	margin: 2px 0 !important;
	padding: 0 2px !important;
	min-height: auto !important;
}

.compact .checkbox label,
.compact .radio label {
	padding-left: 18px !important;
	margin: 0 !important;
	font-size: 0.85em !important;
}

.compact .checkbox input[type="checkbox"],
.compact .radio input[type="radio"] {
	margin-left: -18px !important;
	margin-top: 2px !important;
}

/* Select2 dropdown (ajustes quando aberto) */
.compact .select2-drop {
	font-size: 0.9em !important;
}

.compact .select2-results {
	padding: 1px 0 !important;
}

.compact .select2-results .select2-result-label {
	padding: 2px 6px !important;
	line-height: 1.3 !important;
}

/* Aplicação direta em elementos (sem container) */
input.compact,
select.compact,
textarea.compact,
label.compact,
.form-control.compact {
	padding: 2px 4px !important;
	margin: 1px 0 !important;
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

input.compact[type="checkbox"],
input.compact[type="radio"] {
	margin: 1px 3px 1px 0 !important;
	padding: 0 !important;
}

select.compact,
.form-control.compact {
	height: auto !important;
	min-height: 22px !important;
}

textarea.compact {
	min-height: 40px !important;
}

label.compact {
	font-size: 0.85em !important;
	margin: 1px 0 !important;
	padding: 0 2px !important;
}

.safra-cell {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.periodo-entradas-cell,
.safra-cell {
	font-size: 10px !important;
	min-width: 16px !important;
	width: 16px !important;
	height: 14px !important;
	line-height: 12px !important;
	padding: 0 1px !important;
	white-space: nowrap;
}

.safra-cell:hover {
	opacity: 0.85;
	outline: 1px solid #333;
}

.safra-cell-undefined {
	background-color: #e8e8e8 !important;
}

#safra-color-picker {
	position: absolute;
	z-index: 2060;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#safra-color-picker .safra-color-palette {
	display: flex;
	gap: 2px;
}

#safra-color-picker .safra-swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	cursor: pointer;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	transition: transform 0.1s ease;
	padding: 0;
}

#safra-color-picker .safra-swatch:hover,
#safra-color-picker .safra-swatch.active {
	transform: scale(1.2);
	border-color: #222;
	position: relative;
	z-index: 1;
}

#safra-color-picker .safra-swatch-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #555;
}
#safra-color-picker .safra-swatch-clear:hover {
	color: #c00;
}

/* Helpdesk/Chamado admin: filtro coluna Remetente / Alvo / Entidade — 3 inputs lado a lado; quebra só se algum input ficar com menos de 46px
   Especificidade maior que td .filter-container input (display:block) e que .form-control (width:100%) do Bootstrap 3 */
.grid-view table tfoot td .filter-container .chamado-filter-remetente-alvo-entidade,
table.items tfoot td .filter-container .chamado-filter-remetente-alvo-entidade,
td .filter-container .chamado-filter-remetente-alvo-entidade {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	min-width: 0;
}
.grid-view table tfoot td .filter-container .chamado-filter-remetente-alvo-entidade input,
table.items tfoot td .filter-container .chamado-filter-remetente-alvo-entidade input,
td .filter-container .chamado-filter-remetente-alvo-entidade input {
	display: inline-block !important;
	flex: 1 1 46px;
	min-width: 46px !important;
	width: auto !important;
	max-width: none;
	box-sizing: border-box;
}

/* Helpdesk/Chamado admin: filtro coluna Prazo / Situação — Prazo (input) e Situação (select) lado a lado; quebra só se < 46px */
.grid-view table tfoot td .filter-container .chamado-filter-prazo-situacao,
table.items tfoot td .filter-container .chamado-filter-prazo-situacao,
td .filter-container .chamado-filter-prazo-situacao {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	min-width: 0;
}
.grid-view table tfoot td .filter-container .chamado-filter-prazo-situacao input,
.grid-view table tfoot td .filter-container .chamado-filter-prazo-situacao select,
table.items tfoot td .filter-container .chamado-filter-prazo-situacao input,
table.items tfoot td .filter-container .chamado-filter-prazo-situacao select,
td .filter-container .chamado-filter-prazo-situacao input,
td .filter-container .chamado-filter-prazo-situacao select {
	display: inline-block !important;
	flex: 1 1 46px;
	min-width: 46px !important;
	width: auto !important;
	max-width: none;
	box-sizing: border-box;
}


/* ========================================================================= */
/* CORREÇÃO DE RESPONSIVIDADE E "ESMAGAMENTO" DAS COLUNAS (BGRID / ECOLUMNS) */
/* ========================================================================= */

.grid-view {
	overflow-x: auto !important; /* Habilita rolagem horizontal orgânica */
	width: 100%;
    max-width: 100%; /* Força o scrollbar a aparecer dentro do container */
}

.grid-view table.items {
	min-width: 100%;
	table-layout: auto;
}

/* Colunas padrão - limite orgânico para não esmagar textos */
.grid-view table.items th,
.grid-view table.items td {
	min-width: 110px;
}

/*
 * Bypass do min-width acima: seleção em massa costuma ser a 1ª coluna (CCheckBoxColumn)
 * sem classe .checkbox-column — herdava 110px e ficava um “vão” enorme ao lado do checkbox.
 * :has() cobre TH/TD cuja célula é essencialmente só o input.
 */
.grid-view table.items thead > tr:first-child > th:first-child:has(> input[type="checkbox"]),
.grid-view table.items tbody > tr > td:first-child:has(> input[type="checkbox"]) {
	min-width: 28px !important;
	max-width: 44px !important;
	width: 36px;
	padding: 4px 2px !important;
	box-sizing: border-box !important;
}

/* Helpdesk / câmeras: checkbox dentro da coluna Descrição (.camera-grid-desc-cell) — não estreitar 1ª coluna */
#camera-grid.grid-view table.items thead > tr:first-child > th:first-child:has(.camera-grid-desc-header),
#camera-grid.grid-view table.items tbody > tr > td:first-child:has(.camera-grid-desc-cell) {
	min-width: 140px !important;
	max-width: none !important;
	width: auto !important;
	padding: inherit;
}

/* EColumns: colunas controladas pelo plugin podem descer até 60px (MIN_W).
   Evita que min-width:110px global impeça o usuário de reduzir a coluna. */
.grid-view table.items th[data-ecolumns-key],
.grid-view table.items td.ecolumns-styled {
	min-width: 60px;
}

/* Limitador para a caixa de checkbox (geralmente colunas de seleção em massa) */
.grid-view table.items th.checkbox-column,
.grid-view table.items td.checkbox-column {
    min-width: 15px !important;
    width: 15px; /* Removido !important para permitir redimensionamento */
}

/* Limites para as colunas de botão/ações */
.grid-view table.items th.button-column,
.grid-view table.items td.button-column {
	min-width: 75px; 
	width: 75px; /* Removido !important para permitir redimensionamento */
    white-space: nowrap;
}

/* Fim da correção BGrid/EColumns */

/* Menu principal — badges de observações @ (Compras) */
#main-menu .ww-menu-badge {
	margin-left: 6px;
	font-size: 11px;
	vertical-align: middle;
}

#main-menu > ul > li > a .ww-menu-badge,
#main-menu .dropdown-menu > li > a .ww-menu-badge {
	vertical-align: middle;
}