/* Alternância global de tema. A preferência é aplicada no elemento <html>. */

:root {
	--theme-surface: #ffffff;
	--theme-surface-soft: #f5f5f5;
	--theme-surface-muted: #eeeeee;
	--theme-surface-raised: #ffffff;
	--theme-text: #212121;
	--theme-text-muted: #666b76;
	--theme-border: #d7d9df;
	--theme-input: #f3f3f3;
	--theme-hover: #e4e4e8;
	--theme-focus-ring: rgba(63, 81, 181, .35);
	--theme-accent: #0c063f;
	--theme-missing-value: purple;
}

html[data-theme="dark"] {
	--main-color: #292460;
	--main-color-darker: #1d194d;
	--main-color-lighter: #3a3576;
	--main-color-lighter-2: #4e498b;
	--clean-color: #101219;
	--clean-color-darker: #0b0d12;
	--clean-color-lighter: #1a1d26;
	--input-border-color: #69707f;
	--input-hover-border-color: #aaa6ff;
	--input-focus-border-color: #aaa6ff;
	--btn-focus: #585d6a;
	--btn-hover: #4d48a0;
	--btn-active: #625dc2;
	--font-color-clear: #f8f9fc;
	--font-color-dark: #e7e9f0;
	--box-shadow-default: 0 2px 8px 0 rgba(0, 0, 0, .55);
	--datatable-row-color-odd: #1d2029;
	--datatable-row-color-even: #171a22;
	--datatable-row-color-highlighted: #333747;
	--datatable-row-color-selected: #444068;
	--datatable-footer-color-odd: #1d2029;
	--datatable-footer-color-even: #171a22;
	--theme-surface: #101219;
	--theme-surface-soft: #171a22;
	--theme-surface-muted: #20232d;
	--theme-surface-raised: #1a1d26;
	--theme-text: #e7e9f0;
	--theme-text-muted: #aeb3c0;
	--theme-border: #363b49;
	--theme-input: #232631;
	--theme-hover: #303442;
	--theme-focus-ring: rgba(170, 166, 255, .45);
	--theme-accent: #aaa6ff;
	--theme-missing-value: #e879f9;
}

html,
body,
.card,
.form-control,
.ui-inputfield,
.ui-dialog,
.ui-overlaypanel,
.ui-menu,
.ui-datatable,
.ui-tabs-panel {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.navbar.sidebar .navbar-nav.sidebar-nav .nav-item .theme-mode-menu-toggle {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--font-size-big);
	text-transform: none;
	transition: background-color .18s ease, color .18s ease;
}

.navbar.sidebar .navbar-nav.sidebar-nav .nav-item .theme-mode-menu-toggle:hover {
	background-color: var(--main-color-lighter-2);
}

.navbar.sidebar .navbar-nav.sidebar-nav .nav-item .theme-mode-menu-toggle:focus-visible {
	box-shadow: inset 0 0 0 2px var(--theme-accent);
	outline: 0 !important;
}

.theme-mode-toggle__sun,
html[data-theme="dark"] .theme-mode-toggle__moon {
	display: none;
}

html[data-theme="dark"] .theme-mode-toggle__sun {
	display: inline-block;
}

html[data-theme="dark"] body {
	background-color: var(--theme-surface);
	color: var(--theme-text);
}

