/* Modo escuro do Michael. Liga com <html data-theme="dark">, guardado no navegador (botao da lua no topo e no login).
   O modo claro nao muda nada: tudo aqui so vale com data-theme="dark". */

/* botao claro/escuro */
html:not([data-theme="dark"]) .tema-sol, html[data-theme="dark"] .tema-lua {
	display: none !important;
}

.tema-login {
	position: absolute;
	top: 20px;
	right: 24px;
	color: #76838f;
	font-size: 18px;
}

/* a troca abre num circulo a partir do botao (tema.js); sem o efeito padrao do navegador */
html.tema-anim::view-transition-old(root), html.tema-anim::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

html.tema-trocando, html.tema-trocando * {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

/* ===== Escuro ===== */
@media screen {
	html[data-theme="dark"] {
		--verde: #76b520;
		--verde-link: #8fcf55;
		--fundo: #121619;
		--superficie: #1b2125;
		--superficie2: #20272c;
		--borda: #2c353b;
		--campo: #151a1d;
		--campo-borda: #364148;
		--texto: #cdd6db;
		--titulo: #eef2f4;
		--suave: #8d9aa2;
		color-scheme: dark;
	}

	html[data-theme="dark"] body, html[data-theme="dark"] .page, html[data-theme="dark"] .page-content {
		background-color: var(--fundo);
		color: var(--texto);
	}

	html[data-theme="dark"] .page-login-v2 > .page, html[data-theme="dark"] .page-login-v2 .page-content {
		background: transparent;
	}

	html[data-theme="dark"] .site-navbar {
		background-color: #0d1113 !important;
	}

	html[data-theme="dark"] .site-menubar {
		background: #4b8a1d !important;
	}

	html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4,
	html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .page-title, html[data-theme="dark"] .panel-title,
	html[data-theme="dark"] .card-title, html[data-theme="dark"] strong, html[data-theme="dark"] b {
		color: var(--titulo);
	}

	html[data-theme="dark"] .page a:where(:not(.btn, .badge, .nav-link, .page-link, .dropdown-item)) {
		color: var(--verde-link);
	}

	html[data-theme="dark"] table.dataTable tbody td a {
		color: var(--texto);
	}

	html[data-theme="dark"] table.dataTable tbody td:first-child a, html[data-theme="dark"] table.dataTable tbody td a:hover {
		color: var(--verde-link);
	}

	html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .card-block, html[data-theme="dark"] .card-body,
	html[data-theme="dark"] .panel-body, html[data-theme="dark"] .panel-footer, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer,
	html[data-theme="dark"] .panel > .panel-heading:not([class*="bg-"]), html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content,
	html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-grey-100, html[data-theme="dark"] .bg-grey-200 {
		background-color: var(--superficie) !important;
		border-color: var(--borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .panel, html[data-theme="dark"] .card {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
	}

	html[data-theme="dark"] .well, html[data-theme="dark"] pre, html[data-theme="dark"] code, html[data-theme="dark"] .popover, html[data-theme="dark"] .popover-content {
		background-color: var(--superficie2);
		border-color: var(--borda);
		color: var(--texto);
	}

	html[data-theme="dark"] hr, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer,
	html[data-theme="dark"] .nav-tabs, html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom {
		border-color: var(--borda) !important;
	}

	html[data-theme="dark"] .close {
		color: var(--texto);
		text-shadow: none;
	}

	html[data-theme="dark"] label, html[data-theme="dark"] .form-control-label, html[data-theme="dark"] .control-label {
		color: var(--texto);
	}

	html[data-theme="dark"] .text-muted, html[data-theme="dark"] .grey-600, html[data-theme="dark"] .grey-700 {
		color: var(--suave) !important;
	}

	html[data-theme="dark"] .text-dark, html[data-theme="dark"] .grey-800, html[data-theme="dark"] .blue-grey-700 {
		color: var(--titulo) !important;
	}

	/* campos */
	html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
	html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"],
	html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"],
	html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
	html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
		background-color: var(--campo) !important;
		border-color: var(--campo-borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] {
		background-color: var(--superficie2) !important;
		color: var(--suave);
	}

	html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder {
		color: #67737a;
	}

	html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .input-group-addon {
		background-color: var(--superficie2);
		border-color: var(--campo-borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .select2-container--default .select2-selection__rendered {
		color: var(--texto);
	}

	html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-results__option {
		background-color: var(--superficie2);
		border-color: var(--borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
		background-color: #2b343a;
	}

	html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
		background-color: #2b343a;
		border-color: var(--borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .checkbox-custom label::before, html[data-theme="dark"] .radio-custom label::before {
		background-color: var(--campo);
		border-color: #4a565e;
	}

	/* botoes claros */
	html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline.btn-default {
		background-color: var(--superficie2);
		border-color: var(--campo-borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-outline.btn-default:hover {
		background-color: #2b343a;
		color: var(--titulo);
	}

	/* menus suspensos */
	html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .site-menu-sub {
		background-color: var(--superficie2);
		border-color: var(--borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .dropdown-menu a, html[data-theme="dark"] .site-menu-sub a {
		color: var(--texto) !important;
	}

	html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-menu a:hover, html[data-theme="dark"] .site-menu-sub .site-menu-item:hover {
		background-color: rgba(255, 255, 255, 0.06);
	}

	/* tabelas */
	html[data-theme="dark"] .table {
		color: var(--texto);
	}

	html[data-theme="dark"] .table td, html[data-theme="dark"] .table th {
		border-color: var(--borda);
	}

	html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
		background-color: rgba(255, 255, 255, 0.025);
	}

	html[data-theme="dark"] .table-hover tbody tr:hover {
		background-color: rgba(106, 174, 39, 0.12);
	}

	html[data-theme="dark"] .dataTables_info, html[data-theme="dark"] .dataTables_length, html[data-theme="dark"] .dataTables_length label {
		color: var(--suave);
	}

	html[data-theme="dark"] .dataTables_processing.card {
		background-color: var(--superficie2) !important;
	}

	html[data-theme="dark"] .page-link {
		background-color: var(--superficie);
		border-color: var(--borda);
		color: var(--texto);
	}

	html[data-theme="dark"] .page-item.disabled .page-link {
		background-color: var(--superficie);
		border-color: var(--borda);
		color: #5b666d;
	}

	html[data-theme="dark"] .page-item.active .page-link {
		background-color: var(--verde);
		border-color: var(--verde);
		color: #fff;
	}

	html[data-theme="dark"] .nav-tabs .nav-link {
		color: var(--suave);
	}

	html[data-theme="dark"] .nav-tabs .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
		background-color: var(--superficie);
		border-color: var(--borda) var(--borda) var(--superficie);
		color: var(--titulo);
	}

	/* etapas do pedido */
	html[data-theme="dark"] .step:not(.current):not(.active) {
		background-color: var(--superficie);
		color: var(--suave);
	}

	html[data-theme="dark"] .step:not(.current):not(.active) .step-number {
		background-color: var(--superficie2);
		color: var(--suave);
	}

	/* calendario de data */
	html[data-theme="dark"] .datepicker table tr td, html[data-theme="dark"] .datepicker table tr th, html[data-theme="dark"] .datepicker-days .day {
		color: var(--texto);
	}

	html[data-theme="dark"] .datepicker table tr td.day:hover, html[data-theme="dark"] .datepicker table tr td.focused,
	html[data-theme="dark"] .datepicker .datepicker-switch:hover, html[data-theme="dark"] .datepicker .prev:hover, html[data-theme="dark"] .datepicker .next:hover {
		background: #2b343a;
	}

	/* telas com fundo branco escrito direto no codigo */
	html[data-theme="dark"] [style*="background-color: white"], html[data-theme="dark"] [style*="background-color:white"],
	html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background-color: #fff"],
	html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background: #fff"],
	html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background-color: #FFF"] {
		background-color: var(--superficie) !important;
		color: var(--texto);
	}

	html[data-theme="dark"] .panel > .panel-heading.bg-dark {
		background-color: #232b30 !important;
		border-bottom: 1px solid var(--borda);
	}

	/* Documentos em lote */
	html[data-theme="dark"] #pickBox {
		background: var(--superficie) !important;
		color: var(--texto);
	}

	html[data-theme="dark"] .pick-item {
		border-bottom-color: var(--borda) !important;
	}

	html[data-theme="dark"] .docs-ok {
		color: #9fd66b !important;
	}

	html[data-theme="dark"] .docs-no {
		color: #ff8a80 !important;
	}

	/* login */
	html[data-theme="dark"] .page-login-v2 .page-login-main {
		background: var(--superficie);
		color: var(--texto);
	}

	html[data-theme="dark"] .page-login-v2 .page-login-main .brand-img {
		filter: brightness(0) invert(0.92);
	}
}