/* ═══════════════════════════════════════════════════════════════
   CX4 SUPORTE — Skin Premium  (override do template Skote/Bootstrap)
   Identidade visual idêntica ao site cx4.com.br
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
	--cx4-azul: #1e6fdb;
	--cx4-azul-claro: #5db8ff;
	--cx4-azul-escuro: #0a1f44;
	--cx4-dark1: #050b1f;
	--cx4-dark2: #081634;
	--cx4-verde: #25D366;
	--cx4-bg: #f4f7fc;
	--cx4-card-radius: 16px;
}

/* ── Base ── */
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	background: var(--cx4-bg) !important;
	color: #34465e !important;
	font-size: 0.92rem;
	letter-spacing: -0.005em;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT NOVO — Sidebar lateral + Topbar glass  (sobrepõe o Skote)
   ══════════════════════════════════════════════════════════════ */
:root { --cx4-side-w: 258px; }

/* Esconde o topbar horizontal original do Skote (se sobrar) */
#page-topbar { display: none !important; }

/* FIX faixa branca no topo — zera espaços herdados do tema Skote */
html, body { margin: 0 !important; padding-top: 0 !important; }
.container-fluid { padding-top: 0 !important; margin-top: 0 !important; }
#layout-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
.main-content { margin-top: 0 !important; }
.topnav { display: none !important; }   /* menu horizontal antigo, se sobrar */
.navbar-header { display: none !important; }

/* Sidebar */
.cx4-side {
	position: fixed; top: 0 !important; left: 0 !important; bottom: 0;
	height: 100vh;
	width: var(--cx4-side-w);
	background: linear-gradient(185deg, #060d22 0%, #0a1834 60%, #081430 100%);
	display: flex; flex-direction: column;
	z-index: 1031;
	box-shadow: 4px 0 30px -10px rgba(5,11,31,0.5);
	border-right: 1px solid rgba(255,255,255,0.05);
}
.cx4-side-brand {
	padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.07);
	display: flex; align-items: center; justify-content: center;
}
.cx4-side-brand a { display: inline-flex; }
.cx4-side-brand img { height: 34px; width: auto; }
.cx4-side-scroll { flex: 1; overflow-y: auto; padding: 10px 0 16px; }
.cx4-side-scroll::-webkit-scrollbar { width: 6px; }
.cx4-side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }
.cx4-side-nav { padding: 8px 0; }