html[data-theme="dark"] body,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .card,
html[data-theme="dark"] .ui-widget,
html[data-theme="dark"] .ui-widget-content,
html[data-theme="dark"] .ui-outputlabel,
html[data-theme="dark"] .ui-dialog .ui-confirm-dialog-message {
	color: var(--theme-text);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .text-label,
html[data-theme="dark"] label.control-label,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .ui-datatable thead th .ui-column-title,
html[data-theme="dark"] .ui-datatable .ui-datatable-header,
html[data-theme="dark"] .ui-datatable .ui-datatable-footer,
html[data-theme="dark"] .ui-dialog .ui-dialog-title,
html[data-theme="dark"] .ui-paginator .ui-paginator-current,
html[data-theme="dark"] .ui-paginator .ui-paginator-rpp-options {
	color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .login .card,
html[data-theme="dark"] .login .card.login,
html[data-theme="dark"] body .ui-dialog,
html[data-theme="dark"] body .ui-dialog .ui-dialog-titlebar,
html[data-theme="dark"] body .ui-panel,
html[data-theme="dark"] body .ui-panel .ui-panel-titlebar,
html[data-theme="dark"] body .ui-tabs .ui-tabs-panels,
html[data-theme="dark"] body .ui-tabs .ui-tabs-panel,
html[data-theme="dark"] body .ui-accordion .ui-accordion-content,
html[data-theme="dark"] body .ui-fieldset,
html[data-theme="dark"] body .ui-overlaypanel,
html[data-theme="dark"] body .ui-menu,
html[data-theme="dark"] body .ui-menu .ui-menu-list,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .ui-blockui-content {
	background-color: var(--theme-surface-raised) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
}

/* Páginas abertas pelo Dialog Framework já estão dentro de uma superfície
 * elevada. O card estrutural interno deve se integrar ao fundo da dialog. */
html[data-theme="dark"] body.nl-dialog-page .card {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

html[data-theme="dark"] body .ui-dialog.nl-dynamic-dialog,
html[data-theme="dark"] body .ui-dialog.nl-dynamic-dialog .ui-dialog-titlebar,
html[data-theme="dark"] body .ui-dialog.nl-dynamic-dialog .ui-df-content {
	background-color: var(--theme-surface) !important;
}

/* Os overlays da aplicação usam um card interno como superfície visual; o
 * painel externo deve ser apenas estrutural para não criar uma moldura dupla. */
body .ui-overlaypanel {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body .ui-overlaypanel .ui-overlaypanel-content {
	padding: 0 !important;
}

body .ui-overlaypanel .card {
	width: 100%;
	margin: 0 !important;
	background-color: var(--theme-surface-raised) !important;
	border: 1px solid var(--theme-border) !important;
	box-shadow: var(--box-shadow-default) !important;
	color: var(--theme-text) !important;
}

/* Páginas dinâmicas zeram o padding dos cards estruturais; os cards dos
 * overlays precisam preservar seu espaçamento próprio. */
body .ui-overlaypanel .card .card-body {
	padding: 1.25rem !important;
}

html[data-theme="dark"] .navbar.navbar-title,
html[data-theme="dark"] .navbar.navbar-title .filler,
html[data-theme="dark"] .navbar.navbar-title > .row > .ui-outputpanel,
html[data-theme="dark"] .navbar.navbar-title .navbar-nav .nav-item .nav-link {
	background-color: var(--theme-surface-raised);
	color: var(--theme-text);
}

html[data-theme="dark"] .navbar.navbar-title .navbar-nav .nav-item.dropdown.show,
html[data-theme="dark"] .navbar.navbar-title .navbar-nav .nav-item.dropdown.show .nav-link,
html[data-theme="dark"] .navbar.navbar-title .navbar-nav .nav-item .dropdown-menu,
html[data-theme="dark"] .navbar.navbar-title .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus,
html[data-theme="dark"] .navbar.navbar-title .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
	background-color: var(--theme-hover) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
	color: var(--theme-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-group .form-control,
html[data-theme="dark"] body .ui-inputfield,
html[data-theme="dark"] body .ui-selectonemenu,
html[data-theme="dark"] .ui-selectonemenu-label.ui-inputfield,
html[data-theme="dark"] .ui-autocomplete-input,
html[data-theme="dark"] .ui-datatable .ui-column-filter,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background-color: var(--theme-input) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
	caret-color: var(--theme-text);
}

/* Mantém os avisos de registros inativos legíveis no modo escuro. */
html[data-theme="dark"] .text-red,
html[data-theme="dark"] .text-red .ui-autocomplete-input {
	color: #ff7b7b !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] body .ui-inputfield.ui-state-focus,
html[data-theme="dark"] body .ui-selectonemenu.ui-state-focus {
	border-color: var(--input-focus-border-color) !important;
	box-shadow: 0 0 0 3px var(--theme-focus-ring) !important;
}

/* A linha inferior dos campos NL usa o mesmo destaque claro dos seus ícones. */
html[data-theme="dark"] body .nl-text .form-control:not(.ui-state-error):not(.ui-state-disabled):not([disabled]):not([readonly]),
html[data-theme="dark"] body .nl-number .form-control:not(.ui-state-error):not(.ui-state-disabled):not([disabled]):not([readonly]),
html[data-theme="dark"] body .nl-combo .form-control:not(.ui-state-error):not(.ui-state-disabled):not([disabled]):not([readonly]),
html[data-theme="dark"] body .nl-date .form-control:not(.ui-state-error):not(.ui-state-disabled):not([disabled]):not([readonly]),
html[data-theme="dark"] body .nl-lov .form-control:not(.ui-state-error):not(.ui-state-disabled):not([disabled]):not([readonly]),
html[data-theme="dark"] body .nl-editor:not(.ui-state-disabled) .form-control:not(.ui-state-error):not([disabled]):not([readonly]) {
	background-image:
		linear-gradient(var(--theme-accent), var(--theme-accent)),
		linear-gradient(var(--theme-accent), var(--theme-accent)) !important;
}

/* A LOV de empresa do header usa um layout próprio; nela o destaque fica
 * somente na borda, sem transformar o fundo inteiro em roxo. */
html[data-theme="dark"] body #lovDeMenuPrincipal .nl-lov .ui-autocomplete-input.form-control:not(.ui-state-error) {
	background: var(--theme-input) !important;
	border: 1px solid var(--theme-border) !important;
	border-bottom-color: var(--theme-accent) !important;
	box-shadow: var(--box-shadow-default) !important;
}

html[data-theme="dark"] body .nl-combo .ui-selectonemenu.form-control {
	display: block !important;
	height: 35px !important;
	min-height: 35px;
	overflow: hidden;
	padding: 0 35px 0 12px !important;
	border-radius: var(--border-radius-round) !important;
}

html[data-theme="dark"] body .nl-combo .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	height: 33px;
	line-height: 33px;
	padding: 0 !important;
}

html[data-theme="dark"] body .nl-combo .ui-selectonemenu .ui-selectonemenu-trigger {
	border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0 !important;
	height: 33px !important;
	margin: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 35px !important;
}

/* Dentro das tabelas o combo se integra à célula, como no tema claro, sem o
 * formato arredondado e sem a altura de um campo de formulário comum. */
html[data-theme="dark"] body .ui-datatable tr:not(.ui-expanded-row-content) .nl-combo .ui-selectonemenu.form-control {
	border-radius: var(--border-radius-square) !important;
	height: calc(1rem + .75rem + 2px) !important;
	min-height: 0;
}

html[data-theme="dark"] body .ui-datatable tr:not(.ui-expanded-row-content) .nl-combo .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
	height: 29px;
	line-height: 29px;
}

html[data-theme="dark"] body .ui-datatable tr:not(.ui-expanded-row-content) .nl-combo .ui-selectonemenu .ui-selectonemenu-trigger {
	border-radius: var(--border-radius-square) !important;
	height: 30px !important;
	top: -2px;
	width: 30px !important;
}

html[data-theme="dark"] body .nl-radio .ui-selectoneradio.form-control {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

html[data-theme="dark"] body .nl-radio .ui-radiobutton .ui-radiobutton-box {
	background-color: var(--theme-surface-raised) !important;
	border: 1px solid var(--theme-border) !important;
	box-shadow: none !important;
}

html[data-theme="dark"] body .nl-radio .ui-radiobutton .ui-radiobutton-box.ui-state-active {
	border-color: var(--theme-accent) !important;
}

html[data-theme="dark"] body .nl-radio .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
	background-color: var(--theme-accent) !important;
}

html[data-theme="dark"] ::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: #9fa5b3 !important;
	opacity: 1;
}

/* Tooltips precisam se separar do fundo da página e manter texto legível. */
html[data-theme="dark"] body .ui-tooltip .ui-tooltip-text,
html[data-theme="dark"] body .tooltip .tooltip-inner {
	background-color: #555b70 !important;
	border: 1px solid #747b94 !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55) !important;
	color: #f8f9fc !important;
}

html[data-theme="dark"] body .ui-tooltip.ui-tooltip-right .ui-tooltip-arrow {
	border-right-color: #555b70 !important;
}

html[data-theme="dark"] body .ui-tooltip.ui-tooltip-left .ui-tooltip-arrow {
	border-left-color: #555b70 !important;
}

html[data-theme="dark"] body .ui-tooltip.ui-tooltip-top .ui-tooltip-arrow,
html[data-theme="dark"] body .bs-tooltip-top .arrow::before,
html[data-theme="dark"] body .bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: #555b70 !important;
}

html[data-theme="dark"] body .ui-tooltip.ui-tooltip-bottom .ui-tooltip-arrow,
html[data-theme="dark"] body .bs-tooltip-bottom .arrow::before,
html[data-theme="dark"] body .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: #555b70 !important;
}

html[data-theme="dark"] body .bs-tooltip-right .arrow::before,
html[data-theme="dark"] body .bs-tooltip-auto[x-placement^="right"] .arrow::before {
	border-right-color: #555b70 !important;
}

html[data-theme="dark"] body .bs-tooltip-left .arrow::before,
html[data-theme="dark"] body .bs-tooltip-auto[x-placement^="left"] .arrow::before {
	border-left-color: #555b70 !important;
}

html[data-theme="dark"] .input-group .ui-button,
html[data-theme="dark"] body .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon,
html[data-theme="dark"] body .ui-dialog .ui-dialog-titlebar-close,
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.ui-button):not(.ui-menuitem-link) {
	color: var(--theme-accent) !important;
}

html[data-theme="dark"] body .ui-button.btn-sec {
	background-color: rgba(170, 166, 255, .08) !important;
	border-color: var(--theme-accent) !important;
	color: var(--theme-accent) !important;
}

html[data-theme="dark"] body .ui-button.btn-sec .ui-icon {
	color: inherit !important;
}