/* Link direto (Dashboard) */
.cx4-nav-item {
	display: flex; align-items: center; gap: 13px;
	padding: 12px 24px; color: #aebcd4; text-decoration: none;
	font-size: 0.9rem; font-weight: 600;
	border-left: 3px solid transparent;
	transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cx4-nav-item i { font-size: 1.2rem; width: 22px; text-align: center; color: #5db8ff; }
.cx4-nav-item:hover { background: rgba(255,255,255,0.055); color: #fff; }
.cx4-nav-item.active {
	background: linear-gradient(90deg, rgba(56,139,253,0.18), rgba(56,139,253,0.02));
	color: #fff; border-left-color: #5db8ff;
}
.cx4-nav-item.active i { color: #7cc3ff; }

/* Grupo (accordion) */
.cx4-nav-group { }
.cx4-nav-head {
	width: 100%; display: flex; align-items: center; gap: 13px;
	padding: 12px 24px; background: transparent; border: none;
	color: #aebcd4; font-size: 0.9rem; font-weight: 600;
	cursor: pointer; text-align: left;
	border-left: 3px solid transparent;
	transition: background 0.18s, color 0.18s;
	font-family: 'Inter', sans-serif;
}
.cx4-nav-head i:first-child { font-size: 1.2rem; width: 22px; text-align: center; color: #5db8ff; }
.cx4-nav-head span { flex: 1; }
.cx4-nav-head .chevron { font-size: 1.1rem; color: #56688a; transition: transform 0.3s ease; }
.cx4-nav-head:hover { background: rgba(255,255,255,0.05); color: #fff; }
.cx4-nav-group.open > .cx4-nav-head { color: #fff; }
.cx4-nav-group.open > .cx4-nav-head .chevron { transform: rotate(180deg); color: #5db8ff; }

/* Submenu expansível — estilo ÁRVORE (tree) */
.cx4-nav-sub {
	max-height: 0; overflow: hidden;
	transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1);
	background: rgba(0,0,0,0.20);
	position: relative;
}
.cx4-nav-group.open > .cx4-nav-sub { max-height: 600px; }
/* tronco vertical da árvore */
.cx4-nav-sub::before {
	content: ''; position: absolute;
	left: 39px; top: 2px; bottom: 12px;
	width: 2px; background: rgba(93,184,255,0.22);
}
.cx4-nav-sub a {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 24px 10px 58px; color: #8a9bb8; text-decoration: none;
	font-size: 0.86rem; font-weight: 500;
	transition: all 0.16s;
	position: relative;
}
/* galho horizontal + nó */
.cx4-nav-sub a::before {
	content: ''; position: absolute; left: 39px; top: 50%;
	width: 13px; height: 2px; background: rgba(93,184,255,0.30);
	transform: translateY(-50%); transition: background 0.16s;
}
.cx4-nav-sub a::after {
	content: ''; position: absolute; left: 36px; top: 50%;
	width: 7px; height: 7px; border-radius: 50%;
	background: #2c3d5c; border: 2px solid #0a1834;
	transform: translateY(-50%); transition: all 0.16s; z-index: 1;
}
.cx4-nav-sub a i { color: #9fc0ef; opacity: .92; transition: color 0.16s, opacity 0.16s; }
.cx4-nav-sub a:hover { color: #fff; }
.cx4-nav-sub a:hover i, .cx4-nav-sub a.active i { color: #5db8ff; opacity: 1; }
.cx4-nav-sub a:hover::after { background: #5db8ff; }
.cx4-nav-sub a.active { color: #fff; font-weight: 600; }
.cx4-nav-sub a.active::before { background: #5db8ff; }
.cx4-nav-sub a.active::after { background: #5db8ff; box-shadow: 0 0 10px #5db8ff; border-color: #0a1834; }
.cx4-side-foot {
	padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.07);
	display: flex; flex-direction: column; gap: 6px;
}
.cx4-side-mini {
	display: flex; align-items: center; gap: 8px;
	color: #8a9bb8; font-size: 0.76rem; text-decoration: none;
	padding: 6px 8px; border-radius: 8px; transition: all 0.18s;
}
.cx4-side-mini i { color: #5db8ff; font-size: 1rem; }
.cx4-side-mini:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Topbar glass */
.cx4-topbar {
	position: sticky; top: 0; z-index: 1020;
	height: 64px; display: flex; align-items: center; gap: 12px;
	padding: 0 26px;
	background: rgba(255,255,255,0.82);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid rgba(15,42,80,0.07);
}
.cx4-topbar-spacer { flex: 1; }
.cx4-side-toggle {
	display: none; background: rgba(56,139,253,0.10); border: none;
	color: #1e6fdb; width: 42px; height: 42px; border-radius: 11px;
	font-size: 1.3rem; cursor: pointer; align-items: center; justify-content: center;
}
.cx4-topbar-brand-sm { display: none; }
.cx4-topbar-brand-sm img { height: 26px; filter: brightness(0) invert(1); }
.cx4-top-icon {
	background: transparent; border: none; color: #5a6b85;
	width: 42px; height: 42px; border-radius: 11px; font-size: 1.3rem; cursor: pointer;
	transition: all 0.18s; align-items: center; justify-content: center; display: inline-flex;
}
.cx4-top-icon:hover { background: rgba(56,139,253,0.08); color: #1e6fdb; }
.cx4-top-user {
	display: inline-flex; align-items: center; gap: 9px;
	background: transparent; border: none; cursor: pointer;
	padding: 6px 10px; border-radius: 12px; transition: background 0.18s;
}
.cx4-top-user:hover { background: rgba(56,139,253,0.07); }
.cx4-top-user img { width: 36px; height: 36px; object-fit: cover; border: 2px solid rgba(30,111,219,0.2); }
.cx4-top-user-name { font-weight: 600; color: #0a1f44; font-size: 0.9rem; }
.cx4-top-user i { color: #8a9bb8; }

/* Empurra o conteúdo pra direita da sidebar */
#layout-wrapper { margin-left: var(--cx4-side-w) !important; min-height: 100vh; }
.container-fluid > #layout-wrapper { margin-left: var(--cx4-side-w) !important; }
body[data-layout] .main-content { padding-top: 0 !important; }
.main-content { min-height: calc(100vh - 64px); }
.page-content { padding: 26px 18px 56px !important; }
.container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

/* Backdrop (mobile) */
.cx4-side-backdrop {
	position: fixed; inset: 0; background: rgba(5,11,31,0.5);
	backdrop-filter: blur(4px); opacity: 0; pointer-events: none;
	transition: opacity 0.3s ease; z-index: 1030;
}

/* ── Responsivo: sidebar off-canvas ── */
@media (max-width: 991.98px) {
	.cx4-side { transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }
	body.cx4-side-open .cx4-side { transform: translateX(0); }
	body.cx4-side-open .cx4-side-backdrop { opacity: 1; pointer-events: auto; }
	#layout-wrapper, .container-fluid > #layout-wrapper { margin-left: 0 !important; }
	.cx4-side-toggle { display: inline-flex; }
	.cx4-topbar-brand-sm { display: inline-flex; align-items: center; }
	.page-content { padding: 20px 16px 50px !important; }
}
h1,h2,h3,h4,h5,h6,.page-title {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	color: var(--cx4-azul-escuro) !important;
	letter-spacing: -0.015em;
}

/* ── Topbar / Navbar ── */
#page-topbar,
.navbar-header,
.topnav,
.navbar-brand-box {
	background: linear-gradient(135deg, var(--cx4-dark1) 0%, var(--cx4-dark2) 100%) !important;
	box-shadow: 0 4px 24px -8px rgba(5,11,31,0.4) !important;
	border: none !important;
}
.topnav {
	box-shadow: 0 6px 28px -10px rgba(5,11,31,0.35) !important;
}
.topnav .navbar-nav .nav-link {
	color: rgba(255,255,255,0.78) !important;
	font-weight: 600 !important;
	font-size: 0.84rem !important;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}
.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link.active,
.topnav .navbar-nav .nav-item.active > .nav-link {
	color: #fff !important;
}
.topnav .navbar-nav .nav-link i {
	color: var(--cx4-azul-claro) !important;
}
.topnav .dropdown-item.active,
.topnav .dropdown-item:hover {
	background: rgba(56,139,253,0.10) !important;
	color: var(--cx4-azul) !important;
}
/* logo do topbar: logo-light.png já é branca (substituída) — sem filtro.
   logo-dark.png (preta, fallback) recebe invert pra ficar branca. */
.navbar-brand-box .logo-light img { filter: none !important; }
.navbar-brand-box .logo-dark img { filter: brightness(0) invert(1); }
.navbar-brand-box .logo-lg img { height: 38px !important; width: auto !important; }
.navbar-brand-box .logo-sm img { height: 26px !important; width: auto !important; }

/* Header topbar (parte superior fixa) */
#page-topbar { backdrop-filter: blur(10px); }
.header-item { color: rgba(255,255,255,0.85) !important; }
.header-profile-user { border: 2px solid rgba(255,255,255,0.2); }

/* ── Cards — Material elevation (dp) ── */
.card {
	border: none !important;
	border-radius: 10px !important;
	background: #fff !important;
	/* elevation 2dp */
	box-shadow: 0 2px 1px -1px rgba(0,0,0,.06), 0 1px 1px 0 rgba(0,0,0,.07), 0 1px 3px 0 rgba(0,0,0,.09) !important;
	transition: box-shadow 0.28s cubic-bezier(0.4,0,0.2,1), transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
	overflow: hidden;
}
.card:hover {
	transform: translateY(-2px);
	/* elevation 8dp */
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.10), 0 8px 10px 1px rgba(0,0,0,.08), 0 3px 14px 2px rgba(0,0,0,.07) !important;
}
.card-body { padding: 1.4rem !important; }
.card-title { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; }

/* Cards de link/atalho no dashboard */
.card .card-body i,
.card .card-body .avatar-title {
	color: var(--cx4-azul) !important;
}

/* ── Page title box ── */
.page-title-box, .page-title-box-alt {
	border-bottom: none !important;
}
.page-title {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
}
.breadcrumb-item a { color: var(--cx4-azul) !important; text-decoration: none; }
.breadcrumb-item.active { color: #8a9bb8 !important; }

/* ══════════════════════════════════════════════
   BOTÕES — MATERIAL DESIGN (elevation + ripple)
   ══════════════════════════════════════════════ */
.btn {
	position: relative;
	overflow: hidden;
	border: none !important;
	border-radius: 6px !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.8rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.055em !important;
	padding: 0.55rem 1.3rem !important;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,.18), 0 2px 2px 0 rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.10) !important;
	transition: box-shadow .28s cubic-bezier(.4,0,.2,1), background-color .2s ease, transform .1s ease !important;
}
.btn:hover {
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.20), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !important;
}
.btn:active {
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.20), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !important;
}
/* Ripple — onda de clique Material (CSS puro) */
.btn::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 8px; height: 8px;
	background: rgba(255,255,255,0.55);
	opacity: 0;
	border-radius: 50%;
	transform: translate(-50%,-50%) scale(1);
	pointer-events: none;
}
.btn:active::after {
	animation: cx4Ripple 0.55s ease-out;
}
@keyframes cx4Ripple {
	0%   { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
	100% { opacity: 0;   transform: translate(-50%,-50%) scale(40); }
}

/* Cores sólidas (Material não usa gradiente em botão) */
.btn-primary, .btn-info { background-color: var(--cx4-azul) !important; color: #fff !important; }
.btn-primary:hover, .btn-info:hover { background-color: #1a5fbf !important; color: #fff !important; }
.btn-success { background-color: #2e9e5b !important; color: #fff !important; }
.btn-success:hover { background-color: #268a4f !important; }
.btn-danger { background-color: #e11d48 !important; color: #fff !important; }
.btn-danger:hover { background-color: #c4163d !important; }
.btn-warning { background-color: #f59e0b !important; color: #fff !important; }
.btn-secondary { background-color: #64748b !important; color: #fff !important; }
.btn-secondary:hover { background-color: #556071 !important; }
.btn-light { background-color: #eef2f8 !important; color: #34465e !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; }
.btn-dark { background-color: var(--cx4-azul-escuro) !important; color:#fff !important; }

/* Outline → Material "text/outlined button" */
.btn-outline-primary {
	background: transparent !important;
	border: 1.5px solid rgba(30,111,219,0.5) !important;
	color: var(--cx4-azul) !important;
	box-shadow: none !important;
}
.btn-outline-primary:hover {
	background: rgba(30,111,219,0.08) !important;
	border-color: var(--cx4-azul) !important;
	color: var(--cx4-azul) !important;
	box-shadow: none !important;
}
.btn-outline-primary::after { background: rgba(30,111,219,0.25); }
.btn-rounded { border-radius: 100px !important; }
.btn-sm { padding: 0.35rem 0.85rem !important; font-size: 0.72rem !important; }

/* FAB-like (ícone redondo) se houver */
.btn-icon, .btn.rounded-circle { border-radius: 50% !important; width: 42px; height: 42px; padding: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   COMPONENTES PREMIUM — estilo MudBlazor "outlined"
   ══════════════════════════════════════════════════════════════ */

/* Inputs / textarea / select */
.form-control, textarea.form-control, .custom-select,
.select2-container--default .select2-selection--single {
	border: 1.5px solid #dde5f0 !important;
	border-radius: 10px !important;
	font-size: 0.92rem !important;
	color: var(--cx4-azul-escuro) !important;
	background: #fff !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
	padding: 0.6rem 0.9rem !important;
	min-height: 44px;
	box-shadow: none !important;
}
.form-control:hover, .custom-select:hover { border-color: #b9c8de !important; }
.form-control:focus, .custom-select:focus {
	border-color: var(--cx4-azul) !important;
	box-shadow: 0 0 0 4px rgba(30,111,219,0.12) !important;
	background: #fff !important;
}
.form-control::placeholder { color: #aab7cc !important; }
textarea.form-control { min-height: 110px; resize: vertical; }
label, .col-form-label {
	font-weight: 700 !important;
	color: #6a7a96 !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	margin-bottom: 8px !important;
	font-family: 'Inter', sans-serif !important;
}
.form-group { margin-bottom: 1.4rem !important; }
/* alinhamento consistente dos forms (Chamado, RAT, etc.):
   linhas de campo simples centralizam label+campo; linhas de editor/arquivo
   alinham no topo. select2/inputs com mesma altura. */
.card-body .form-group.row { align-items: center; }
.card-body .form-group.row:has(textarea),
.card-body .form-group.row:has(.note-editor),
.card-body .form-group.row:has(.summernote),
.card-body .form-group.row:has(.custom-file),
.card-body .form-group.row:has(.dropzone) { align-items: flex-start; }
.card-body .form-group.row > .col-form-label {
	padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important;
}
.card-body .select2-container { width: 100% !important; }
.card-body .form-control, .card-body .custom-select,
.card-body .select2-container--default .select2-selection--single { height: 44px !important; min-height: 44px !important; }
.card-body textarea.form-control, .card-body .note-editor { height: auto !important; }
/* fallback p/ navegadores sem :has() — labels de editor não ficam centralizadas no meio */
.card-body .form-group.row > label.col-form-label { align-self: center; }
/* select2: texto centralizado verticalmente — line-height = altura da caixa, SEM flex
   (flex conflita com a seta absoluta do select2 e "entorta" o texto após o init) */
.select2-container--default .select2-selection--single {
	height: 44px !important; padding: 0 !important; display: block !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px !important; padding-left: 14px !important; padding-right: 30px !important;
	display: block !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px !important; top: 0 !important; right: 8px !important;
}
/* valor dentro dos campos com mais presença */
.form-control, .select2-container .select2-selection__rendered {
	font-weight: 500 !important;
}

/* Checkbox e Switch (Bootstrap custom-control) — Material */
.custom-control-label::before {
	border: 2px solid #c3d0e2 !important;
	background: #fff !important;
	border-radius: 5px !important;
	width: 1.15rem; height: 1.15rem; top: 0.15rem;
	transition: all .2s ease !important;
}
.custom-control-label::after { top: 0.15rem; width: 1.15rem; height: 1.15rem; }
.custom-control-input:checked ~ .custom-control-label::before {
	background: var(--cx4-azul) !important; border-color: var(--cx4-azul) !important;
	box-shadow: 0 4px 10px -3px rgba(30,111,219,0.5) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 4px rgba(30,111,219,0.15) !important;
}
.custom-control-label { font-weight: 500 !important; color: #44546b !important; padding-left: 4px; cursor: pointer; }
/* Switch */
.custom-switch .custom-control-label::before { border-radius: 100px !important; width: 2.2rem; height: 1.2rem; }
.custom-switch .custom-control-label::after {
	background: #fff !important; border-radius: 50% !important;
	width: 0.9rem; height: 0.9rem; top: 0.3rem; left: -2.1rem;
	box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
	transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(1rem); }

/* input-group (botão anexo, etc) */
.input-group-text {
	background: #f4f7fc !important; border: 1.5px solid #dde5f0 !important;
	border-radius: 10px !important; color: #5a6b85 !important;
}

/* Tabs (nav-tabs / nav-pills) Material */
.nav-tabs { border-bottom: 2px solid #eef2f8 !important; }
.nav-tabs .nav-link {
	border: none !important; border-bottom: 2px solid transparent !important;
	color: #6a7a96 !important; font-weight: 600 !important; font-size: 0.9rem;
	padding: 0.7rem 1.1rem !important; border-radius: 0 !important;
	transition: all .2s ease;
}
.nav-tabs .nav-link:hover { color: var(--cx4-azul) !important; }
.nav-tabs .nav-link.active {
	color: var(--cx4-azul) !important; background: transparent !important;
	border-bottom: 2px solid var(--cx4-azul) !important;
}
.nav-pills .nav-link.active { background: var(--cx4-azul) !important; border-radius: 8px !important; }

/* Modal Material */
.modal-content { border: none !important; border-radius: 16px !important; box-shadow: 0 24px 60px -12px rgba(15,42,80,.3) !important; overflow: hidden; }
.modal-header { border-bottom: 1px solid #eef2f8 !important; padding: 18px 24px !important; }
.modal-title { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; color: #0a1f44 !important; }
.modal-body { padding: 24px !important; }
/* Modal de ação do Kanban — achata o card interno do formulário */
.cx4-acao-modal .modal-dialog { max-width: 1060px; }
.cx4-acao-modal .modal-body > #divAcao > .row { margin: 0 !important; }
.cx4-acao-modal .modal-body > #divAcao > .row > .col-12 { padding: 0 !important; }
.cx4-acao-modal .modal-body .card { box-shadow: none !important; border: none !important; margin: 0 !important; background: transparent !important; }
.cx4-acao-modal .modal-body .card:hover { transform: none !important; box-shadow: none !important; }
.cx4-acao-modal .form-control:hover { border-color: rgba(15,42,80,.20) !important; }
html.cx4-dark .cx4-acao-modal .form-control:hover { border-color: rgba(255,255,255,.20) !important; }
.cx4-acao-modal .modal-body .card-body { padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
.cx4-acao-modal .form-group { margin-bottom: 0.8rem !important; }
.cx4-acao-modal .col-form-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a9bb8 !important; }
/* campos flat (sem relevo): fundo transparente (rente ao modal) + contorno fino */
.cx4-acao-modal .form-control {
	height: 44px; box-shadow: none !important; border-radius: 8px !important;
	border: 1px solid rgba(15,42,80,.12) !important; background: transparent !important;
}
.cx4-acao-modal textarea.form-control { height: auto; }
.cx4-acao-modal .form-control:focus { background: transparent !important; border-color: #1e6fdb !important; box-shadow: none !important; }
html.cx4-dark .cx4-acao-modal .form-control { background: transparent !important; border: 1px solid rgba(255,255,255,.12) !important; color: #e6edf7 !important; }
html.cx4-dark .cx4-acao-modal .form-control:focus { background: transparent !important; border-color: #5db8ff !important; box-shadow: none !important; }
/* summernote flat */
.cx4-acao-modal .note-editor.note-frame { border: 1px solid transparent !important; border-radius: 8px !important; box-shadow: none !important; }
.cx4-acao-modal .note-toolbar { background: transparent !important; border: none !important; border-bottom: 1px solid #eef2f8 !important; padding: 6px 6px !important; }
.cx4-acao-modal .note-btn { background: transparent !important; border: none !important; color: #5a6b85 !important; box-shadow: none !important; padding: 6px 9px !important; }
.cx4-acao-modal .note-btn:hover { background: rgba(30,111,219,.10) !important; color: #1e6fdb !important; }
html.cx4-dark .cx4-acao-modal .note-editor.note-frame { border-color: rgba(255,255,255,.08) !important; }
html.cx4-dark .cx4-acao-modal .note-toolbar { background: transparent !important; border-bottom-color: rgba(255,255,255,.08) !important; }
html.cx4-dark .cx4-acao-modal .note-btn { background: transparent !important; border: none !important; color: #9fb0cc !important; }
html.cx4-dark .cx4-acao-modal .note-btn:hover { background: rgba(93,184,255,.14) !important; color: #5db8ff !important; }
.cx4-acao-modal .note-editor.note-frame { background: transparent !important; border: 1px solid rgba(15,42,80,.12) !important; }
.cx4-acao-modal .note-editable { background: transparent !important; }
html.cx4-dark .cx4-acao-modal .note-editor.note-frame { background: transparent !important; border-color: rgba(255,255,255,.12) !important; }
html.cx4-dark .cx4-acao-modal .note-editable { background: transparent !important; color: #e6edf7 !important; }
/* datepicker / datetimepicker acima do modal (senão fica escondido atrás) */
.datepicker.dropdown-menu, .datepicker, .datetimepicker { z-index: 1650 !important; }
html.cx4-dark .datepicker.dropdown-menu, html.cx4-dark .datepicker, html.cx4-dark .datetimepicker {
	background: #1a2440 !important; color: #e6edf7 !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	box-shadow: 0 12px 30px -8px rgba(0,0,0,.6) !important;
}
html.cx4-dark .datepicker table tr td,
html.cx4-dark .datepicker table tr th,
html.cx4-dark .datetimepicker table tr td,
html.cx4-dark .datetimepicker table tr th { color: #cdd7e6 !important; }
html.cx4-dark .datepicker table tr td.day:hover,
html.cx4-dark .datepicker table tr td.focused,
html.cx4-dark .datetimepicker table tr td.day:hover,
html.cx4-dark .datetimepicker table tr td.hour:hover,
html.cx4-dark .datetimepicker table tr td.minute:hover,
html.cx4-dark .datetimepicker table tr td.focused { background: rgba(93,184,255,.16) !important; }
html.cx4-dark .datepicker table tr td.active,
html.cx4-dark .datepicker table tr td.active:hover,
html.cx4-dark .datepicker table tr td.today,
html.cx4-dark .datetimepicker table tr td.active,
html.cx4-dark .datetimepicker table tr td.active:hover,
html.cx4-dark .datetimepicker table tr td.today { background: #1e6fdb !important; color: #fff !important; }
html.cx4-dark .datepicker table tr td.old,
html.cx4-dark .datepicker table tr td.new,
html.cx4-dark .datetimepicker table tr td.old,
html.cx4-dark .datetimepicker table tr td.new { color: #6b7c98 !important; }
/* botões do rodapé do form */
.cx4-acao-modal .btn { border-radius: 9px; font-weight: 600; }
.cx4-acao-modal .form-check-input { width: 16px; height: 16px; }
.modal-footer { border-top: 1px solid #eef2f8 !important; padding: 16px 24px !important; }

/* Tooltip */
.tooltip-inner { background: #0a1f44 !important; border-radius: 8px !important; font-size: 0.78rem; padding: 6px 12px; }

/* SweetAlert (já incluído no sistema) */
.swal2-popup { border-radius: 18px !important; font-family: 'Inter', sans-serif !important; }
.swal2-styled.swal2-confirm { background: var(--cx4-azul) !important; border-radius: 10px !important; box-shadow: 0 8px 20px -6px rgba(30,111,219,.5) !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; }
.swal2-title { font-family: 'Plus Jakarta Sans', sans-serif !important; color: #0a1f44 !important; }

/* ══════════════════════════════════════════════
   TABELAS — estilo MudTable (MudBlazor)
   ══════════════════════════════════════════════ */
.table { color: #34465e !important; border-collapse: separate !important; border-spacing: 0; }
.table thead th {
	background: #fbfcfe !important;
	color: #6a7a96 !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.7rem !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	border-top: none !important;
	border-bottom: 2px solid #eef2f8 !important;
	padding: 10px 12px !important;
	white-space: nowrap;
	position: sticky; top: 0; z-index: 2;
}
.table tbody td {
	border-top: 1px solid #f2f5fa !important;
	padding: 9px 12px !important;
	vertical-align: middle !important;
	font-size: 0.85rem;
	color: #44546e;
}
.table tbody tr { transition: background 0.16s ease, box-shadow 0.16s ease; }
.table-hover tbody tr:hover,
#datatable-buttons tbody tr:hover {
	background: rgba(56,139,253,0.05) !important;
	cursor: pointer;
}
/* zebra sutil */
.table-striped tbody tr:nth-of-type(odd) { background: #fcfdff !important; }
.table-bordered, .table-bordered td, .table-bordered th { border: none !important; }
.table-responsive { border-radius: 12px; }

/* ── Grids: ocupar todo o espaço + rolagem horizontal em telas estreitas ── */
.dataTables_wrapper, .table-responsive, .table-responsive1,
#datatable-buttons, #datatable-acao, #datatable-ratlista, #datatable-aut,
table.dataTable { width: 100% !important; }
/* a classe .table-responsive aplicada direto no <table> vira display:block e
   encolhe a tabela; força comportamento de tabela pra preencher a largura */
table.table-responsive, table.dataTable, table.table { display: table !important; }

/* ── Ícones de ação nas linhas (abrir / kanban / imprimir) ── */
.cx4-grid-act {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px; margin: 0 2px;
	color: #1e6fdb !important; background: rgba(30,111,219,0.08);
	transition: all 0.15s ease; text-decoration: none !important;
}
.cx4-grid-act i { font-size: 1.02rem; line-height: 1; }
.cx4-grid-act:hover { background: #1e6fdb; color: #fff !important; transform: translateY(-1px); }
html.cx4-dark .cx4-grid-act { color: #5db8ff !important; background: rgba(93,184,255,0.12); }
html.cx4-dark .cx4-grid-act:hover { background: #1e6fdb; color: #fff !important; }
/* PNGs antigos de ação que ainda restem: normaliza tamanho e ajusta no dark */
#datatable-buttons td a img, #datatable-acao td a img, .table td a img { height: 18px; width: auto; vertical-align: middle; }
html.cx4-dark #datatable-buttons td a img, html.cx4-dark .table td a img { filter: invert(0.85) hue-rotate(180deg) brightness(1.1); }
.table-responsive, .table-responsive1 {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}
/* a barra superior (botões + busca) usa toda a largura */
.dataTables_wrapper > .row:first-child { margin: 0 0 14px !important; }
.dataTables_wrapper .dataTables_filter { float: right; }
.dataTables_wrapper .dataTables_filter input { min-width: 240px; }
/* seletor de quantidade por página (10 / 25 / 50 / Todos) */
.dataTables_length { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dataTables_length label { margin: 0; font-weight: 600; color: #6a7a96; font-size: 0.82rem; white-space: nowrap; }
.dataTables_length select { width: auto !important; min-width: 84px; padding: 6px 30px 6px 12px !important; height: auto !important; }
html.cx4-dark .dataTables_length label { color: #8ea0c0 !important; }
/* cards de grid: menos padding lateral = mais área pra tabela */
.card-body { padding: 1.15rem 1.1rem !important; }
@media (min-width: 1600px) {
	.page-content { padding-left: 26px !important; padding-right: 26px !important; }
}

/* Destaque "precisa de atenção" na coluna # — âmbar suave em vez de bloco laranja */
td.cx4-td-atencao {
	position: relative;
	background: rgba(245,158,11,0.12) !important;
	color: #b97608 !important;
	font-weight: 800 !important;
	box-shadow: inset 3px 0 0 #f59e0b;
}
td.cx4-td-atencao::after {
	content: ''; display: inline-block; width: 6px; height: 6px;
	border-radius: 50%; background: #f59e0b; margin-left: 6px; vertical-align: middle;
}
html.cx4-dark td.cx4-td-atencao { background: rgba(245,158,11,0.16) !important; color: #fbbf24 !important; }

/* Chip de status (MudChip) — sobrepõe o bg inline da célula */
.cx4-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 13px; border-radius: 100px;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
	color: #fff; white-space: nowrap; line-height: 1;
	box-shadow: 0 2px 6px -2px rgba(0,0,0,0.28);
}
.cx4-chip::before {
	content:''; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; opacity: 0.55;
}
/* neutraliza o bg colorido que o JS aplica na célula de status (col 2),
   pra cor ficar só no chip */
#datatable-buttons tbody td:nth-child(2) {
	background: transparent !important; color: inherit !important;
}

/* ══════════════════════════════════════════════
   SELECT nativo — estilo MudSelect
   ══════════════════════════════════════════════ */
select.form-control, select.custom-select, .custom-select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e6fdb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 18px !important;
	padding-right: 38px !important;
	cursor: pointer;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--cx4-azul) !important;
	border-color: var(--cx4-azul) !important;
	color: #fff !important;
	border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border-radius: 8px !important;
}

/* ── Badges ── */
.badge {
	border-radius: 100px !important;
	font-weight: 700 !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.03em;
	padding: 0.35em 0.7em;
}
.badge-primary, .badge-info { background: var(--cx4-azul) !important; }
.badge-success { background: var(--cx4-verde) !important; }
.badge-soft-primary { background: rgba(30,111,219,0.12) !important; color: var(--cx4-azul) !important; }
.badge-soft-success { background: rgba(37,211,102,0.14) !important; color: #15803d !important; }
.badge-soft-danger { background: rgba(225,29,72,0.12) !important; color: #e11d48 !important; }
.badge-soft-warning { background: rgba(234,88,12,0.12) !important; color: #ea580c !important; }

/* ── Links / texto primary ── */
a { color: var(--cx4-azul); }
.text-primary { color: var(--cx4-azul) !important; }
.bg-primary { background: var(--cx4-azul) !important; }
.bg-soft-primary { background: rgba(30,111,219,0.10) !important; }

/* ── Alerts ── */
.alert { border-radius: 12px !important; border: none !important; }
.alert-success { background: rgba(37,211,102,0.12) !important; color: #15803d !important; }
.alert-danger { background: rgba(225,29,72,0.10) !important; color: #e11d48 !important; }
.alert-info { background: rgba(30,111,219,0.10) !important; color: var(--cx4-azul) !important; }

/* ── Kanban (plano de ação) ── */
.tasks-list .card, .kanban-box {
	border-left: 3px solid var(--cx4-azul) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN — gradient mesh premium (igual hero do site)
   ═══════════════════════════════════════════════════════════════ */
body.cx4-login {
	background:
		radial-gradient(ellipse 60% 50% at 20% 20%, rgba(56,139,253,0.28) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 80%, rgba(125,87,224,0.20) 0%, transparent 60%),
		linear-gradient(180deg, var(--cx4-dark1) 0%, var(--cx4-dark2) 100%) !important;
	min-height: 100vh;
	overflow: hidden;   /* sem scroll desnecessário */
}
/* Canvas animado de fundo do login */
#cx4LoginBg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
body.cx4-login .account-pages, body.cx4-login .home-btn { position: relative; z-index: 1; }
/* Centraliza o card na tela, sem scroll */
body.cx4-login .account-pages {
	background: transparent !important;
	display: flex !important; align-items: center; justify-content: center;
	min-height: 100vh !important;
	margin: 0 !important; padding: 20px 0 !important;
}
body.cx4-login .account-pages > .container { width: 100%; }
/* Logo centralizada no topo do card */
.logo-admin { display: inline-block !important; margin: 0 0 4px !important; background: transparent !important; box-shadow: none !important; }
.logo-admin img { filter: brightness(0) invert(1) !important; height: 40px !important; width: auto !important; max-width: 170px; }
.account-pages .card {
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 22px !important;
	box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5) !important;
	backdrop-filter: blur(10px);
	background: rgba(255,255,255,0.98) !important;
}
.account-pages .card:hover { transform: none; }
.bg-login {
	background: linear-gradient(135deg, var(--cx4-azul-claro) 0%, var(--cx4-azul) 60%, var(--cx4-azul-escuro) 100%) !important;
	position: relative;
	padding: 36px 20px 28px !important;
	overflow: hidden;
}
.bg-login-overlay {
	background-image: none !important;
	opacity: 1 !important;
}
.bg-login::after {
	content:'';
	position: absolute; top:-60px; right:-60px;
	width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
	border-radius: 50%;
}
/* Header do login — controle total (logo centralizada acima do texto) */
.cx4-login-head {
	text-align: center !important;
	padding: 34px 24px 28px !important;
	position: relative;
}
.cx4-login-head .bg-login-overlay { display: none !important; }
.cx4-login-brand {
	display: block !important;
	margin: 0 auto 14px !important;
	text-align: center;
}
.cx4-login-brand img {
	height: 38px !important; width: auto !important; max-width: 150px !important;
	filter: brightness(0) invert(1) !important;
	display: inline-block !important;
}
.cx4-login-head h5 {
	color: #fff !important; font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 800 !important; font-size: 1.25rem !important; margin: 0 0 2px !important;
}
.cx4-login-head p { color: rgba(255,255,255,0.85) !important; margin: 0 !important; font-size: 0.92rem; }
.bg-login h5 { color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; }
.bg-login p { color: rgba(255,255,255,0.85) !important; }
.account-pages .btn-primary {
	width: 100%;
	padding: 0.7rem !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
}
.home-btn a { color:#fff !important; opacity:0.7; }
.home-btn a:hover { opacity:1; }
.account-pages .mt-5 p { color: rgba(255,255,255,0.6) !important; }

/* ── Scrollbar premium ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f8; }
::-webkit-scrollbar-thumb { background: #c3d0e2; border-radius: 6px; border: 2px solid #eef2f8; }
::-webkit-scrollbar-thumb:hover { background: var(--cx4-azul-claro); }

/* ══════════════════════════════════════════════
   KPIs do Dashboard
   ══════════════════════════════════════════════ */
.cx4-kpis { margin-bottom: 8px; }
.cx4-kpi {
	background: #fff;
	border-radius: 14px;
	padding: 22px 24px;
	display: flex; align-items: center; gap: 18px;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,.06),0 1px 1px 0 rgba(0,0,0,.07),0 1px 3px 0 rgba(0,0,0,.09);
	transition: box-shadow .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;
}
.cx4-kpi:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.10),0 8px 10px 1px rgba(0,0,0,.08),0 3px 14px 2px rgba(0,0,0,.07);
}
.cx4-kpi-ico {
	width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem; color: #fff;
}
.cx4-kpi-ico.ico-azul    { background: linear-gradient(135deg,#5db8ff,#1e6fdb); box-shadow:0 10px 22px -8px rgba(30,111,219,.6); }
.cx4-kpi-ico.ico-verde   { background: linear-gradient(135deg,#34d399,#059669); box-shadow:0 10px 22px -8px rgba(5,150,105,.6); }
.cx4-kpi-ico.ico-roxo    { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow:0 10px 22px -8px rgba(124,58,237,.6); }
.cx4-kpi-ico.ico-laranja { background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 10px 22px -8px rgba(245,158,11,.6); }
.cx4-kpi-num {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800; font-size: 2rem; line-height: 1;
	color: #0a1f44; letter-spacing: -0.03em;
}
.cx4-kpi-lbl { font-size: 0.8rem; color: #8a9bb8; font-weight: 600; margin-top: 6px; }

/* Animação de entrada (AOS-like) */
[data-cx4-aos] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
[data-cx4-aos].cx4-in { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════
   HEADER DE PÁGINA (premium, com ícone + ação)
   ══════════════════════════════════════════════ */
.cx4-page-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	margin-bottom: 22px;
}
.cx4-page-head-left { display: flex; align-items: center; gap: 16px; }
.cx4-page-head-icon {
	width: 54px; height: 54px; border-radius: 14px;
	background: linear-gradient(135deg, #5db8ff, #1e6fdb);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 1.7rem; box-shadow: 0 12px 26px -8px rgba(30,111,219,0.5);
	flex-shrink: 0;
}
.cx4-page-head-title {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 800 !important; font-size: 1.5rem !important;
	color: #0a1f44 !important; margin: 0 !important; line-height: 1.1;
}
.cx4-page-head-sub { color: #8a9bb8 !important; font-size: 0.88rem; margin: 2px 0 0 !important; }
.cx4-page-head .btn { white-space: nowrap; }
html.cx4-dark .cx4-page-head-title { color: #f0f4fa !important; }

/* Toolbar de filtros */
.cx4-filtros {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding-bottom: 18px; margin-bottom: 18px;
	border-bottom: 1px solid #eef2f8;
}
.cx4-filtros-switches { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.cx4-filtros .custom-control-label { font-size: 0.85rem; }
html.cx4-dark .cx4-filtros { border-bottom-color: rgba(255,255,255,0.07); }

/* Ícones nos botões do DataTables */
.dt-button.buttons-print::before { content: '\F42A'; font-family: 'Material Design Icons'; margin-right: 6px; }
.dt-button.buttons-colvis::before { content: '\F835'; font-family: 'Material Design Icons'; margin-right: 6px; }
.dt-button.buttons-excel::before, .dt-button.buttons-csv::before { content: '\F21B'; font-family: 'Material Design Icons'; margin-right: 6px; }
.dt-button.buttons-copy::before { content: '\F18F'; font-family: 'Material Design Icons'; margin-right: 6px; }
.dt-button.buttons-pdf::before { content: '\F226'; font-family: 'Material Design Icons'; margin-right: 6px; }

/* ── Atalhos rápidos (ícones) ── */
.cx4-shortcuts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 26px;
}
.cx4-shortcut {
	display: flex; align-items: center; gap: 14px;
	background: #fff; border-radius: 14px; padding: 18px 20px;
	text-decoration: none !important;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,.06),0 1px 1px 0 rgba(0,0,0,.07),0 1px 3px 0 rgba(0,0,0,.09);
	transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
	border: 1px solid transparent;
}
.cx4-shortcut:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.08),0 3px 14px 2px rgba(0,0,0,.06);
	border-color: rgba(30,111,219,.18);
}
.cx4-shortcut-ico {
	width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 1.4rem;
}
.cx4-shortcut-ico.ico-azul    { background: linear-gradient(135deg,#5db8ff,#1e6fdb); box-shadow:0 8px 18px -6px rgba(30,111,219,.55); }
.cx4-shortcut-ico.ico-verde   { background: linear-gradient(135deg,#34d399,#059669); box-shadow:0 8px 18px -6px rgba(5,150,105,.55); }
.cx4-shortcut-ico.ico-roxo    { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow:0 8px 18px -6px rgba(124,58,237,.55); }
.cx4-shortcut-ico.ico-laranja { background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 8px 18px -6px rgba(245,158,11,.55); }
.cx4-shortcut-nome { flex: 1; font-weight: 600; color: #0a1f44; font-size: 0.95rem; font-family: 'Plus Jakarta Sans',sans-serif; }
.cx4-shortcut-arrow { color: #c3d0e2; font-size: 1.2rem; transition: transform .2s, color .2s; }
.cx4-shortcut:hover .cx4-shortcut-arrow { color: #1e6fdb; transform: translateX(4px); }

/* ── Cards de atalho do Dashboard (links) ── */
.col-xl-2 > .card { height: 100%; }
.col-xl-2 > .card .card-body {
	display: flex; align-items: center; justify-content: center;
	min-height: 130px; padding: 22px !important;
}
.col-xl-2 > .card .card-body img {
	height: auto !important;
	width: auto !important;
	max-height: 88px !important;
	max-width: 100% !important;
	object-fit: contain !important;
	transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
	filter: saturate(1.02);
}
.col-xl-2 > .card:hover .card-body img { transform: scale(1.07); }
.col-xl-2 > .card { cursor: pointer; }

/* ── DataTables — toolbar premium ── */
.dt-buttons { gap: 8px; display: inline-flex; flex-wrap: wrap; margin-bottom: 8px; }
.dt-button, .dt-buttons .btn, button.dt-button {
	background: linear-gradient(135deg, var(--cx4-azul-claro) 0%, var(--cx4-azul) 100%) !important;
	border: none !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 0.82rem !important;
	padding: 0.5rem 1rem !important;
	box-shadow: 0 6px 16px -6px rgba(30,111,219,0.45) !important;
	transition: all 0.22s ease !important;
}
.dt-button:hover, button.dt-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -6px rgba(30,111,219,0.55) !important;
	color:#fff !important;
}
/* botão "Abrir novo chamado" e afins (links custom) */
a.btn-novo, .btn-abrir, .btn-acao {
	background: linear-gradient(135deg, #2fd072 0%, #128C7E 100%) !important;
	border: none !important; color:#fff !important;
}

/* Campo de busca */
.dataTables_filter input {
	border: 1.5px solid #e3e9f2 !important;
	border-radius: 10px !important;
	padding: 0.5rem 0.85rem !important;
	margin-left: 8px;
	min-width: 220px;
	transition: all 0.2s ease;
}
.dataTables_filter input:focus {
	border-color: var(--cx4-azul) !important;
	box-shadow: 0 0 0 4px rgba(30,111,219,0.10) !important;
	outline: none;
}
.dataTables_filter label, .dataTables_length label { font-weight: 600; color: #5a6b85; font-size: 0.84rem; }
.dataTables_length select {
	border: 1.5px solid #e3e9f2 !important; border-radius: 8px !important; padding: 0.3rem 0.5rem;
}

/* Info + paginação */
.dataTables_info { color: #8a9bb8 !important; font-size: 0.82rem; padding-top: 14px !important; }
.dataTables_paginate { padding-top: 10px !important; }
.dataTables_paginate .paginate_button {
	border: 1px solid #e3e9f2 !important;
	border-radius: 8px !important;
	margin: 0 2px;
	padding: 0.35rem 0.7rem !important;
	color: #5a6b85 !important;
	transition: all 0.2s ease;
}
.dataTables_paginate .paginate_button:hover {
	background: rgba(56,139,253,0.08) !important;
	border-color: var(--cx4-azul) !important;
	color: var(--cx4-azul) !important;
}
.dataTables_paginate .paginate_button.current {
	background: linear-gradient(135deg, var(--cx4-azul-claro), var(--cx4-azul)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 6px 14px -6px rgba(30,111,219,0.5) !important;
}
/* Estado vazio "No Data Available" */
.dataTables_empty { color: #a3b1c9 !important; font-style: italic; padding: 28px !important; text-align: center; }

/* Card title das grids */
.card-title.mb-4 {
	font-size: 1.1rem !important;
	padding-bottom: 14px;
	border-bottom: 1px solid #f0f4fa;
	position: relative;
}
.card-title.mb-4::after {
	content:''; position:absolute; left:0; bottom:-1px;
	width: 36px; height: 2px;
	background: linear-gradient(90deg, var(--cx4-azul-claro), var(--cx4-azul));
	border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   KANBAN estilo TRELLO (planoacaoKanban) — board dedicado
   ══════════════════════════════════════════════════════════════ */
.cx4-page-head-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cx4-kb-readonly {
	display:flex; align-items:center; gap:8px;
	background:rgba(245,158,11,.12); color:#9a6a08;
	border:1px solid rgba(245,158,11,.3); border-radius:10px;
	padding:10px 14px; font-size:.82rem; font-weight:600; margin-bottom:14px;
}
.cx4-board {
	display:flex; gap:16px; align-items:flex-start;
	overflow-x:auto; padding:4px 2px 20px; min-height:60vh;
	scroll-snap-type:x proximity;
	user-select:none; -webkit-user-select:none; -ms-user-select:none;
}
.cx4-board::-webkit-scrollbar { height:10px; }
.cx4-board::-webkit-scrollbar-thumb { background:#c3d0e2; border-radius:6px; }
.cx4-board::-webkit-scrollbar-track { background:transparent; }
.cx4-col {
	flex:0 0 312px; width:312px; scroll-snap-align:start;
	background:#eef1f6; border-radius:16px;
	display:flex; flex-direction:column; max-height:calc(100vh - 230px);
	box-shadow:0 1px 3px rgba(9,30,66,.10);
}
.cx4-col-head {
	display:flex; align-items:center; justify-content:space-between;
	padding:13px 14px 11px; border-top:4px solid var(--kbc);
	border-radius:16px 16px 0 0; background:#fff;
}
.cx4-col-titlewrap { display:flex; align-items:center; gap:8px; }
.cx4-col-titlewrap > i { color:var(--kbc); font-size:1.15rem; }
.cx4-col-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.92rem; color:#0a1f44; }
.cx4-col-count {
	background:var(--kbc); color:#fff; font-size:.72rem; font-weight:700;
	min-width:22px; height:22px; padding:0 7px; border-radius:11px;
	display:inline-flex; align-items:center; justify-content:center;
}
.cx4-col-add {
	width:28px; height:28px; border-radius:8px; display:inline-flex;
	align-items:center; justify-content:center; color:#6a7a96 !important;
	text-decoration:none !important; transition:.15s;
}
.cx4-col-add:hover { background:var(--kbc); color:#fff !important; }
.cx4-list {
	padding:10px; overflow-y:auto; flex:1 1 auto; min-height:48px;
	display:flex; flex-direction:column; gap:9px;
}
.cx4-list::-webkit-scrollbar { width:8px; }
.cx4-list::-webkit-scrollbar-thumb { background:#cdd7e6; border-radius:5px; }
.cx4-col-empty .cx4-list::after {
	content:'Solte cartões aqui'; display:block; text-align:center;
	color:#9fb0c9; font-size:.78rem; padding:18px 0; border:2px dashed #d4dde9; border-radius:10px;
}
.cx4-card {
	position:relative; background:#fff; border-radius:11px; padding:12px 13px 11px;
	box-shadow:0 1px 2px rgba(9,30,66,.13), 0 0 1px rgba(9,30,66,.15);
	cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; overflow:hidden;
}
.cx4-card:hover { transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(9,30,66,.26); }
.cx4-card-strip { position:absolute; top:0; left:0; width:100%; height:4px; }
.cx4-card-top { display:flex; align-items:center; justify-content:space-between; margin:4px 0 7px; }
.cx4-card-id { font-size:.66rem; font-weight:800; letter-spacing:.03em; color:#8696b1; background:#eef1f6; padding:2px 7px; border-radius:6px; }
.cx4-card-due { font-size:.7rem; font-weight:600; color:#7a8aa6; display:inline-flex; align-items:center; gap:4px; }
.cx4-card-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.86rem; color:#0a1f44; line-height:1.32; }
.cx4-card-desc { font-size:.76rem; color:#64748b; line-height:1.45; margin-top:5px; }
.cx4-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:11px; gap:8px; }
.cx4-card-who { display:flex; align-items:center; gap:7px; font-size:.74rem; font-weight:600; color:#5a6b85; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx4-avatar {
	width:24px; height:24px; border-radius:50%; flex:0 0 24px; color:#fff; font-size:.66rem; font-weight:800;
	display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(9,30,66,.25);
}
.cx4-card-tag { font-size:.64rem; font-weight:700; color:#b8860b; background:rgba(245,158,11,.14); padding:2px 7px; border-radius:6px; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.cx4-col-newcard {
	display:flex; align-items:center; gap:7px; margin:2px 10px 11px; padding:8px 10px; border-radius:9px;
	color:#6a7a96 !important; font-size:.8rem; font-weight:600; text-decoration:none !important; transition:.15s;
}
.cx4-col-newcard:hover { background:rgba(30,111,219,.09); color:#1e6fdb !important; }
.cx4-card-ghost { opacity:.35; background:#dde6f2 !important; }
.cx4-card-ghost * { visibility:hidden; }
.cx4-card-chosen { box-shadow:0 10px 22px -8px rgba(9,30,66,.38) !important; }
.cx4-card-saving { opacity:.55; pointer-events:none; }
body.cx4-kb-dragging .cx4-card { cursor:grabbing; }
body.cx4-kb-dragging .cx4-list { background:rgba(30,111,219,.05); }
/* Kanban no dark */
html.cx4-dark .cx4-col { background:#0f1729; box-shadow:0 1px 3px rgba(0,0,0,.45); }
html.cx4-dark .cx4-col-head { background:#141d33; }
html.cx4-dark .cx4-col-title { color:#e8eefb; }
html.cx4-dark .cx4-card { background:#1a2440; box-shadow:0 1px 2px rgba(0,0,0,.5); }
html.cx4-dark .cx4-card:hover { box-shadow:0 8px 18px -6px rgba(0,0,0,.6); }
html.cx4-dark .cx4-card-title { color:#eef3fb; }
html.cx4-dark .cx4-card-desc { color:#9fb0cc; }
html.cx4-dark .cx4-card-id { background:rgba(255,255,255,.07); color:#9fb0cc; }
html.cx4-dark .cx4-card-who { color:#b9c6dd; }
html.cx4-dark .cx4-col-add { color:#8ea0c0 !important; }
html.cx4-dark .cx4-col-newcard:hover { background:rgba(93,184,255,.12); color:#5db8ff !important; }
html.cx4-dark .cx4-col-empty .cx4-list::after { border-color:rgba(255,255,255,.12); color:#6b7c98; }
html.cx4-dark body.cx4-kb-dragging .cx4-list { background:rgba(93,184,255,.06); }
@media (max-width: 991.98px) {
	.cx4-col { flex:0 0 270px; width:270px; }
}

/* ══════════════════════════════════════════════════════════════
   CHAMADO — timeline de respostas estilo conversa
   ══════════════════════════════════════════════════════════════ */
.cx4-resposta {
	border-left: 3px solid #e3e9f2 !important;
	border-radius: 12px !important;
	position: relative;
	transition: box-shadow .2s ease;
}
.cx4-resposta:hover { box-shadow: 0 8px 20px -10px rgba(15,42,80,0.18) !important; }
.cx4-resposta .card-body { padding: 18px 22px !important; }
/* resposta do próprio usuário (equipe) destacada */
.cx4-resposta-minha {
	border-left-color: #1e6fdb !important;
	background: linear-gradient(90deg, rgba(56,139,253,0.04), #fff 30%) !important;
}
.cx4-resposta .media { align-items: center; margin-bottom: 14px !important; }
.cx4-resposta .media img.avatar-sm {
	width: 42px; height: 42px;
	border: 2px solid #eef2f8; box-shadow: 0 2px 6px rgba(15,42,80,0.10);
}
.cx4-resposta .media-body h5 {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 700 !important; color: #0a1f44 !important; font-size: 0.95rem !important;
}
.cx4-resposta h4.font-size-16 {
	font-size: 0.74rem !important; color: #8a9bb8 !important; font-weight: 600 !important;
	margin-bottom: 12px !important; display: inline-flex; align-items: center; gap: 6px;
}
.cx4-resposta h4.font-size-16::before {
	content: '\F0954'; font-family: 'Material Design Icons'; color: #5db8ff; font-size: 0.9rem;
}
.cx4-resposta hr { border-color: #f0f4fa !important; margin: 14px 0 0 !important; }

/* Editor de resposta (summernote) container */
#divResponder { border: 1px solid #e3e9f2 !important; border-radius: 14px !important; }
#divResponder .card-body { padding: 24px !important; }
.note-editor.note-frame { border-radius: 10px !important; border-color: #e3e9f2 !important; overflow: hidden; }
.note-toolbar { background: #f7f9fc !important; border-bottom: 1px solid #eef2f8 !important; }
/* switch finalizar chamado */
.custom-control-input:checked ~ .custom-control-label::before {
	background: #1e6fdb !important; border-color: #1e6fdb !important;
}

/* ══════════════════════════════════════════════════════════════
   SELECT2 — estilo MudBlazor (outlined + dropdown premium)
   ══════════════════════════════════════════════════════════════ */
.select2-container--default .select2-selection--single {
	border: 1.5px solid #dde5f0 !important;
	border-radius: 10px !important;
	height: 44px !important;
	display: flex; align-items: center;
	background: #fff !important;
	transition: border-color .2s, box-shadow .2s;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--cx4-azul) !important;
	box-shadow: 0 0 0 4px rgba(30,111,219,0.12) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #0a1f44 !important; line-height: 42px !important; padding-left: 14px !important; font-size: 0.92rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px !important; right: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #1e6fdb transparent transparent !important;
}
/* Dropdown aberto */
.select2-dropdown {
	border: 1px solid #e3e9f2 !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 48px -12px rgba(15,42,80,0.22) !important;
	overflow: hidden;
	margin-top: 4px;
}
.select2-search--dropdown { padding: 10px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1.5px solid #e3e9f2 !important; border-radius: 8px !important; padding: 8px 12px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--cx4-azul) !important; outline: none;
}
.select2-results__option {
	padding: 10px 14px !important; font-size: 0.9rem; color: #44546b;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
	background: var(--cx4-azul) !important; color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
	background: rgba(30,111,219,0.10) !important; color: var(--cx4-azul) !important; font-weight: 600;
}

/* ══════════════════════════════════════════════
   Refino ROBUSTO dos cards de formulário/conteúdo
   ══════════════════════════════════════════════ */
.page-content > .row:first-child .page-title,
.page-title-box .page-title {
	position: relative; padding-left: 14px;
}
.page-title-box .page-title::before {
	content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
	width: 4px; height: 22px; border-radius: 3px;
	background: linear-gradient(180deg, #5db8ff, #1e6fdb);
}
/* títulos de seção dentro de cards */
.card .card-body > h4:first-child:not(.cx4-kpi-num),
.card-body > .card-title {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 700 !important; color: #0a1f44 !important;
}
/* Editor Summernote premium */
.note-editor.note-frame, .note-editor.note-airframe {
	border: 1.5px solid #dde5f0 !important; border-radius: 12px !important; overflow: hidden;
}
.note-toolbar, .note-editor .note-toolbar {
	background: #f7f9fc !important; border-bottom: 1px solid #eef2f8 !important; padding: 8px !important;
}
.note-btn { border-radius: 7px !important; border: 1px solid #e3e9f2 !important; background: #fff !important; color: #44546b !important; }
.note-btn:hover { background: rgba(30,111,219,0.08) !important; color: var(--cx4-azul) !important; }
.note-editable { padding: 16px !important; font-size: 0.92rem; color: #34465e; }

/* ── Footer ── */
.footer {
	background: transparent !important;
	color: #8a9bb8 !important;
	font-size: 0.8rem;
	position: static !important;   /* tira do absolute do Skote (que colava em left:0) */
	left: auto !important; right: auto !important;
	width: auto !important;
	margin-left: 0 !important;
	padding: 18px 28px !important;
}

/* ══════════════════════════════════════════════════════════════
   MODO ESCURO  (html.cx4-dark)
   ══════════════════════════════════════════════════════════════ */
html.cx4-dark body { background: #0b1220 !important; color: #c2cde0 !important; }

/* Topbar glass dark */
html.cx4-dark .cx4-topbar {
	background: rgba(11,18,32,0.82) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html.cx4-dark .cx4-top-user-name { color: #f0f4fa !important; }
html.cx4-dark .cx4-top-icon { color: #9eb0cc !important; }
html.cx4-dark .cx4-top-icon:hover { background: rgba(93,184,255,0.12) !important; color: #5db8ff !important; }
html.cx4-dark .cx4-top-user:hover { background: rgba(255,255,255,0.05) !important; }

/* Títulos / textos */
html.cx4-dark h1, html.cx4-dark h2, html.cx4-dark h3, html.cx4-dark h4, html.cx4-dark h5, html.cx4-dark h6,
html.cx4-dark .page-title, html.cx4-dark .card-title { color: #f0f4fa !important; }
/* vence a regra robusta de card-title (.card-body > .card-title { color:#0a1f44 }) que tinha specificity maior */
html.cx4-dark .card .card-body > h4:first-child:not(.cx4-kpi-num),
html.cx4-dark .card-body > .card-title,
html.cx4-dark .card-body > h4 { color: #f0f4fa !important; }
html.cx4-dark .text-dark, html.cx4-dark .text-muted { color: #9eb0cc !important; }
html.cx4-dark .breadcrumb-item.active { color: #7e8ca8 !important; }
html.cx4-dark a { color: #5db8ff; }

/* Cards */
html.cx4-dark .card {
	background: #151e30 !important;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,.4), 0 1px 3px 0 rgba(0,0,0,.5) !important;
}
html.cx4-dark .card:hover { box-shadow: 0 5px 5px -3px rgba(0,0,0,.5), 0 8px 10px 1px rgba(0,0,0,.4) !important; }
html.cx4-dark .card-body { color: #c2cde0 !important; }

/* KPIs */
html.cx4-dark .cx4-kpi { background: #151e30 !important; }
html.cx4-dark .cx4-kpi-num { color: #f0f4fa !important; }
html.cx4-dark .cx4-kpi-lbl { color: #7e8ca8 !important; }

/* Atalhos */
html.cx4-dark .cx4-shortcut { background: #151e30 !important; }
html.cx4-dark .cx4-shortcut-nome { color: #f0f4fa !important; }

/* Inputs / selects */
html.cx4-dark .form-control, html.cx4-dark textarea.form-control, html.cx4-dark .custom-select {
	background: #1a2440 !important; color: #e0e8f5 !important;
	border-color: rgba(255,255,255,0.10) !important;
}
html.cx4-dark .form-control:focus { border-color: #5db8ff !important; box-shadow: 0 0 0 4px rgba(93,184,255,0.15) !important; }
html.cx4-dark .form-control::placeholder { color: #6b7a96 !important; }
html.cx4-dark label, html.cx4-dark .col-form-label { color: #8a9bb8 !important; }
html.cx4-dark .select2-container--default .select2-selection--single { background: #1a2440 !important; border-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .select2-selection__rendered { color: #e0e8f5 !important; }
html.cx4-dark .select2-dropdown { background: #1a2440 !important; border-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .select2-results__option { color: #c2cde0 !important; }
html.cx4-dark .select2-search__field { background: #0f1729 !important; color: #e0e8f5 !important; border-color: rgba(255,255,255,0.10) !important; }

/* Tabelas */
html.cx4-dark .table { color: #c2cde0 !important; }
html.cx4-dark .table thead th,
html.cx4-dark #datatable-buttons thead th,
html.cx4-dark table.dataTable thead th { background: #111a2b !important; color: #8ea0c0 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html.cx4-dark .table tbody td,
html.cx4-dark .table tbody td a,
html.cx4-dark .card-body td,
html.cx4-dark #datatable-buttons tbody td,
html.cx4-dark #datatable-buttons tbody td a,
html.cx4-dark table.dataTable tbody td,
html.cx4-dark table.dataTable tbody td a { color: #c8d3e6 !important; border-top-color: rgba(255,255,255,0.06) !important; }
/* célula de status col2 que tem color:inherit — garante legibilidade no dark */
html.cx4-dark #datatable-buttons tbody td:nth-child(2) { color: #c8d3e6 !important; }

/* cards com background inline "lavender" (sub-grids de Ações/RATs nos formulários):
   neutraliza pro tema premium e corrige o card claro ilegível no dark mode */
.card-body[style*="lavender"] { background: #ffffff !important; }
html.cx4-dark .card-body[style*="lavender"] { background: #151e30 !important; }
html.cx4-dark .card-body[style*="lavender"] .card-title { color: #e6edf7 !important; }
html.cx4-dark .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
html.cx4-dark .table-hover tbody tr:hover, html.cx4-dark #datatable-buttons tbody tr:hover { background: rgba(93,184,255,0.07) !important; }
html.cx4-dark .dataTables_info, html.cx4-dark .dataTables_filter label { color: #7e8ca8 !important; }

/* Editor Summernote */
html.cx4-dark .note-editor.note-frame { border-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .note-toolbar { background: #111a2b !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html.cx4-dark .note-btn { background: #1a2440 !important; color: #c2cde0 !important; border-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .note-editable { background: #151e30 !important; color: #e0e8f5 !important; }

/* Modal / dropdown */
html.cx4-dark .modal-content { background: #151e30 !important; }
html.cx4-dark .modal-header, html.cx4-dark .modal-footer { border-color: rgba(255,255,255,0.08) !important; }
html.cx4-dark .dropdown-menu { background: #1a2440 !important; border-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .dropdown-item { color: #c2cde0 !important; }
html.cx4-dark .dropdown-item:hover { background: rgba(93,184,255,0.10) !important; color: #fff !important; }

/* Footer */
html.cx4-dark .footer { color: #7e8ca8 !important; }
html.cx4-dark .footer strong { color: #c2cde0 !important; }

/* Botão light no dark */
html.cx4-dark .btn-light { background: #1a2440 !important; color: #c2cde0 !important; }

/* === DARK: correções de contraste nos campos === */
/* texto dos valores em inputs/selects/textarea */
html.cx4-dark input.form-control,
html.cx4-dark select.form-control,
html.cx4-dark textarea.form-control,
html.cx4-dark .form-control { color: #e6edf7 !important; }
/* Select2: valor selecionado e seta */
html.cx4-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e6edf7 !important; }
html.cx4-dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #5db8ff transparent transparent !important; }
html.cx4-dark .select2-results__option--highlighted { background: #1e6fdb !important; color: #fff !important; }
/* select nativo (options) — o navegador controla, mas força o fundo do select */
html.cx4-dark select.form-control option { background: #1a2440 !important; color: #e6edf7 !important; }

/* Input de arquivo (Selecionar arquivo / Browse) */
html.cx4-dark .custom-file-label,
html.cx4-dark input[type=file],
html.cx4-dark .custom-file-input { background: #1a2440 !important; color: #c2cde0 !important; border-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .custom-file-label::after { background: #0f1729 !important; color: #c2cde0 !important; border-left-color: rgba(255,255,255,0.10) !important; }

/* Summernote: área editável, statusbar e barra de resize (estavam brancas) */
html.cx4-dark .note-editable { background: #111a2b !important; color: #e6edf7 !important; }
html.cx4-dark .note-statusbar, html.cx4-dark .note-resizebar { background: #111a2b !important; border-top-color: rgba(255,255,255,0.08) !important; }
html.cx4-dark .note-resizebar .note-icon-bar { border-top-color: rgba(255,255,255,0.25) !important; }
html.cx4-dark .note-placeholder { color: #6b7a96 !important; }
html.cx4-dark .note-editor.note-frame { background: #111a2b !important; }

/* readonly (Criado) */
html.cx4-dark .form-control[readonly] { background: #131c2e !important; color: #9eb0cc !important; }

/* breadcrumb / títulos de form */
html.cx4-dark .breadcrumb-item a { color: #5db8ff !important; }
html.cx4-dark .card-body > .desc, html.cx4-dark .text-muted small { color: #7e8ca8 !important; }

/* === DARK: títulos e textos que ficaram fracos === */
html.cx4-dark .card-title, html.cx4-dark .card-title.mb-4,
html.cx4-dark .card .card-body > h4, html.cx4-dark .card .card-body > h5,
html.cx4-dark .cx4-page-head-title { color: #f0f4fa !important; }
html.cx4-dark .cx4-page-head-sub { color: #8a9bb8 !important; }
html.cx4-dark .dataTables_empty { color: #9eb0cc !important; }
html.cx4-dark .custom-control-label { color: #c2cde0 !important; }
html.cx4-dark .col-form-label, html.cx4-dark label { color: #9eb0cc !important; }
/* texto genérico escuro dentro de cards no dark */
html.cx4-dark .card-body, html.cx4-dark .card-body p, html.cx4-dark .card-body td,
html.cx4-dark .card-body span:not(.badge):not(.cx4-chip):not(.select2-selection__rendered) { color: #c2cde0; }

/* === DARK catch-all: cobre TODAS as telas (elementos brancos comuns) === */
html.cx4-dark .bg-white { background: #151e30 !important; }
html.cx4-dark .bg-light, html.cx4-dark .bg-soft-light { background: #131c2e !important; }
/* Select2: campo de busca do dropdown — mata o contorno branco em qualquer estado */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
	outline: 0 !important; box-shadow: none !important;
	-webkit-appearance: none !important; appearance: none !important;
	border: 1px solid #dde5f0 !important; border-radius: 8px !important;
}
html.cx4-dark .select2-container--default .select2-search--dropdown .select2-search__field,
html.cx4-dark .select2-container--default .select2-search--dropdown .select2-search__field:focus,
html.cx4-dark .select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
	background: #0f1729 !important; color: #e6edf7 !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	outline: 0 !important; box-shadow: none !important;
}
html.cx4-dark .select2-dropdown { background: #1a2440 !important; border: 1px solid rgba(255,255,255,0.12) !important; }
html.cx4-dark .select2-results__option { color: #c2cde0 !important; }
html.cx4-dark .select2-results__option[aria-selected=true],
html.cx4-dark .select2-container--default .select2-results__option--selected {
	background: rgba(93,184,255,0.14) !important; color: #5db8ff !important; font-weight: 600;
}
html.cx4-dark .select2-container--default .select2-results__option--highlighted,
html.cx4-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #1e6fdb !important; color: #fff !important;
}
/* Modais / popover / tooltip */
html.cx4-dark .modal-content, html.cx4-dark .popover { background: #151e30 !important; color: #c2cde0 !important; }
html.cx4-dark .popover-body, html.cx4-dark .popover-header { color: #c2cde0 !important; background: transparent !important; }
html.cx4-dark .modal-title { color: #f0f4fa !important; }
html.cx4-dark .close { color: #c2cde0 !important; text-shadow: none !important; opacity: .7; }
html.cx4-dark .close:hover { opacity: 1; }
/* divisores e bordas */
html.cx4-dark hr { border-color: rgba(255,255,255,0.08) !important; }
html.cx4-dark .border, html.cx4-dark .border-top, html.cx4-dark .border-bottom,
html.cx4-dark .border-left, html.cx4-dark .border-right { border-color: rgba(255,255,255,0.08) !important; }
/* texto preto hardcoded comum */
html.cx4-dark .text-body, html.cx4-dark .text-black, html.cx4-dark .text-dark { color: #c2cde0 !important; }
/* tabela bordered/striped genérica */
html.cx4-dark .table-bordered, html.cx4-dark .table-bordered td, html.cx4-dark .table-bordered th { border-color: rgba(255,255,255,0.06) !important; }
/* media (respostas, listas) */
html.cx4-dark .media-body h5, html.cx4-dark .media-body h6 { color: #f0f4fa !important; }
/* alertas */
html.cx4-dark .alert-success { background: rgba(46,158,91,0.16) !important; color: #6ee7a0 !important; }
html.cx4-dark .alert-danger { background: rgba(225,29,72,0.16) !important; color: #ff8da6 !important; }
html.cx4-dark .alert-info { background: rgba(56,139,253,0.16) !important; color: #8cc3ff !important; }
/* progress bar fundo */
html.cx4-dark .progress { background: #1a2440 !important; }
/* timeline de respostas do chamado */
html.cx4-dark .cx4-resposta { border-left-color: rgba(255,255,255,0.10) !important; }
html.cx4-dark .cx4-resposta-minha { background: linear-gradient(90deg, rgba(56,139,253,0.10), #151e30 40%) !important; }
html.cx4-dark .cx4-resposta hr { border-color: rgba(255,255,255,0.06) !important; }

/* ══════════════════════════════════════════════════════════════
   POLIMENTO FINAL — micro-interações, transições, empty states
   ══════════════════════════════════════════════════════════════ */

/* Transição de página estilo mobile (slide da direita + fade) */
.main-content > .page-content { animation: cx4PageSlide .42s cubic-bezier(.16,1,.3,1); }
@keyframes cx4PageSlide {
	from { opacity: 0; transform: translateX(26px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* GRID: forçar tabela ocupar 100% da largura do card */
.dataTables_wrapper { width: 100% !important; }
#datatable-buttons, table.dataTable { width: 100% !important; }
.table-responsive1, .table-responsive { width: 100% !important; }
#datatable-buttons.collapsed { width: 100% !important; }
/* empty state ocupa largura total */
#datatable-buttons tbody tr td.dataTables_empty { width: 100% !important; }
/* toolbar de busca à direita, alinhada */
.dataTables_wrapper .dataTables_filter { float: right; margin-bottom: 10px; }
.dataTables_wrapper .dt-buttons { float: left; margin-bottom: 10px; }
.dataTables_wrapper::after { content:''; display:block; clear:both; }

/* Empty state das tabelas (DataTables) */
.dataTables_empty {
	padding: 50px 20px !important; text-align: center !important;
	color: #a3b1c9 !important; font-style: normal !important; font-size: 0.92rem !important;
}
.dataTables_empty::before {
	content: '\F01F0'; /* mdi-database-off (fallback genérico) */
	font-family: 'Material Design Icons';
	display: block; font-size: 2.6rem; color: #d4dded; margin-bottom: 10px;
}
html.cx4-dark .dataTables_empty { color: #6b7a96 !important; }
html.cx4-dark .dataTables_empty::before { color: #2c3d5c; }

/* Transições suaves globais em elementos interativos */
.btn, .card, .cx4-shortcut, .cx4-kpi, .nav-link, .dropdown-item,
.page-item .page-link, .badge { transition: all .2s cubic-bezier(.4,0,.2,1); }

/* Links de paginação Bootstrap (não-datatable) */
.pagination .page-link {
	border: 1px solid #e3e9f2 !important; border-radius: 8px !important;
	margin: 0 3px; color: #5a6b85 !important;
}
.pagination .page-item.active .page-link {
	background: linear-gradient(135deg,#5db8ff,#1e6fdb) !important; border-color: transparent !important;
	box-shadow: 0 6px 14px -6px rgba(30,111,219,.5) !important;
}
html.cx4-dark .pagination .page-link { background: #1a2440 !important; border-color: rgba(255,255,255,.10) !important; color: #c2cde0 !important; }

/* Scrollbar premium global */
* { scrollbar-width: thin; scrollbar-color: #c3d0e2 transparent; }
html.cx4-dark * { scrollbar-color: #2c3d5c transparent; }
html.cx4-dark ::-webkit-scrollbar-thumb { background: #2c3d5c; border-color: #0b1220; }

/* Avatar do topbar com anel */
.cx4-top-user img { transition: transform .2s ease; }
.cx4-top-user:hover img { transform: scale(1.05); }

/* Spinner premium (loading) */
.cx4-loading, .sweet-loading { display:inline-block; width:38px; height:38px; border:3px solid rgba(30,111,219,.15); border-top-color:#1e6fdb; border-radius:50%; animation:cx4Spin .8s linear infinite; }
@keyframes cx4Spin { to { transform: rotate(360deg); } }

/* Badges "pill" consistentes */
.badge { padding: .4em .75em !important; font-weight: 700 !important; }