/* Ícones de ações sem preenchimento usam o destaque padrão do modo escuro. */
html[data-theme="dark"] body .ui-button.ui-button-icon-only:not(.ui-state-disabled):not(.btn-fab):not(.help-btn):not(.ui-button-danger):not(.ui-button-success):not(.ui-button-warning):not(.ui-button-info) .ui-icon {
	color: var(--theme-accent) !important;
}

html[data-theme="dark"] body .ui-button.btn-sec.ui-state-hover,
html[data-theme="dark"] body .ui-button.btn-sec:hover,
html[data-theme="dark"] body .ui-button.btn-sec.ui-state-focus {
	background-color: var(--theme-accent) !important;
	border-color: var(--theme-accent) !important;
	color: #12131a !important;
}

html[data-theme="dark"] body .ui-button.btn-sec.ui-state-active {
	background-color: #c2bfff !important;
	border-color: #c2bfff !important;
	color: #0b0d12 !important;
}

html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar,
html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar.ui-state-hover,
html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar:hover,
html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar.ui-state-focus,
html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar.ui-state-active {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--theme-accent) !important;
}

html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar.ui-state-hover,
html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar:hover,
html[data-theme="dark"] body .ui-button.btn-sec.btn-adicionar.ui-state-focus {
	color: #d0ceff !important;
}

html[data-theme="dark"] body .ui-autocomplete-panel,
html[data-theme="dark"] body .ui-selectonemenu-panel,
html[data-theme="dark"] body .ui-selectcheckboxmenu-panel,
html[data-theme="dark"] .ui-autocomplete-panel,
html[data-theme="dark"] .ui-selectonemenu-panel,
html[data-theme="dark"] .ui-selectonemenu-panel .ui-selectonemenu-items-wrapper,
html[data-theme="dark"] .p-datepicker-panel,
html[data-theme="dark"] body .ui-datepicker,
html[data-theme="dark"] body .ui-colorpicker-container {
	background: var(--theme-surface-raised) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
}

/* O selectCheckboxMenu possui superfícies internas próprias que não herdam
 * o fundo do painel. Mantém o componente inteiro legível no modo escuro. */
html[data-theme="dark"] body .nl-select-checkbox-menu .ui-selectcheckboxmenu.form-control {
	background-color: var(--theme-input) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label,
html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item > label {
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon {
	color: #A5A6F7 !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel.ui-selectcheckboxmenu-panel,
html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-header,
html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-items,
html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-items-wrapper {
	background-color: var(--theme-surface-raised) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container .ui-inputfield {
	background-color: var(--theme-input) !important;
	border: 1px solid var(--theme-border) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container .ui-icon,
html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close {
	color: #A5A6F7 !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-chkbox .ui-chkbox-box {
	background-color: var(--theme-surface) !important;
	border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-chkbox .ui-chkbox-box.ui-state-active {
	border-color: #A5A6F7 !important;
	color: #A5A6F7 !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item {
	background-color: transparent !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item.ui-state-hover,
html[data-theme="dark"] body .nl-select-checkbox-menu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item.ui-state-highlight {
	background-color: var(--main-color-lighter) !important;
	color: var(--font-color-clear) !important;
}

html[data-theme="dark"] body .ui-colorpicker-container .ui-colorpicker_hex {
	background-color: var(--theme-input) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .ui-colorpicker-container input {
	background-color: transparent !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .ui-colorpicker-container .custom-close-btn {
	color: var(--theme-accent) !important;
}

html[data-theme="dark"] body .imagem-container .imagem-area {
	background-color: var(--theme-input) !important;
	border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body .scroll-panel-modelo-csv {
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .scroll-panel-modelo-csv .container-texto-modelo {
	background-color: var(--theme-surface-muted) !important;
	border-color: var(--theme-border) !important;
	box-shadow: var(--box-shadow-default) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .scroll-panel-modelo-csv .container-texto-modelo p {
	color: inherit !important;
}

html[data-theme="dark"] .ui-autocomplete-panel .ui-autocomplete-item,
html[data-theme="dark"] .ui-selectonemenu-panel .ui-selectonemenu-item,
html[data-theme="dark"] .ui-autocomplete-panel .ui-autocomplete-emptyMessage,
html[data-theme="dark"] body .ui-datepicker .ui-datepicker-calendar td a,
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .ui-datepicker.ui-widget.ui-widget-content td a {
	color: var(--theme-text) !important;
}

html[data-theme="dark"] .ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight,
html[data-theme="dark"] .ui-autocomplete-panel .ui-autocomplete-item.ui-state-hover,
html[data-theme="dark"] .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
html[data-theme="dark"] .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover,
html[data-theme="dark"] body .ui-datepicker .ui-datepicker-calendar td a:hover {
	background-color: var(--main-color-lighter) !important;
	color: var(--font-color-clear) !important;
}

html[data-theme="dark"] body .ui-datatable thead th,
html[data-theme="dark"] body .card .ui-datatable thead th,
html[data-theme="dark"] body .ui-dialog .ui-datatable thead th,
html[data-theme="dark"] .nl-dialog-page .ui-datatable thead th,
html[data-theme="dark"] body .ui-datatable .ui-datatable-header,
html[data-theme="dark"] body .ui-datatable .ui-datatable-footer,
html[data-theme="dark"] body .ui-datatable .ui-paginator,
html[data-theme="dark"] body .ui-treetable thead th {
	background-color: var(--theme-surface) !important;
	border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body .ui-datatable .ui-datatable-data > tr > td,
html[data-theme="dark"] body .ui-datatable tfoot td,
html[data-theme="dark"] body .ui-datatable tfoot th {
	border-color: var(--theme-border) !important;
	color: var(--theme-text);
}

html[data-theme="dark"] body .ui-datatable .ui-datatable-empty-message > td {
	color: transparent !important;
}

html[data-theme="dark"] body .ui-datatable .ui-datatable-empty-message > td::after {
	color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] body .ui-dialog .ui-datatable thead th,
html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-header,
html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-footer,
html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-paginator {
	background-color: var(--theme-surface-raised) !important;
}

html[data-theme="dark"] body.nl-dialog-page .ui-datatable thead th,
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-header,
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-footer,
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-paginator {
	background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-data > tr:not(.ui-state-highlight):not(.ui-state-hover),
html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-data > tr:not(.ui-state-highlight):not(.ui-state-hover) > td,
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-data > tr:not(.ui-state-highlight):not(.ui-state-hover),
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-data > tr:not(.ui-state-highlight):not(.ui-state-hover) > td {
	background-color: #222631 !important;
}

html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not(.ui-state-highlight):not(.ui-state-hover),
html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not(.ui-state-highlight):not(.ui-state-hover) > td,
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not(.ui-state-highlight):not(.ui-state-hover),
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not(.ui-state-highlight):not(.ui-state-hover) > td {
	background-color: #272b37 !important;
}

html[data-theme="dark"] body .ui-dialog .ui-datatable .ui-datatable-data > tr,
html[data-theme="dark"] body.nl-dialog-page .ui-datatable .ui-datatable-data > tr {
	box-shadow: none !important;
}

html[data-theme="dark"] body .ui-paginator select.ui-paginator-rpp-options,
html[data-theme="dark"] body .ui-paginator .ui-paginator-rpp-options {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--theme-text-muted) !important;
	height: 24px;
	padding: 0 4px;
}

html[data-theme="dark"] body .ui-paginator select.ui-paginator-rpp-options:focus {
	box-shadow: 0 1px 0 var(--theme-accent) !important;
	outline: 0;
}

html[data-theme="dark"] .ui-tabs .ui-tabs-nav,
html[data-theme="dark"] .ui-accordion .ui-accordion-header,
html[data-theme="dark"] .ui-panel .ui-panel-titlebar,
html[data-theme="dark"] .ui-widget-header {
	background-color: var(--theme-surface-muted) !important;
	border-color: var(--theme-border) !important;
	color: var(--theme-text) !important;
}

html[data-theme="dark"] .ui-tabs .ui-tabs-nav li,
html[data-theme="dark"] .ui-accordion .ui-accordion-header {
	background-color: var(--theme-surface-soft) !important;
	border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-active,
html[data-theme="dark"] .ui-accordion .ui-accordion-header.ui-state-active {
	background-color: var(--theme-surface-raised) !important;
}

/* O cabeçalho do nl:date deve se integrar ao fundo do calendário. */
html[data-theme="dark"] body .p-datepicker-panel .ui-datepicker-header,
html[data-theme="dark"] body .ui-datepicker .ui-datepicker-header,
html[data-theme="dark"] body .ui-datepicker .ui-datepicker-title {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html[data-theme="dark"] .ui-tabs .ui-tabs-nav li a,
html[data-theme="dark"] .ui-accordion .ui-accordion-header a,
html[data-theme="dark"] .ui-menu .ui-menuitem-link,
html[data-theme="dark"] .ui-menu .ui-menuitem-text {
	color: var(--theme-text) !important;
}

/* O estado desabilitado precisa permanecer distinguível das abas selecionáveis. */
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-disabled {
	opacity: .5;
	cursor: not-allowed;
}

html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-disabled a,
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-disabled .ui-icon {
	color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .ui-toggleswitch,
html[data-theme="dark"] .ui-toggleswitch .ui-toggleswitch-slider,
html[data-theme="dark"] .ui-inputswitch {
	background-color: var(--theme-input);
	border-color: var(--theme-border);
}

/* O estado ligado precisa continuar evidente depois da troca de tema. */
html[data-theme="dark"] body .nl-check .ui-toggleswitch.ui-toggleswitch-checked,
html[data-theme="dark"] body .nl-check .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
	background-color: #239a55 !important;
	border-color: #36c973 !important;
}

html[data-theme="dark"] body .nl-check .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider::before {
	background-color: #f7fff9 !important;
}

/* Switches com rótulos representam opções, não um estado booleano de
 * sucesso; por isso seguem a paleta principal em vez do verde. */
html[data-theme="dark"] body .nl-check .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-handle {
	background-color: var(--main-color-lighter-2) !important;
	color: var(--font-color-clear) !important;
}

html[data-theme="dark"] body .nl-check .ui-inputswitch:not(.ui-inputswitch-checked) .ui-inputswitch-handle {
	background-color: #c43d4b !important;
	color: var(--font-color-clear) !important;
}

html[data-theme="dark"] body .text-purple,
html[data-theme="dark"] body .text-purple input {
	color: var(--theme-missing-value) !important;
	font-weight: 600;
}

/* O form-control do check é apenas um invólucro de layout; sua superfície
 * não deve formar uma cápsula ao redor do checkbox. */
html[data-theme="dark"] body .nl-check .ui-chkbox.form-control {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* O checkbox segue a mesma aparência dos itens do selectCheckboxMenu: círculo
 * escuro, borda discreta e destaque roxo somente quando selecionado. */
html[data-theme="dark"] body .nl-check .ui-chkbox .ui-chkbox-box {
	background: var(--theme-surface) !important;
	border: 1px solid #8F96A6 !important;
	box-shadow: none !important;
}

html[data-theme="dark"] body .nl-check .ui-chkbox .ui-chkbox-box.ui-state-hover:not(.ui-state-active):not(.ui-state-disabled) {
	background: var(--theme-input) !important;
	border-color: #A5A6F7 !important;
}

html[data-theme="dark"] body .nl-check .ui-chkbox .ui-chkbox-box.ui-state-active {
	background: var(--theme-surface) !important;
	border: 1px solid #A5A6F7 !important;
	color: #A5A6F7 !important;
}

html[data-theme="dark"] body .nl-check .ui-chkbox .ui-chkbox-box.ui-state-active .ui-icon-check {
	color: #A5A6F7 !important;
}

html[data-theme="dark"] body .nl-check .ui-chkbox .ui-chkbox-box.ui-state-active:not(.ui-state-disabled) {
	box-shadow: 0 0 0 1px rgba(165, 166, 247, 0.18) !important;
}

html[data-theme="dark"] body .nl-check .ui-chkbox .ui-chkbox-box.ui-state-focus:not(.ui-state-disabled) {
	box-shadow:
		0 0 0 3px var(--theme-focus-ring) !important;
}

/* As abas pertencem à superfície que as contém; apenas o sublinhado marca a ativa. */
html[data-theme="dark"] body .ui-tabs,
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav,
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header,
html[data-theme="dark"] body .ui-tabs .ui-tabs-panels,
html[data-theme="dark"] body .ui-tabs .ui-tabs-panel {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header,
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-hover,
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-focus,
html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-active {
	border: 0 !important;
}

html[data-theme="dark"] body .ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-active {
	box-shadow: inset 0 -2px 0 var(--theme-accent) !important;
}

/* Nos parâmetros há muitas abas lado a lado; peso e contraste identificam a
 * seleção sem introduzir um fundo diferente na barra. */
html[data-theme="dark"] body .parametros-tabs .ui-tabs-nav .ui-tabs-header:not(.ui-state-active) a {
	color: var(--theme-text-muted) !important;
	font-weight: 400;
}

html[data-theme="dark"] body .parametros-tabs .ui-tabs-nav .ui-tabs-header.ui-state-hover a {
	color: var(--theme-text) !important;
}

html[data-theme="dark"] body .parametros-tabs .ui-tabs-nav .ui-tabs-header.ui-state-active a {
	color: var(--theme-text) !important;
	font-weight: 600;
}

/* A ação de adicionar é textual, sem botão ou faixa de fundo. */
html[data-theme="dark"] body .button-bar,
html[data-theme="dark"] body .ui-tabs-panel > .button-bar,
html[data-theme="dark"] body .ui-button.btn-adicionar,
html[data-theme="dark"] body .ui-button.btn-adicionar.ui-state-disabled,
html[data-theme="dark"] body .ui-button.btn-adicionar.ui-state-hover,
html[data-theme="dark"] body .ui-button.btn-adicionar.ui-state-focus,
html[data-theme="dark"] body .ui-button.btn-adicionar.ui-state-active {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Tabelas sem grades verticais ou moldura dupla no cabeçalho. */
html[data-theme="dark"] body .ui-datatable thead,
html[data-theme="dark"] body .ui-datatable thead tr,
html[data-theme="dark"] body .ui-datatable thead th,
html[data-theme="dark"] body .ui-datatable .ui-datatable-scrollable-header,
html[data-theme="dark"] body .ui-datatable .ui-datatable-scrollable-header-box {
	border: 0 !important;
	box-shadow: none !important;
}

html[data-theme="dark"] body .ui-datatable tbody td,
html[data-theme="dark"] body .ui-datatable tfoot td,
html[data-theme="dark"] body .ui-datatable tfoot th,
html[data-theme="dark"] body .ui-datatable tr > th.freeze,
html[data-theme="dark"] body .ui-datatable tr > td.freeze,
html[data-theme="dark"] body .ui-datatable tr > th.freeze.freeze-header-border,
html[data-theme="dark"] body .ui-datatable tr > td.freeze.freeze-column-border,
html[data-theme="dark"] body .ui-datatable tr > td.freeze.freeze-footer-border {
	border-left: 0 !important;
	border-right: 0 !important;
}

/* O row toggler usa a cor de destaque nos estados recolhido e expandido. */
html[data-theme="dark"] body .ui-datatable .ui-datatable-data > tr .ui-row-toggler,
html[data-theme="dark"] body .ui-datatable .ui-datatable-data > tr .ui-row-toggler.ui-icon-circle-triangle-e,
html[data-theme="dark"] body .ui-datatable .ui-datatable-data > tr .ui-row-toggler.ui-icon-circle-triangle-s {
	color: var(--theme-accent) !important;
}

/* Tabelas dentro de rowExpansion se integram à superfície da linha expandida. */
html[data-theme="dark"] body .ui-datatable .ui-datatable-data > tr.ui-expanded-row-content,
html[data-theme="dark"] body .ui-datatable .ui-datatable-data > tr.ui-expanded-row-content > td {
	background-color: var(--clean-color-lighter) !important;
}

html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable thead,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable thead tr,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable thead th,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-datatable-header,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-datatable-footer,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-paginator,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-datatable-scrollable-header,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-datatable-scrollable-header-box,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-datatable-scrollable-footer,
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable .ui-datatable-scrollable-footer-box {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Cabeçalhos congelados precisam ser opacos para encobrir as colunas de dias
 * que continuam se movendo por baixo deles no scroll horizontal. */
html[data-theme="dark"] body .ui-expanded-row-content .ui-datatable thead th.freeze {
	background-color: var(--clean-color-lighter) !important;
	background-clip: padding-box;
}

/* Tabelas contidas em cards mantêm cabeçalho e paginação na superfície do
 * próprio card, independentemente da tela em que aparecem. */
html[data-theme="dark"] body .card .ui-datatable thead,
html[data-theme="dark"] body .card .ui-datatable thead tr,
html[data-theme="dark"] body .card .ui-datatable thead th,
html[data-theme="dark"] body .card .ui-datatable .ui-datatable-header,
html[data-theme="dark"] body .card .ui-datatable .ui-datatable-scrollable-header,
html[data-theme="dark"] body .card .ui-datatable .ui-datatable-scrollable-header-box,
html[data-theme="dark"] body .card .ui-datatable .ui-paginator {
	background: var(--theme-surface-raised) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* O card de uma página dinâmica é estrutural e transparente; cabeçalho e
 * paginação acompanham o fundo da própria dialog, não uma superfície elevada. */
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable thead,
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable thead tr,
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable thead th,
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable .ui-datatable-header,
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable .ui-datatable-scrollable-header,
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable .ui-datatable-scrollable-header-box,
html[data-theme="dark"] body.nl-dialog-page .card .ui-datatable .ui-paginator {
	background: var(--theme-surface) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
	background-color: var(--theme-surface-raised) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
	color: var(--theme-text) !important;
}

html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"] {
	color: var(--theme-text) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left {
	border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .login img[src*="powered-by-nl-cinza"] {
	filter: brightness(1.65);
}

html[data-theme="dark"] .login img[src*="logo-login-big"] {
	background-color: transparent;
	filter: grayscale(1) brightness(0) invert(1);
}

html[data-theme="dark"] .ui-datepicker select option,
html[data-theme="dark"] select option {
	background-color: var(--theme-input);
	color: var(--theme-text);
}

html[data-theme="dark"] * {
	scrollbar-color: #555b69 var(--theme-surface-soft);
}

@media (prefers-reduced-motion: reduce) {
	html,
	body,
	.card,
	.form-control,
	.ui-inputfield,
	.ui-dialog,
	.ui-overlaypanel,
	.ui-menu,
	.ui-datatable,
	.ui-tabs-panel,
	.theme-mode-menu-toggle {
		transition: none;
	}
}

@media print {
	.theme-mode-menu-toggle {
		display: none !important;
	}
}