@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import "/css/color.css";

/* ====================================================================
 * Conteúdo migrado do newSite.css (Bootstrap 3 legado) — cascata
 * preservada: este bloco vinha ANTES das regras do site.css (o link
 * do newSite.css carregava primeiro). Limpeza de morto/duplicatas será
 * feita incrementalmente. O @import color.css foi removido (já no topo).
 * ==================================================================== */

.d00 {
	background-color: #000000;
}

.sc00-f {
	filter: invert(76%) sepia(80%) saturate(927%) hue-rotate(307deg) brightness(105%) contrast(100%);
}

	

.green-color-btn {
	background-color: #aeffa4;
	color: #121212;
}

	.green-color-btn:hover {
		color: #272727;
		background-color: rgba(174, 255, 164, 0.5);
		box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
	}

.danger-color {
	background-color: #B35447;
	color: #121212;
}

	.danger-color:hover {
		color: #272727;
		background-color: #c47469;
		box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
	}

body {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 16px;
	padding-top: 51px;
	height: 100%;
	overflow: hidden;
}

#info-message {
	position: absolute;
	left: 30%;
	width: 40%;
	z-index: 100;
	align-self: center;
}

.alert-sucesso {
	color: #aeffa4;
	background: rgba(18, 18, 18, 0.85);
}

.alert-erro {
	color: #B35447;
	background: rgba(18, 18, 18, 0.85);
}
.header_logo {
	height: 1.7rem;
	width: auto;
	fill: #FFA17F;
}

.header_logo_metalar {
	height: 2.6rem;
	margin-top: -3px;
	width: auto;
	fill: #FFA17F;
}

/*#endregion*/
/*#region calendário bootstrap*/
.bootstrap-datetimepicker-widget.dropdown-menu {
	margin: 2px 5px;
	padding: 0px;
	width: 14.5em;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
	background: var(--yellow-light) !important;
	color: #333333;
}

.bootstrap-datetimepicker-widget {
	color: var(--yellow-light) !important;
	background-color: #333333;
}

	.bootstrap-datetimepicker-widget table td.day:hover,
	.bootstrap-datetimepicker-widget table td.hour:hover,
	.bootstrap-datetimepicker-widget table td.minute:hover,
	.bootstrap-datetimepicker-widget table td.second:hover {
		background: var(--yellow-light) !important;
		color: #333333;
		cursor: pointer;
	}

	.bootstrap-datetimepicker-widget table td.active,
	.bootstrap-datetimepicker-widget table td.active:hover {
		background: var(--yellow-light) !important;
		color: #333333;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	}

	.bootstrap-datetimepicker-widget table td span {
		color: var(--yellow-light) !important;
	}

		.bootstrap-datetimepicker-widget table td span:hover {
			background: var(--yellow-light) !important;
			color: #333333;
		}

		.bootstrap-datetimepicker-widget table td span.active {
			background-color: var(--yellow-light) !important;
			color: #333333;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		}

		.bootstrap-datetimepicker-widget table td span.old {
			color: #777777;
		}

	.bootstrap-datetimepicker-widget table td.today:before {
		border-bottom-color: var(--yellow-light) !important;
	}

/*#endregion*/
/*#region Tela Dashboard*/
/*#tooltip-div {
	top: 0px;
	left: 0px;
	position: absolute;
	visibility: hidden;
	background-color: #575E66;
	color: #B8C6CC;
	opacity: 0.8;
	width: 100px;
	z-index: 10000;
}*/





.modal-info .text-label {
	flex-basis: 100%;
}

.report-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	margin: 5px;
	min-width: 99%;
	max-width: 99%;
}

	.report-header .item {
		flex-grow: 1;
		flex-basis: 0;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		flex-wrap: wrap;
		text-transform: capitalize;
	}

	.report-header .item2 {
		flex-grow: 2;
		flex-basis: 0;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		flex-wrap: wrap;
		text-transform: capitalize;
	}

.report-body::-webkit-scrollbar, .new-report-body::-webkit-scrollbar {
	width: 5px;
	background-color: #121212;
}

.report-body::-webkit-scrollbar-thumb, .new-report-body::-webkit-scrollbar-thumb {
	background: #FFA17F;
	border: 0px none #ffffff;
	border-radius: 99px;
}

.report-body {
	display: flex;
	flex-direction: column;
	max-height: calc(100% - 110px);
	align-items: center;
	overflow: auto;
	overflow-x: hidden;
}

	.report-body .border-new {
		border: 1px solid #aeffa4;
	}

	.report-body .border-edit {
		border: 1px solid var(--yellow-light) !important;
	}

	.report-body {
		content-visibility: auto;
		contain-intrinsic-size: 65.69px;
		box-shadow: 0 1px 5px rgb(0, 0, 0);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		margin: 5px;
		min-width: 99%;
		max-width: 99%;
		background-color: #272727;
		border-radius: 10px;
	}

.new-report-content {
	width: 100%;
	height: calc(100vh - 15px);
	overflow-y: hidden !important;
}

.report-body .report-card .header-label {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
	color: var(--yellow-light) !important;
}

	.report-body .report-card .header-label a {
		margin: 0 5px 0 5px;
	}

.report-body .report-card .header-label2 {
	display: flex;
	flex-direction: row;
	flex-grow: 2;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
	color: var(--yellow-light) !important;
}

	.report-body .report-card .header-label2 a {
		margin: 0 5px 0 5px;
	}

.graph-box-text {
	color: #FFA17F;
}

.graphs {
	height: calc(100vh - 360px);
	width: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
}

	.graphs .graph-panel {
		height: 49%;
		margin: 5px 0 0 0;
	}

.graph-fixed-height {
	height: 300px !important;
	width: 100vw;
}

.row-divisor-row {
	display: flex;
	flex-direction: row !important;
	justify-content: space-between;
	flex: 1 1 auto;
}

/*#endregion*/
/*#region New Class Report*/
.new-report-body {
	display: flex;
	flex-direction: column;
	max-height: calc(100% - 100px);
	align-items: center;
	overflow: auto;
	overflow-x: hidden;
}

.new-report-card {
	
	box-shadow: 0 1px 5px rgb(0, 0, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px;
	min-width: 99%;
	max-width: 99%;
	background-color: #272727;
	border-radius: 10px;
}

.new-text-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 200px;
}

	.new-text-label label {
		font-size: 1.5rem;
		margin-bottom: -9px;
		align-self: center;
	}

.new-header-label {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
	color: var(--yellow-light) !important;
	align-self: baseline;
}

.select-item {
	box-shadow: 0 1px 5px rgb(0, 0, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px;
	min-width: 99%;
	max-width: 99%;
	background-color: #1e1e1e !important;
	border-radius: 10px;
}

	.select-item:hover {
		box-shadow: 0 1.5px 6px var(--yellow-light) !important;
		cursor: pointer;
		color: var(--yellow-light) !important;
	}

.alert-dangers {
	background-color: transparent;
	text-align: center;
	color: #ca1444;
}
/*#endregion*/
/*#region Tela percurso*/
.main-side-menu {
	display: flex;
	flex-direction: column;
}

.side-bar-menu::-webkit-scrollbar {
	width: 5px;
	background-color: #121212;
}

.side-bar-menu::-webkit-scrollbar-thumb {
	background: #FFA17F;
	border: 0px none #ffffff;
	border-radius: 99px;
}
	.side-bar-menu {
		transition: 0.3s;
	}

.collapse-button {
	position: absolute;
	color: #FFA17F;
	margin-left: 13vw;
	margin-top: 85px;
	cursor: pointer;
	transition: 0.3s;
}

.side-content {
	position: absolute;
	display: flex;
	margin-left: 0px;
	width: 100vw;
	height: calc(100vh - 52px);
	z-index: 0;
}

/*#endregion */
/*#region leaflet map estilização*/
.leaflet-control-zoom-in {
	background-color: rgba(18, 18, 18, 0.85) !important;
	color: #FFA17F !important;
	border-color: #FFA17F !important;
}

.leaflet-control-zoom-out {
	background-color: rgba(18, 18, 18, 0.85) !important;
	color: #FFA17F !important;
}

.leaflet-control-layers {
	background: rgba(18, 18, 18, 0.85) !important;
}

.leaflet-control-layers-toggle {
	background-color: rgba(18, 18, 18, 0) !important;
	border-radius: 10px;
}

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	background: #121212;
	border-radius: 5px;
}

.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #121212;
	background: #121212;
}

.leaflet-control-layers-overlays label {
	color: #B8C6CC;
}

.leaflet-control-layers-overlays {
	color: #121212;
}

.leaflet-tile {
	filter: brightness(0.9) !important;
}

.leaflet-image-layer {
	filter: brightness(0.9) !important;
}

/*#endregion*/
/*#region equipamentos no mapa leaflet estilização*/
.my-div-icon {
	position: relative;
}

.my-div-image {
	width: 100%;
}

.my-div-span {
	-webkit-text-stroke: 0.1px #B8C6CC !important;
	display: block;
	position: absolute;
	color: #B8C6CC !important;
	font-size: 9px;
	padding: 4px;
	background-color: rgba(87, 94, 102, 0.6) !important;
	border-radius: 5px;
}

/*#endregion*/

/*#region alerta informacional*/
.alerta-informacional {
	position: absolute;
	width: 50vw;
	left: 25vw;
	top: 10px;
	background-color: rgba(18, 18, 18, 0.85);
	padding: 15px;
	z-index: 1000 !important;
	border-radius: 10px;
}

	.alerta-informacional li {
		color: var(--yellow-light) !important;
	}

	.alerta-informacional .close {
		color: var(--yellow-light) !important;
	}

/*#endregion*/
/*#region gráfico d3 linha tela percurso*/
.overlay {
	fill: none;
	pointer-events: all;
}

.y-axis .tick line {
	stroke: #FFA17F;
}

.y2-axis .tick line {
	stroke: var(--yellow-light) !important;
}

/*#endregion*/

/*#region tela home*/
@media only screen and (min-width: 1280px) {
	.status-operacao-equip .status-operacao-header .signal-icon {
		display: none !important;
	}
}

@media only screen and (max-width: 1280px) {
	#notification-icon {
		position: absolute;
		top: 220px;
		right: 21.5vw;
	}

	#omissao-table {
		display: flex;
		position: absolute;
		top: 250px;
		right: 0;
		width: 100vw;
		z-index: 999;
	}

	#EquipStatusManutencao::-webkit-scrollbar {
		width: 2px !important;
	}

	#equipments-on-operation::-webkit-scrollbar {
		height: 2px !important;
	}

	#EquipStatusOutrosMotivos {
		height: 45%;
	}

	#right-menu-bar {
		height: calc(99% - 193px);
		width: 20vw;
		min-width: 20vw;
		max-width: 20vw;
	}

	#left-menu-bar {
		height: calc(99% - 193px);
		width: 20vw;
		min-width: 22vw;
		max-width: 20vw;
	}

	#bottom-menu-bar {
		position: absolute;
		display: flex;
		width: 100vw;
		height: auto;
		bottom: 0;
		left: 0vw;
		z-index: 1;
		background-color: rgba(30, 30, 30, 0.85);
		transition: 0.3s;
	}

	#equipments-on-operation {
		height: auto;
	}

	.leaflet-right {
		font-size: 2vmin !important;
	}

	.leaflet-control-zoom {
		font-size: 2vmin !important;
	}

		.leaflet-control-zoom a {
			width: 5vmin !important;
			height: 5vmin !important;
			font-size: 4vmin !important;
			line-height: 4vmin !important;
		}

	.leaflet-control-layers {
		font-size: 2vmin !important;
	}

		.leaflet-control-layers a {
			width: 5vmin !important;
			height: 5vmin !important;
			font-size: 4vmin !important;
			line-height: 4vmin !important;
		}

	#EquipStatusManutencao h8 {
		display: none !important;
	}

	.navbar-equipment-item {
		font-size: 16px !important;
	}

	.status-operacao-equip .status-operacao-header .text {
		font-size: 0.95rem !important;
		color: #fff !important;
	}

	.status-operacao-equip .status-operacao-header .signal-icon {
		height: 1.8vh;
		margin-left: -2px;
		margin-top: 3px;
		z-index: 10;
	}

	.status-operacao-equip .status-operacao-header .speed {
		display: none !important;
	}

	.status-operacao-equip .status-operacao-footer {
		font-size: 0.82rem !important;
	}

		.status-operacao-equip .status-operacao-footer .status-text {
			text-align: left;
		}

	.status-operacao-equip .status-operacao-body {
		display: none !important;
	}

	.status-operacao-equip-container {
		flex-direction: row !important;
		justify-content: space-evenly !important;
		/* width: 140px !important;
		min-width: 140px !important;
		max-width: 140px !important; */
		margin-left: 10px;
		margin-right: 10px;
	}

		.status-operacao-equip-container .status-operacao-actions .first-block {
			flex-direction: column !important;
		}

			.status-operacao-equip-container .status-operacao-actions .first-block a {
				font-size: 16px !important;
				padding: 0 !important;
			}
}
/*#endregion*/

	
	/*#region tela cadastros*/

	.send-file {
		display: flex;
		flex-direction: column;
		margin: 5px;
	}

		.send-file .file-input {
			color: #B8C6CC;
		}

		.send-file .file-input {
			color: #B8C6CC;
		}

	.width-file {
		width: 210px;
	}

	.qualidade-layout {
		position: fixed;
		display: flex;
		flex-direction: row;
		background-color: rgba(18, 18, 18, 0.6);
		height: 120px;
		left: 15%;
		width: 70%;
		bottom: 0;
		z-index: 2000;
	}

	.qualidade-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		height: 100%;
	}

		.qualidade-container h4 {
			border-bottom: 1px solid #575E66;
			margin: 10px 10px 30px 10px;
		}

		.qualidade-container .body {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

			.qualidade-container .body .element {
				margin: -24px 10px 0px 10px;
			}

				.qualidade-container .body .element label {
					margin-bottom: -5px;
				}

				

			.qualidade-container .body .btn {
				margin-right: 10px;
			}

	.cadastro-main-container {
		position: absolute;
		display: flex;
		flex-direction: column;
		top: 65px !important;
		left: 0;
		width: 100vw;
		background-color: #121212;
		height: calc(100% - 65px);
		min-height: calc(100% - 65px);
		max-height: calc(100% - 65px);
		z-index: 0;
	}

		.cadastro-main-container .navbar-cadastro {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			gap: 0.25rem;
			background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(24, 24, 24, 0.98));
			border-bottom: 1px solid rgba(255, 255, 255, 0.05);
			box-shadow: var(--stock-elevation-1);
			padding: 0.3rem 0.5rem 0;
			width: 100%;
		}

			.cadastro-main-container .navbar-cadastro .navbar-item {
				color: var(--stock-muted);
				padding: 0.55rem 0.5rem;
				cursor: pointer;
				text-align: center;
				flex-grow: 1;
				align-content: center;
				font-size: 0.85rem;
				font-weight: 600;
				letter-spacing: 0.02em;
				border: none;
				border-bottom: 2px solid transparent;
				border-top-left-radius: var(--stock-radius-sm);
				border-top-right-radius: var(--stock-radius-sm);
				transition: color var(--stock-transition), background var(--stock-transition), border-color var(--stock-transition);
			}

				.cadastro-main-container .navbar-cadastro .navbar-item:hover {
					background: rgba(255, 255, 179, 0.06);
					color: var(--yellow-light) !important;
				}

				.cadastro-main-container .navbar-cadastro .navbar-item.active {
					background: rgba(255, 255, 179, 0.08);
					color: var(--yellow-light) !important;
					border-bottom-color: var(--yellow-light);
				}

		.cadastro-main-container .content {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 100% !important;
			transition: opacity 0.18s ease;
		}

		/* Troca de aba: o conteúdo some e reaparece com fade, escondendo o
		   swap de HTML e o recriar do mapa Leaflet (que pisca os tiles). */
		.cadastro-main-container.is-switching .content {
			opacity: 0;
			pointer-events: none;
		}

		/* Skeleton exibido enquanto a aba carrega. Fica no container (e não
		   no .content, que está com fade-out), por isso continua visível.
		   O 'top' é ajustado via JS para a altura da navbar das abas. */
		.cadastro-skeleton {
			display: none;
		}

		.cadastro-main-container.is-switching .cadastro-skeleton {
			display: flex;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			flex-direction: row;
			gap: 14px;
			padding: 20px;
			z-index: 500;
			pointer-events: none;
		}

		.cadastro-skeleton .cadastro-skeleton-col {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.cadastro-skeleton .cadastro-skeleton-info {
			width: 20%;
		}

		.cadastro-skeleton .cadastro-skeleton-map {
			width: 70%;
		}

		.cadastro-skeleton .cadastro-skeleton-table {
			width: 15%;
		}

		.cadastro-skeleton .sk-block {
			display: block;
			border-radius: var(--stock-radius-sm, 6px);
			background-color: rgba(255, 255, 255, 0.05);
			background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%);
			background-size: 200% 100%;
			background-repeat: no-repeat;
			background-position: -150% 0;
			animation: cadastro-skeleton-shimmer 1.3s ease-in-out infinite;
		}

		.cadastro-skeleton .sk-title {
			height: 26px;
			width: 60%;
			margin-bottom: 6px;
		}

		.cadastro-skeleton .sk-input {
			height: 42px;
			width: 100%;
		}

		.cadastro-skeleton .sk-button {
			height: 42px;
			width: 55%;
			margin-top: 8px;
		}

		.cadastro-skeleton .sk-map {
			flex: 1 1 auto;
			height: 100%;
			min-height: 200px;
		}

		.cadastro-skeleton .sk-row {
			height: 34px;
			width: 100%;
		}

		@keyframes cadastro-skeleton-shimmer {
			to {
				background-position: 150% 0;
			}
		}

		/* Recriar mapa após criar um item: fade curto no painel do mapa
		   para suavizar o "piscar" dos tiles ao reconstruir o Leaflet. */
		.cadastro-main-container .content .map.is-refreshing {
			opacity: 0;
		}

			.cadastro-main-container .content .info {
				height: calc(100vh - 112px);
				width: 20%;
				padding: 20px;
				flex-direction: column;
				display: flex;
				overflow-y: auto !important;
				overflow-x: hidden;
				max-height: 100% !important;
			}

				.cadastro-main-container .content .info::-webkit-scrollbar {
					width: 5px;
					background-color: #121212;
				}

				.cadastro-main-container .content .info::-webkit-scrollbar-thumb {
					background: var(--yellow-light);
					border: 0px none #ffffff;
					border-radius: 99px;
				}

				/* Inputs do painel de formulário no visual Stock UI. */
				.cadastro-main-container .content .info .form-floating > label {
					color: var(--stock-muted);
				}

				.cadastro-main-container .content .info .form-control,
				.cadastro-main-container .content .info .form-select {
					background-color: rgba(18, 18, 18, 0.6);
					border-color: rgba(255, 255, 255, 0.08);
					color: #fff;
				}

					.cadastro-main-container .content .info .form-control:focus,
					.cadastro-main-container .content .info .form-select:focus {
						background-color: rgba(18, 18, 18, 0.85);
						border-color: var(--yellow-light);
						box-shadow: 0 0 0 0.18rem rgba(255, 255, 179, 0.18);
						color: #fff;
					}

			.cadastro-main-container .content .map {
				height: calc(100vh - 112px);
				width: 70%;
				flex-direction: column;
				display: flex;
				z-index: 100;
				transition: opacity 0.2s ease;
			}

			.cadastro-main-container .content .el-table {
				height: calc(100vh - 112px);
				width: 15%;
				padding: 5px;
				flex-direction: column;
				display: flex;
			}

				.cadastro-main-container .content .el-table .header {
					color: var(--stock-muted);
					padding: 8px 5px;
					margin-bottom: 4px;
					display: flex;
					justify-content: center;
					font-size: 0.72rem;
					font-weight: 700;
					letter-spacing: 0.04em;
					text-transform: uppercase;
					border-bottom: 1px solid rgba(255, 255, 255, 0.05);
				}


	.el {
		width: 95%;
		border-radius: var(--stock-radius);
		border: 1px solid rgba(255, 255, 255, 0.04);
		border-left: 3px solid transparent;
		background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(35, 35, 35, 0.98));
		box-shadow: var(--stock-elevation-1);
		padding: 4px 6px;
		transition: border-color var(--stock-transition), box-shadow var(--stock-transition), transform var(--stock-transition);
	}

		.el:hover {
			border-left-color: var(--yellow-light);
			box-shadow: var(--stock-elevation-2);
			transform: translateY(-1px);
		}

		.el .el-content > label,
		.el label.opacity-50 {
			color: var(--stock-muted) !important;
			font-size: 0.68rem;
			font-weight: 600;
			letter-spacing: 0.03em;
			text-transform: uppercase;
		}

		/* Ícones de ação dos cards de cadastro no estilo Stock. */
		.el a.fa {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			border-radius: 8px;
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.04);
			opacity: 1 !important;
			transition: background var(--stock-transition), color var(--stock-transition), transform var(--stock-transition);
		}

			.el a.fa:hover {
				background: rgba(255, 255, 179, 0.1);
				transform: translateY(-1px);
			}

			.el a.fa.nm05-c:hover {
				background: var(--stock-danger-bg);
				color: var(--stock-danger) !important;
			}

	.el-content {
		max-width: 100px;
		min-width:100px;
	}

	/* Header padrão do painel de formulário (.info) de cada aba de cadastro. */
	.cadastro-form-header {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 16px;
		padding-bottom: 8px;
		border-bottom: 1px solid #272727;
		color: var(--yellow-light);
		font-weight: 600;
		font-size: 0.9rem;
	}

		.cadastro-form-header i {
			opacity: 0.9;
		}

	/* Aba Camadas: painel/lista da direita (substitui estilo inline). */
	.cadastro-layer-panel {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: calc(100vh - 112px);
		overflow: hidden;
	}

		.cadastro-layer-panel .header {
			color: var(--stock-muted);
			padding: 10px 15px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.05);
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			flex-shrink: 0;
		}

	.cadastro-layer-list {
		overflow-y: auto;
		flex: 1;
		padding: 10px;
	}

	/* Badge padrão usado nos cards de cadastro (formato/status). */
	.cadastro-badge {
		background: #1e1e1e;
		border: 1px solid #2a2a2a;
		color: #B8C6CC;
	}

		.cadastro-badge.is-active {
			background: #1a3a1a;
			border-color: #2a5a2a;
			color: #aef4ae;
		}

	/* ===== Responsivo: tablet/celular =====
	   No mobile o layout de 3 colunas (form/mapa/lista) não cabe. Aqui empilhamos
	   verticalmente, deixamos a barra de abas rolar na horizontal e o container rolar
	   internamente, mantendo o posicionamento (evita conflito com o navbar fixo). */
	@media (max-width: 991.98px) {
		.cadastro-main-container {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

			.cadastro-main-container .navbar-cadastro {
				position: sticky;
				top: 0;
				z-index: 300;
				flex-wrap: nowrap;
				overflow-x: auto;
				justify-content: flex-start;
				-webkit-overflow-scrolling: touch;
			}

				.cadastro-main-container .navbar-cadastro .navbar-item {
					flex: 0 0 auto;
					white-space: nowrap;
				}

			.cadastro-main-container .content {
				flex-direction: column;
				height: auto !important;
			}

				.cadastro-main-container .content .info,
				.cadastro-main-container .content .map,
				.cadastro-main-container .content .el-table {
					width: 100% !important;
					height: auto !important;
					max-height: none !important;
				}

				.cadastro-main-container .content .info {
					overflow: visible !important;
					padding: 16px;
				}

				.cadastro-main-container .content .map {
					height: 55vh !important;
					min-height: 300px;
					flex: 0 0 auto;
				}

				.cadastro-main-container .content .el-table {
					min-height: 240px;
					flex: 0 0 auto;
				}

		.cadastro-layer-panel {
			height: auto !important;
			min-height: 240px;
		}
	}


	/*#endregion*/

	/* =========================================================================
	   CADASTRO ESPACIAL v2 — redesign visual (flag CadastroEspacialV2Enabled).
	   Tudo escopado em .cadastro-v2: o layout legado fica intacto com a flag off.
	   Tema: dark + glassmorphism + acento de marca --nm05 (guia-visual-metalar).
	   ========================================================================= */

	/* Ícone e badge das abas só aparecem no v2 (markup é compartilhado). */
	.navbar-cadastro .navbar-item .cad-tab-ico,
	.navbar-cadastro .navbar-item .tab-count { display: none; }

	.cadastro-main-container.cadastro-v2 {
		/* Tokens do tema futurista (derivados de --nm05). Definidos AQUI no escopo
		   porque globalmente eles só existem dentro de .equipamento-page/.matricula-page;
		   sem isto, var(--brd)/var(--txt-dim)/etc. caíam em fallback (ex.: texto preto). */
		--acc: var(--nm05);
		--acc-soft: rgba(255, 161, 127, 0.14);
		--acc-line: rgba(255, 161, 127, 0.30);
		--surface: rgba(255, 255, 255, 0.04);
		--surface-2: rgba(255, 255, 255, 0.065);
		--brd: rgba(255, 255, 255, 0.08);
		--txt: #ECECEC;
		--txt-dim: #9aa0a6;

		background:
			radial-gradient(1100px 600px at 50% -10%, rgba(255, 161, 127, 0.08), transparent 60%),
			radial-gradient(800px 520px at 92% 0%, rgba(217, 112, 76, 0.05), transparent 55%),
			var(--gray100);
		overflow: hidden;
	}

	/* Aurora sutil ao fundo. */
	.cadastro-main-container.cadastro-v2::before {
		content: "";
		position: absolute;
		inset: -10% -8% auto -8%;
		height: 55%;
		z-index: 0;
		pointer-events: none;
		background:
			radial-gradient(480px 260px at 18% 22%, rgba(255, 161, 127, 0.14), transparent 70%),
			radial-gradient(560px 300px at 82% 8%, rgba(217, 112, 76, 0.10), transparent 72%);
		filter: blur(38px);
		animation: cadastro-v2-aurora 12s ease-in-out infinite alternate;
	}

	@keyframes cadastro-v2-aurora {
		0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.55; }
		100% { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 0.9; }
	}
	@media (prefers-reduced-motion: reduce) { .cadastro-main-container.cadastro-v2::before { animation: none; } }

	/* Grade tech mascarada (camada 2 — faltava; aurora acima já existia em ::before). */
	.cadastro-main-container.cadastro-v2::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
		background-size: 46px 46px;
		mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 78%);
		-webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 78%);
	}

	.cadastro-main-container.cadastro-v2 > * { position: relative; z-index: 1; }

	/* ---------- Barra de título ---------- */
	.cadastro-v2 .cadastro-titlebar {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 13px;
		padding: 14px 22px 12px;
		background: linear-gradient(180deg, rgba(20, 20, 20, 0.72), rgba(18, 18, 18, 0.45));
		border-bottom: 1px solid var(--brd);
		backdrop-filter: blur(10px);
	}

	.cadastro-v2 .cadastro-titlebar__glyph {
		width: 42px;
		height: 42px;
		flex: none;
		display: grid;
		place-items: center;
		border-radius: 13px;
		background: linear-gradient(135deg, var(--nm05), #e8825f);
		color: #2a1206;
		font-size: 18px;
		box-shadow: 0 8px 22px rgba(255, 161, 127, 0.32);
	}

	.cadastro-v2 .cadastro-titlebar__crumb {
		display: block;
		font-size: 11px;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		color: var(--nm05);
		font-weight: 600;
		margin-bottom: 1px;
	}

	.cadastro-v2 .cadastro-titlebar__title {
		font-family: Georgia, "Times New Roman", serif;
		font-weight: 400;
		color: #fff;
		font-size: 1.5rem;
		line-height: 1.05;
		margin: 0;
	}

	/* ---------- Abas ---------- */
	.cadastro-v2 .navbar-cadastro {
		flex: 0 0 auto;
		background: linear-gradient(180deg, rgba(20, 20, 20, 0.55), rgba(18, 18, 18, 0.4));
		justify-content: flex-start;
		gap: 2px;
		padding: 4px 18px 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.cadastro-v2 .navbar-cadastro::-webkit-scrollbar { display: none; }

	.cadastro-v2 .navbar-cadastro .navbar-item {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 9px;
		white-space: nowrap;
		padding: 11px 15px 13px;
		font-size: 0.84rem;
	}

	.cadastro-v2 .navbar-cadastro .navbar-item .cad-tab-ico {
		display: inline-block;
		font-size: 0.9rem;
		opacity: 0.85;
	}

	.cadastro-v2 .navbar-cadastro .navbar-item .tab-count:not(:empty) {
		display: inline-grid;
		place-items: center;
		min-width: 20px;
		height: 18px;
		padding: 0 6px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.07);
		color: var(--stock-muted);
		font-size: 0.66rem;
		font-weight: 700;
	}

	.cadastro-v2 .navbar-cadastro .navbar-item:hover {
		background: var(--acc-soft) !important;
		color: var(--nm05) !important;
	}

	.cadastro-v2 .navbar-cadastro .navbar-item.active {
		background: transparent !important;
		color: var(--nm05) !important;
		border-bottom-color: var(--nm05);
	}

	.cadastro-v2 .navbar-cadastro .navbar-item.active .cad-tab-ico {
		opacity: 1;
		filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.5));
	}

	.cadastro-v2 .navbar-cadastro .navbar-item.active .tab-count:not(:empty) {
		background: var(--acc-soft);
		color: var(--nm05);
	}

	/* ---------- Workspace (3 painéis) ---------- */
	/* overflow:hidden + flex:0 0 auto na titlebar/abas impede que uma aba com
	   lista alta (ex.: Origens) encolha a navbar até sumir — os painéis rolam
	   internamente em vez de empurrar o layout. */
	.cadastro-v2 .content {
		flex: 1 1 auto;
		min-height: 0;
		height: auto !important;
		gap: 16px;
		padding: 16px 18px 18px;
		align-items: stretch;
		overflow: hidden;
	}

	.cadastro-v2 .content .info,
	.cadastro-v2 .content .map,
	.cadastro-v2 .content .el-table {
		height: auto;
		min-height: 0;
		max-height: 100% !important;
	}

	.cadastro-v2 .content .info {
		flex: 0 0 360px;
		width: auto;
		border: 1px solid var(--brd);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.035);
		backdrop-filter: blur(12px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
		padding: 18px;
	}

	.cadastro-v2 .content .map {
		flex: 1 1 auto;
		width: auto;
		border: 1px solid var(--brd);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
	}

	.cadastro-v2 .content .el-table {
		flex: 0 0 330px;
		width: auto;
		padding: 0;
		border: 1px solid var(--brd);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.035);
		backdrop-filter: blur(12px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
		overflow: hidden;
	}

	/* Scrollbar dos painéis em acento de marca. */
	.cadastro-v2 .content .info::-webkit-scrollbar-thumb,
	.cadastro-v2 .content .el-table .list::-webkit-scrollbar-thumb {
		background: rgba(255, 161, 127, 0.45);
	}

	/* ---------- Form ---------- */
	.cadastro-v2 .cadastro-form-header {
		color: var(--nm05);
		font-size: 1rem;
		border-bottom-color: var(--brd);
		padding-bottom: 12px;
		margin-bottom: 18px;
	}

	/* Inputs/selects idênticos aos modais de Matrícula/Equipamentos.
	   O prefixo body[data-module-active="stock"] + !important vencem a regra base
	   do tema stock (input,select{...!important}, texto amarelo/fundo cinza).
	   Mesmos valores: glass .05, foco --nm05 com sombra 3px, raio 10. */
	body[data-module-active="stock"] .cadastro-v2 .info .form-control,
	body[data-module-active="stock"] .cadastro-v2 .info .form-select,
	body[data-module-active="stock"] .cadastro-v2 .info textarea {
		background-color: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.10);
		color: #fff !important;
		border-radius: 10px;
	}

	body[data-module-active="stock"] .cadastro-v2 .info .form-control:focus,
	body[data-module-active="stock"] .cadastro-v2 .info .form-select:focus,
	body[data-module-active="stock"] .cadastro-v2 .info textarea:focus {
		background-color: rgba(255, 255, 255, 0.07) !important;
		border-color: var(--nm05);
		box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.14);
	}

	/* Selects nativos: chevron --nm05 + opções escuras, igual aos modais.
	   Cobre tanto <select.form-select> (Frente) quanto os DropDownListFor que
	   renderizam <select.form-control> (Banco/Zona). */
	.cadastro-v2 .info select.form-select,
	.cadastro-v2 .info select.form-control {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23FFA17F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-size: 14px;
		padding-right: 34px;
	}

	.cadastro-v2 .info select.form-select option,
	.cadastro-v2 .info select.form-control option {
		background-color: #1c1c1c;
		color: #ECECEC;
	}

	.cadastro-v2 .info select.form-select option:checked,
	.cadastro-v2 .info select.form-control option:checked {
		background-color: rgba(255, 161, 127, 0.18);
		color: var(--nm05);
	}

	.cadastro-v2 .info .form-floating > label,
	.cadastro-v2 .info .form-label { color: var(--stock-muted); }

	/* Com valor/foco o rótulo flutua p/ o topo (vira o "rótulo pequeno") — então
	   fica coral --nm05, igual ao rótulo dos dropdowns customizados (cs-fl-label).
	   Prefixo body[data-module-active] + !important p/ vencer a regra base do tema. */
	body[data-module-active="stock"] .cadastro-v2 .info .form-floating > .form-control:focus ~ label,
	body[data-module-active="stock"] .cadastro-v2 .info .form-floating > .form-control:not(:placeholder-shown) ~ label {
		color: var(--nm05) !important;
	}

	/* Dropdown customizado (cs-dd) ocupando a largura do painel e alinhado à
	   altura dos inputs (3.5rem como o .form-floating). O .cs-fixed já define a
	   altura; o trigger padrão (sem label) recebe min-height para não ficar baixo. */
	.cadastro-v2 .info .cs-dd { display: block; width: 100%; }
	.cadastro-v2 .info .cs-dd:not(.cs-fixed) .cs-btn { min-height: calc(3.5rem + 2px); }
	.cadastro-v2 .info .form-group .cs-dd { margin-top: 4px; }

	/* ---------- Botões dos forms (coral, substitui o amarelo legado) ---------- */
	.cadastro-v2 .btn-itens { margin-top: 8px; }

	.cadastro-v2 .stock-btn-primary {
		background: linear-gradient(135deg, var(--nm05), #e8825f);
		color: #2a1206;
		border-radius: 11px;
		padding: 0.6rem 1rem;
		box-shadow: 0 6px 16px rgba(255, 161, 127, 0.26);
		transition: transform .14s ease, box-shadow .14s ease;
	}

		.cadastro-v2 .stock-btn-primary:hover {
			filter: none;
			transform: translateY(-1px);
			box-shadow: 0 10px 24px rgba(255, 161, 127, 0.42);
			color: #2a1206;
		}

	.cadastro-v2 .stock-btn-secondary {
		border-radius: 11px;
		border-color: var(--brd);
		background: rgba(255, 255, 255, 0.04);
		color: var(--txt);
	}

		.cadastro-v2 .stock-btn-secondary:hover {
			background: var(--acc-soft);
			border-color: var(--nm05);
			color: var(--nm05);
		}

	/* Botão "Selecionar arquivo" (KML) e demais outline do form. */
	.cadastro-v2 .info .btn-outline-secondary {
		border-radius: 10px;
		border-color: var(--brd);
		background: rgba(255, 255, 255, 0.04);
		color: var(--txt);
	}

		.cadastro-v2 .info .btn-outline-secondary:hover {
			background: var(--acc-soft);
			border-color: var(--nm05);
			color: var(--nm05);
		}

	/* ---------- Lista de cadastrados ---------- */
	.cadastro-v2 .el-table .header {
		padding: 14px 16px 10px;
		margin: 0;
		border-bottom: none;
		justify-content: flex-start;
		color: #fff;
		font-family: Georgia, serif;
		font-weight: 400;
		font-size: 0.95rem;
		text-transform: none;
		letter-spacing: 0;
	}

	/* Busca injetada via JS. */
	.cadastro-v2 .cad-list-search {
		position: relative;
		padding: 0 14px 12px;
	}

	.cadastro-v2 .cad-list-search > i {
		position: absolute;
		left: 26px;
		top: 9px;
		font-size: 0.78rem;
		color: var(--txt-dim);
		pointer-events: none;
	}

	.cadastro-v2 .cad-list-search input {
		width: 100%;
		padding: 8px 12px 8px 32px;
		border-radius: 10px;
		border: 1px solid var(--brd);
		background: var(--surface);
		color: #fff;
		font-size: 0.82rem;
		outline: none;
		transition: border-color var(--stock-transition), background var(--stock-transition), box-shadow var(--stock-transition);
	}

		.cadastro-v2 .cad-list-search input:focus {
			border-color: var(--nm05);
			background: var(--surface-2);
			box-shadow: 0 0 0 3px var(--acc-soft);
		}

		.cadastro-v2 .cad-list-search input::placeholder { color: var(--txt-dim); }

	/* Barra de exclusão em lote (Origem/Destino) — compacta de propósito: o painel
	   tem só 330px (.cadastro-v2 .content .el-table), e a primeira versão usava
	   .form-check + .stock-btn-danger (peso visual de tela cheia) que quebrava em
	   duas linhas e empurrava a lista de cadastrados pra fora da vista. */
	.cadastro-v2 .cad-lote-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 0 14px 8px;
	}

	.cadastro-v2 .cad-lote-select {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.76rem;
		color: var(--txt-dim);
		cursor: pointer;
		user-select: none;
		white-space: nowrap;
	}

		.cadastro-v2 .cad-lote-select input { margin: 0; cursor: pointer; }

	.cadastro-v2 .cad-lote-delete-btn {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 3px 10px;
		border-radius: 20px;
		border: 1px solid var(--brd);
		background: transparent;
		color: var(--txt-dim);
		font-size: 0.76rem;
		font-weight: 500;
		white-space: nowrap;
		transition: border-color var(--stock-transition), color var(--stock-transition), background var(--stock-transition);
	}

		/* Só fica com a cor de alerta quando há algo pra excluir — desabilitado
		   (0 marcados, ou acima do teto do lote) fica no mesmo tom neutro do rótulo. */
		.cadastro-v2 .cad-lote-delete-btn:not(:disabled) {
			border-color: var(--nm05);
			color: var(--nm05);
		}

		.cadastro-v2 .cad-lote-delete-btn:not(:disabled):hover {
			background: var(--acc-soft);
		}

	.cadastro-v2 .el-table .list,
	.cadastro-v2 .el-table > .overflow-auto,
	.cadastro-v2 .el-table > [id^="todas"],
	.cadastro-v2 .el-table > [id^="todos"] {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding: 0 12px 12px;
	}

	/* Cards de item no estilo novo. */
	.cadastro-v2 .el {
		width: 100%;
		margin: 0 0 9px !important;
		padding: 11px 13px;
		border-radius: 13px;
		border: 1px solid var(--brd);
		border-left: 3px solid transparent;
		background: rgba(255, 255, 255, 0.035);
	}

		.cadastro-v2 .el:hover {
			border-left-color: var(--nm05);
			background: rgba(255, 255, 255, 0.06);
			box-shadow: var(--stock-elevation-1);
			transform: translateX(2px);
		}

	.cadastro-v2 .el .el-content {
		max-width: none;
		min-width: 0;
		flex: 1;
		text-align: left !important;
	}

	.cadastro-v2 .el .el-content > p,
	.cadastro-v2 .el .el-content .yellow-light-c { color: #e8eef0 !important; }

	.cadastro-v2 .el a.fa.yellow-light-c { color: var(--nm05) !important; }

		.cadastro-v2 .el a.fa:hover { background: var(--acc-soft); }

	/* Estado vazio da busca (injetado via JS). */
	.cadastro-v2 .cad-list-empty {
		display: none;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 30px 16px;
		color: var(--txt-dim);
	}

		.cadastro-v2 .cad-list-empty i { font-size: 1.6rem; color: var(--nm05); opacity: 0.7; }
		.cadastro-v2 .cad-list-empty span { font-size: 0.82rem; }

	/* ---------- Controles do Leaflet no tema ----------
	   IMPORTANTE: tematizar só o zoom (usa texto +/−). A toolbar de DESENHO
	   (.leaflet-draw-toolbar) usa um sprite escuro como background-image; se
	   sobrescrevermos o background dela, o ícone some (quadrado preto). Por isso
	   ela fica com o estilo padrão do Leaflet (botão claro, ícone visível). */
	.cadastro-v2 .map .leaflet-control-zoom a {
		background-color: rgba(18, 18, 18, 0.85);
		border-color: var(--brd);
		color: var(--txt);
	}

		.cadastro-v2 .map .leaflet-control-zoom a:hover {
			background-color: rgba(26, 26, 26, 0.95);
			color: var(--nm05);
		}

	/* Skeleton da troca de aba (v2): espelha o layout — card do form + bloco do mapa
	   + card da lista, em cards glass. O elemento e o shimmer base vêm do bloco
	   legado; aqui ajustamos proporções/cards/raios. O 'top' é setado via JS
	   (= offsetTop do .content) p/ alinhar abaixo da titlebar + abas. */
	.cadastro-main-container.cadastro-v2.is-switching .cadastro-skeleton {
		gap: 16px;
		padding: 16px 18px 18px;
	}

	.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-col {
		border: 1px solid var(--brd);
		border-radius: 16px;
		/* opaco (não glass) p/ mascarar o conteúdo que faz fade-out por baixo durante a
		   troca — aproxima o tom do card glass real sobre o fundo escuro. */
		background: #1b1b1b;
		padding: 18px;
	}

	.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-info { width: 360px; flex: 0 0 360px; }
	.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-map { width: auto; flex: 1 1 auto; padding: 0; overflow: hidden; }
	.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-table { width: 330px; flex: 0 0 330px; }

	.cadastro-v2 .cadastro-skeleton .sk-block { background-color: rgba(255, 255, 255, 0.06); border-radius: 10px; }
	.cadastro-v2 .cadastro-skeleton .sk-title { height: 22px; width: 55%; }
	.cadastro-v2 .cadastro-skeleton .sk-input { height: 48px; border-radius: 11px; }
	.cadastro-v2 .cadastro-skeleton .sk-button { height: 44px; width: 100%; border-radius: 11px; margin-top: 6px; }
	.cadastro-v2 .cadastro-skeleton .sk-map { border-radius: 14px; }
	.cadastro-v2 .cadastro-skeleton .sk-row { height: 46px; border-radius: 12px; }

	/* Mobile: o conteúdo é 1 painel por vez (alternador), então o skeleton mostra
	   só a coluna do form em largura cheia. */
	@media (max-width: 991.98px) {
		.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-map,
		.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-table { display: none; }

		.cadastro-v2 .cadastro-skeleton .cadastro-skeleton-info { width: 100%; flex: 1 1 auto; }

		.cadastro-main-container.cadastro-v2.is-switching .cadastro-skeleton { padding: 14px; }
	}

	/* Aba Camadas: o painel também herda o card. */
	.cadastro-v2 .cadastro-layer-panel { height: auto; min-height: 0; }

	/* Alternador mobile (1 painel por vez) — injetado via JS quando a aba tem mapa+lista.
	   Escondido no desktop. */
	.cadastro-v2 .cad-mobile-switch { display: none; }

	/* ---- Responsivo (≤991.98px) ----
	   As regras flex do desktop v2 (info/el-table com flex-basis fixo, map flex:1,
	   content overflow:hidden) venceriam a media query base e colapsariam o mapa em
	   coluna. FALLBACK (sem JS / aba sem mapa): empilha verticalmente. */
	@media (max-width: 991.98px) {
		/* Remove o scroll de página no mobile: o wrapper do layout (#content) usa
		   min-height:100vh e, abaixo do navbar do app, estoura ~o tamanho do navbar.
		   A tela já é um container absoluto que cobre o viewport, então zeramos isso
		   (só na página do Cadastro v2). O scroll passa a ser interno do painel ativo. */
		html.cadastro-v2-page #content.min-vh-100 { min-height: 0 !important; }

		/* Container rola internamente no fallback empilhado; no switcher preenche exato. */
		.cadastro-main-container.cadastro-v2 { overflow-x: hidden; overflow-y: auto; }

		.cadastro-v2 .content {
			flex-direction: column;
			height: auto !important;
			overflow: visible;
			padding: 14px;
			gap: 14px;
		}

			.cadastro-v2 .content .info,
			.cadastro-v2 .content .map,
			.cadastro-v2 .content .el-table {
				flex: 0 0 auto;
				width: 100%;
				height: auto;
				max-height: none !important;
			}

			.cadastro-v2 .content .map {
				height: 55vh;
				min-height: 300px;
			}

			.cadastro-v2 .content .el-table { min-height: 240px; }

		/* ---- Modo alternador: mostra só Cadastro | Mapa | Itens, em tela cheia ---- */
		.cadastro-v2 .cad-mobile-switch {
			display: flex;
			flex: 0 0 auto;
			gap: 4px;
			padding: 4px;
			margin: 0 0 12px;
			background: rgba(255, 255, 255, 0.04);
			border: 1px solid var(--brd);
			border-radius: 12px;
		}

			.cadastro-v2 .cad-mobile-switch button {
				flex: 1;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 7px;
				padding: 11px 6px;
				border: none;
				background: none;
				border-radius: 9px;
				cursor: pointer;
				color: var(--txt-dim);
				font-family: inherit;
				font-size: 13px;
				font-weight: 600;
			}

				.cadastro-v2 .cad-mobile-switch button i { font-size: 13px; }

				.cadastro-v2 .cad-mobile-switch button.active {
					background: linear-gradient(135deg, rgba(255, 161, 127, 0.22), rgba(255, 161, 127, 0.08));
					color: #fff;
					box-shadow: inset 0 0 0 1px var(--acc-line);
				}

		/* Com o switcher ativo (.content recebe cad-mv-*), o content preenche a tela e
		   só o painel selecionado aparece — sem o scrollão de form→mapa→lista. */
		.cadastro-v2 .content[class*="cad-mv-"] {
			flex: 1 1 auto;
			height: auto !important;
			min-height: 0;
			overflow: hidden;
			padding: 12px;
			gap: 0;
		}

			.cadastro-v2 .content.cad-mv-form > .map,
			.cadastro-v2 .content.cad-mv-form > .el-table,
			.cadastro-v2 .content.cad-mv-map > .info,
			.cadastro-v2 .content.cad-mv-map > .el-table,
			.cadastro-v2 .content.cad-mv-list > .info,
			.cadastro-v2 .content.cad-mv-list > .map { display: none !important; }

			.cadastro-v2 .content[class*="cad-mv-"] > .info {
				flex: 1 1 auto;
				width: 100%;
				height: auto;
				min-height: 0;
				max-height: none !important;
				/* !important vence a regra mobile legada `.info{overflow:visible!important}`,
				   senão o form longo transbordava sem poder rolar (página travada). */
				overflow-y: auto !important;
			}

			.cadastro-v2 .content.cad-mv-map > .map {
				flex: 1 1 auto;
				width: 100%;
				height: auto !important;
				min-height: 0;
			}

			.cadastro-v2 .content.cad-mv-list > .el-table {
				flex: 1 1 auto;
				width: 100%;
				height: auto;
				min-height: 0;
			}
	}

	@media (prefers-reduced-motion: reduce) {
		.cadastro-main-container.cadastro-v2::before { animation: none; }
	}

	/* =====================================================================
	   Aba "Litologia" do Cadastro (sem mapa): a lista ocupa o espaço que seria
	   do mapa e exibe cards completos (nome, apelido, grupo, densidade, teor).
	   Reaproveita .el — busca/contagem do v2 funcionam automaticamente.
	   ===================================================================== */
	@media (min-width: 992px) {
		.cadastro-main-container .content .el-table.cad-litologia {
			width: auto;
			flex: 1 1 auto;
		}
	}

	.el-table.cad-litologia .list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 10px;
		align-content: start;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	.el-table.cad-litologia .el.cad-litologia-el {
		width: 100%;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		gap: 9px;
		padding: 12px 13px;
	}

	.cad-litologia-el-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}

	.el-table.cad-litologia .el.cad-litologia-el .el-content {
		max-width: none;
		min-width: 0;
		text-align: left !important;
	}

	.cad-litologia-actions {
		display: flex;
		gap: 6px;
		flex-shrink: 0;
	}

	.cad-litologia-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 7px 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		padding-top: 9px;
	}

		.cad-litologia-stats > span {
			display: flex;
			flex-direction: column;
			gap: 1px;
			min-width: 0;
		}

		.cad-litologia-stats label {
			color: var(--stock-muted);
			font-size: 0.6rem;
			font-weight: 600;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			margin: 0;
		}

		.cad-litologia-stats b {
			color: #e8eef0;
			font-weight: 600;
			font-size: 0.85rem;
			word-break: break-word;
		}

	.cad-litologia-vazio {
		grid-column: 1 / -1;
		text-align: center;
		padding: 28px 16px;
		color: var(--stock-muted);
		font-size: 0.85rem;
	}

	/* Camadas: o "Status" do card usa o toggle de ativação + badge lado a lado,
	   dentro da grade de stats da litologia. */
	.cad-litologia-stats .cad-camada-status {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		margin-top: 2px;
	}

	/* =====================================================================
	   Aba "Imagem do Mapa" do Cadastro: seletor do modo de georreferência
	   (segmented), caixas de dica legíveis, painel das coordenadas manuais,
	   rodapé de formatos e slider temático (form + opacidade dos cards).
	   Classes próprias (map-image-*): valem no layout legado e no v2.
	   ===================================================================== */

	/* Rótulo de seção do form (substitui os textos em opacity-50 ilegíveis). */
	.map-image-section-label {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 7px;
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--stock-muted);
	}

		.map-image-section-label .map-image-range-val {
			margin-left: auto;
			font-size: 0.78rem;
			color: var(--nm05);
		}

	.map-image-corner {
		color: var(--nm05);
		font-size: 0.85rem;
		line-height: 1;
	}

	/* Segmented control do modo (world file × coordenadas manuais). */
	.map-image-mode {
		display: flex;
		gap: 4px;
		padding: 4px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 11px;
		background: rgba(255, 255, 255, 0.04);
	}

		/* Escondido mas focável (teclado): display:none mataria o foco por Tab. */
		.map-image-mode input[type="radio"] {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			border: 0;
			clip-path: inset(50%);
			overflow: hidden;
			white-space: nowrap;
		}

		.map-image-mode input:focus-visible + label {
			box-shadow: inset 0 0 0 1px rgba(255, 161, 127, 0.5);
		}

		/* !important na cor: vence o global `label{color:var(--gray05)!important}`. */
		.map-image-mode label {
			flex: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 7px;
			margin: 0;
			padding: 8px 6px;
			border-radius: 8px;
			font-size: 0.76rem;
			font-weight: 600;
			color: var(--stock-muted) !important;
			cursor: pointer;
			white-space: nowrap;
			transition: background var(--stock-transition), color var(--stock-transition);
		}

			.map-image-mode label:hover { color: #ECECEC !important; }

			.map-image-mode label i { font-size: 0.8rem; opacity: 0.9; }

		.map-image-mode input:checked + label {
			background: rgba(255, 161, 127, 0.14);
			color: var(--nm05) !important;
			box-shadow: inset 0 0 0 1px rgba(255, 161, 127, 0.30);
		}

	/* Painel agrupador (coordenadas manuais / tolerância do preto). */
	.map-image-coords {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 12px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.03);
	}

	/* Caixa de dica: legível (nada de opacity-50), com fio coral discreto. */
	.map-image-hint {
		display: flex;
		gap: 10px;
		padding: 11px 12px;
		border: 1px solid rgba(255, 161, 127, 0.16);
		border-radius: 10px;
		background: rgba(255, 161, 127, 0.05);
		color: #b9bfc6;
		font-size: 0.76rem;
		line-height: 1.5;
	}

		.map-image-hint > i {
			flex: none;
			margin-top: 2px;
			color: var(--nm05);
		}

		.map-image-hint b { color: #e8eef0; font-weight: 600; }

		.map-image-hint code {
			padding: 0 4px;
			border-radius: 4px;
			background: rgba(255, 255, 255, 0.07);
			color: var(--nm05);
			font-size: 0.72rem;
		}

	.map-image-subtle {
		color: var(--stock-muted);
		font-size: 0.72rem;
		line-height: 1.45;
	}

	/* Linha de switch em pílula de vidro (padrão do guia, seção 08) com painel
	   expansível: cabeçalho ícone + rótulo + switch; corpo (slider/config extra)
	   abre abaixo de um fio quando ligado. Usada no "fundo preto transparente". */
	.map-image-switch-row {
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.03);
		padding: 13px 14px;
	}

	.map-image-switch-row__main {
		display: flex;
		align-items: center;
		gap: 11px;
	}

		.map-image-switch-row__main > i {
			flex: none;
			color: var(--nm05);
			font-size: 0.95rem;
		}

	.map-image-switch-row__label {
		flex: 1;
		margin: 0;
		font-size: 0.84rem;
		font-weight: 600;
		color: #e8edf0 !important; /* vence o label{color:...!important} global */
		cursor: pointer;
	}

	.map-image-switch-row__body {
		border-top: 1px solid rgba(255, 255, 255, 0.07);
		margin-top: 12px;
		padding-top: 12px;
	}

	/* Switch on/off — mesmos valores do .bal-switch do Guia Visual (gradiente + glow). */
	.map-image-switch {
		position: relative;
		display: inline-block;
		width: 46px;
		height: 26px;
		flex: none;
		margin: 0;
	}

		.map-image-switch input {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
		}

		.map-image-switch .slider {
			position: absolute;
			inset: 0;
			cursor: pointer;
			background: rgba(255, 255, 255, 0.12);
			border-radius: 999px;
			transition: 0.2s;
		}

			.map-image-switch .slider::before {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				left: 3px;
				top: 3px;
				background: #fff;
				border-radius: 50%;
				transition: 0.2s;
			}

		.map-image-switch input:checked + .slider {
			background: linear-gradient(135deg, var(--nm05), #e8825f);
			box-shadow: 0 0 12px rgba(255, 161, 127, 0.4);
		}

		.map-image-switch input:checked + .slider::before {
			transform: translateX(20px);
		}

		.map-image-switch input:focus-visible + .slider {
			box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.25);
		}

	/* Rodapé dos formatos suportados. */
	.map-image-formats {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
		padding-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

		.map-image-formats .map-image-section-label { margin: 0 6px 0 0; }

	/* Slider temático (tolerância do preto no form + opacidade nos cards).
	   O preenchimento do trilho até o valor vem do JS (paintRange). */
	.map-image-range {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		width: 100%;
		height: 5px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		outline: none;
		cursor: pointer;
	}

		.map-image-range::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 15px;
			height: 15px;
			border: none;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--nm05), #e8825f);
			box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.18), 0 2px 6px rgba(0, 0, 0, 0.45);
			transition: box-shadow var(--stock-transition);
		}

			.map-image-range::-webkit-slider-thumb:hover {
				box-shadow: 0 0 0 5px rgba(255, 161, 127, 0.26), 0 2px 6px rgba(0, 0, 0, 0.45);
			}

		.map-image-range::-moz-range-thumb {
			width: 15px;
			height: 15px;
			border: none;
			border-radius: 50%;
			background: var(--nm05);
			box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.18), 0 2px 6px rgba(0, 0, 0, 0.45);
		}

	/* Bloco de opacidade dos cards: rótulo à esquerda, valor coral à direita. */
	.map-image-opacity {
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		padding-top: 9px;
	}

	.map-image-opacity__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 8px;
	}

		.map-image-opacity__head label {
			margin: 0;
			color: var(--stock-muted) !important;
			font-size: 0.6rem;
			font-weight: 600;
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.map-image-opacity__head b {
			color: var(--nm05);
			font-size: 0.8rem;
			font-weight: 600;
			font-variant-numeric: tabular-nums;
		}

	/* Importar/Exportar Origens (aba Sub Origens): botões full-width empilhados
	   (como o "Escolher arquivo KML" do form). O <input type=file> nativo fica
	   escondido via .d-none. */
	.send-file {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 12px;
	}

		.send-file .stock-btn-secondary {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin: 0;
			cursor: pointer;
		}

		.send-file .cad-file-pick #origens-file-name {
			display: inline-block;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			vertical-align: bottom;
		}

	/* Modal de visualização da camada no tema (mesmos modais de Matrícula/Equip):
	   superfície glass, título serif em --nm05, bordas suaves, botão temático. */
	.camada-modal .modal-content {
		background: rgba(24, 24, 24, 0.98);
		border: 1px solid rgba(255, 255, 255, 0.10);
		border-radius: 16px;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
		color: #ECECEC;
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.camada-modal .modal-header,
	.camada-modal .modal-footer {
		border-color: rgba(255, 255, 255, 0.08);
	}

	.camada-modal .modal-title {
		font-family: Georgia, "Times New Roman", serif;
		font-weight: 400;
	}

	.camada-modal .modal-title.yellow-light,
	.camada-modal .yellow-light,
	.camada-modal .yellow-light-c {
		color: var(--nm05) !important;
	}

	.camada-modal .modal-title i {
		filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.5));
	}

	.camada-modal .btn-outline-secondary {
		border-radius: 10px;
		border-color: rgba(255, 255, 255, 0.10);
		background: rgba(255, 255, 255, 0.04);
		color: #ECECEC;
	}

		.camada-modal .btn-outline-secondary:hover {
			background: rgba(255, 161, 127, 0.14);
			border-color: var(--nm05);
			color: var(--nm05);
		}

	/* ===== Modais de edição/exclusão das abas do Cadastro v2 =====
	   Carregam no #modal compartilhado (fora do .cadastro-main-container), por isso
	   o escopo é html.cadastro-v2-page (classe posta no <html> só quando a flag v2
	   está ligada). Padroniza com os modais de Matrícula/Equipamentos: superfície
	   glass, título serif --nm05, X coral, inputs temáticos e botão Salvar coral. */
	html.cadastro-v2-page #modal .modal-content {
		background: rgba(24, 24, 24, 0.98);
		border: 1px solid rgba(255, 255, 255, 0.10);
		border-radius: 16px;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
		color: #ECECEC;
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	html.cadastro-v2-page #modal .modal-header,
	html.cadastro-v2-page #modal .modal-footer {
		border-color: rgba(255, 255, 255, 0.08);
	}

	/* Botao em requisicao. A tela trava o Criar/Salvar enquanto o POST esta em voo (ver a trava
	   de clique repetido no topo de _CadastrosScripts.cshtml). Sem estado visual, o botao travado
	   fica identico ao liberado e o usuario clica de novo achando que nao pegou - foi assim que
	   um cadastro de origem virou 10 origens iguais em 20/08/2026. */
	html.cadastro-v2-page .stock-btn-primary:disabled,
	html.cadastro-v2-page .stock-btn-primary[disabled] {
		opacity: .55;
		cursor: progress;
		box-shadow: none;
		transform: none;
	}

	html.cadastro-v2-page #modal .modal-title {
		font-family: Georgia, "Times New Roman", serif;
		font-weight: 400;
	}

	html.cadastro-v2-page #modal .modal-title.yellow-light,
	html.cadastro-v2-page #modal .yellow-light,
	html.cadastro-v2-page #modal .yellow-light-c {
		color: var(--nm05) !important;
	}

	html.cadastro-v2-page #modal .fa-xmark {
		color: var(--nm05) !important;
		opacity: 0.85;
		transition: opacity 0.15s ease;
	}

		html.cadastro-v2-page #modal .fa-xmark:hover { opacity: 1; }

	html.cadastro-v2-page #modal .form-control,
	html.cadastro-v2-page #modal .form-select,
	html.cadastro-v2-page #modal textarea {
		background-color: rgba(255, 255, 255, 0.05) !important;
		border-color: rgba(255, 255, 255, 0.10);
		color: #fff !important;
		border-radius: 10px;
	}

		html.cadastro-v2-page #modal .form-control:focus,
		html.cadastro-v2-page #modal .form-select:focus,
		html.cadastro-v2-page #modal textarea:focus {
			background-color: rgba(255, 255, 255, 0.07) !important;
			border-color: var(--nm05);
			box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.14);
		}

	html.cadastro-v2-page #modal .form-floating > label,
	html.cadastro-v2-page #modal .form-label { color: rgba(184, 198, 204, 0.55); }

	html.cadastro-v2-page #modal .form-floating > .form-control:focus ~ label,
	html.cadastro-v2-page #modal .form-floating > .form-control:not(:placeholder-shown) ~ label {
		color: var(--nm05) !important;
	}

	html.cadastro-v2-page #modal select.form-select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23FFA17F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-size: 14px;
		padding-right: 34px;
	}

		html.cadastro-v2-page #modal select.form-select option {
			background-color: #1c1c1c;
			color: #ECECEC;
		}

	html.cadastro-v2-page #modal .stock-btn-primary {
		background: linear-gradient(135deg, var(--nm05), #e8825f);
		color: #2a1206;
		border-radius: 11px;
		box-shadow: 0 6px 16px rgba(255, 161, 127, 0.26);
	}

		html.cadastro-v2-page #modal .stock-btn-primary:hover {
			filter: none;
			transform: translateY(-1px);
			box-shadow: 0 10px 24px rgba(255, 161, 127, 0.42);
			color: #2a1206;
		}

	html.cadastro-v2-page #modal .stock-btn-danger { border-radius: 11px; }

	/* Dropdown customizado dentro dos modais de edição: largura total e corpo do
	   modal com overflow visível p/ o menu (.cs-menu, absolute) não ser recortado. */
	html.cadastro-v2-page #modal .cs-dd { display: block; width: 100%; }
	html.cadastro-v2-page #modal .modal-body { overflow: visible; }

	/*#region icon colors*/
	a.green-color {
		color: rgba(174, 255, 164, 0.3) !important;
	}

		a.green-color:hover {
			color: #aeffa4 !important;
		}

	a.red-color {
		color: rgba(255, 161, 127, 0.3) !important;
	}

		a.red-color:hover {
			color: #FFA17F !important;
		}

	a.info-color {
		color: rgba(255, 255, 179, 0.3);
	}

		a.info-color:hover {
			color: var(--yellow-light) !important;
		}

	/*#endregion*/
	/*#region colors*/
	

	.info-color {
		color: var(--yellow-light) !important;
	}

	.black-transparent {
		background-color: rgba(18, 18, 18, 0.85) !important;
	}

	.terciary-color {
		color: var(--yellow-light) !important;
	}

	.text-color-gray {
		color: #B8C6CC;
	}

	/* Design tokens do Stock UI (migrado de stock-ui.css). Complementam a
	   paleta de color.css; usados pelos componentes .stock-* em todo o site. */
	:root {
		--stock-success: #6FE08C;
		--stock-success-bg: rgba(111, 224, 140, 0.12);
		--stock-warning: #FFD27F;
		--stock-warning-bg: rgba(255, 210, 127, 0.12);
		--stock-danger: #FF8A7A;
		--stock-danger-bg: rgba(255, 138, 122, 0.12);
		--stock-info: #8DD0FF;
		--stock-info-bg: rgba(141, 208, 255, 0.12);
		--stock-muted: rgba(184, 198, 204, 0.55);
		--stock-border-subtle: rgba(255, 255, 179, 0.08);
		--stock-elevation-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.55);
		--stock-elevation-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 28px -10px rgba(0, 0, 0, 0.7);
		--stock-radius: 10px;
		--stock-radius-sm: 6px;
		--stock-transition: 160ms cubic-bezier(.2, .8, .2, 1);
	}

	/*#endregion*/
	/*#region horimetro*/
	.hor-main-content {
		margin: -9px 0px 0px 0px !important;
	}

	.hor-content {
		width: 100%;
		height: calc(100vh - 75px);
		overflow-y: hidden !important;
	}

	.hor-report-body {
		height: 100% !important;
		flex: 1;
	}

	.report-card.selected {
		background-color: #B35447;
	}

	.report-details-card.selected {
		background-color: #B35447 !important;
		border: 1px solid #B35447;
	}

	.edit-hor-field {
		margin-bottom: 0px !important;
	}

	/*#endregion*/
	/*#region OS*/
	.so-date {
		padding: 5px;
		margin: 10 0 10 0px;
	}

	.so-main-container {
		display: flex;
		flex-direction: row;
		width: 100%;
		top: 0;
		background-color: #272727;
		height: calc(100vh - 51px);
		margin-top: 10px;
	}

	.so-input {
		background: #272727;
		border: 0px;
		padding: 10px;
		margin: 5px;
		color: #B8C6CC;
	}

	.so-obs-input {
		display: flex;
		flex-grow: 8;
	}

	.tt-hint {
		width: 97%;
	}

	.tt-input {
		width: 97%;
	}

	.fault-container {
		display: flex;
		flex-direction: row;
		color: #B8C6CC;
		justify-content: space-around;
		align-items: center;
		flex-grow: 1;
	}

	.verified-fault-card {
		display: flex;
		flex-direction: column;
		padding: 10px;
	}

		.verified-fault-card .text-label label {
			margin: 0;
		}

		.verified-fault-card .text-label h6 {
			margin: 0;
		}

		.verified-fault-card .description-content {
			display: flex;
			flex-direction: row;
		}

			.verified-fault-card .description-content .description {
				flex-grow: 3;
			}

			.verified-fault-card .description-content .content {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-grow: 1;
				justify-content: space-around;
			}

		.verified-fault-card input[type=checkbox]:before {
			content: "";
			display: block !important;
			position: absolute;
			width: 24px;
			height: 24px;
			top: -6px;
			left: 0;
			border: none;
			border-radius: 2px;
			background-color: #575E66;
			box-shadow: none;
		}

		.verified-fault-card input[type=checkbox]:checked:after {
			content: "";
			display: block !important;
			width: 8px;
			height: 22px;
			border: solid #aeffa4;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			top: -7px;
			left: 8px;
		}

		.verified-fault-card .checkbox-text {
			margin-left: 15px;
			font-size: 22px;
			font-weight: 400;
		}

	.so-card {
		display: flex;
		flex-direction: column;
		/*  width: calc(100vw - 260px);*/
		background-color: #2e2e2e;
		margin: 5px;
		padding: 5px 10px 0px 10px;
		box-shadow: 0 1px 5px rgb(0, 0, 0);
		border-radius: 5px;
		border-color: #121212;
	}

		.so-card h6, .so-card label {
			color: #B8C6CC !important;
		}

		.so-card .so-card-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #252525;
			margin: 0 5px 0 5px;
			flex-basis: 0;
		}

			.so-card .so-card-header h6 {
				margin-bottom: 3px;
			}

		.so-card .so-card-body {
			display: flex;
			flex-direction: row;
		}

			.so-card .so-card-body .vehicle-code {
				color: var(--yellow-light) !important;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid #252525;
				text-transform: uppercase;
				margin: 10px 10px 10px 0px;
				padding: 0 5px 0 5px;
			}

			.so-card .so-card-body .so-card-body-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 10px;
			}

				.so-card .so-card-body .so-card-body-content h6 {
					margin-bottom: 0px;
				}

			.so-card .so-card-body .card-started {
				display: flex;
				flex-grow: 1;
			}

			.so-card .so-card-body .card-obs {
				display: flex;
				flex-grow: 5;
			}

			.so-card .so-card-body .card-btns {
				display: flex;
				justify-content: flex-end;
				flex-grow: 3;
			}

			.so-card .so-card-body .horizontal-container {
				display: flex;
				flex-direction: row;
			}

				.so-card .so-card-body .horizontal-container .so-input {
					margin: 0 3px 0 0;
					margin-top: 0px;
				}

	#opened-service-orders-conf {
		color: #B8C6CC;
		margin: 5px;
	}

	.so-select {
		display: flex;
		justify-content: space-around;
		margin-left: 2px;
		margin-right: 2px;
	}

	.so-select-item {
		padding: 0.5rem;
		background-color: #2e2e2e;
		color: #B8C6CC !important;
		width: 33.33%;
		text-align: center;
	}

		.so-select-item:hover, .so-select-item.active {
			background-color: #FFA17F;
			color: #000000 !important;
			font-weight: bold;
			font-size: 16px;
		}

	/*#endregion*/
	/*#region tela viagens*/

	.nav-bar-viagens {
		overflow-y: auto !important;
		/*padding:8px !important;*/
	}

		.nav-bar-viagens::-webkit-scrollbar {
			width: 5px !important;
			background-color: #121212 !important;
		}

		.nav-bar-viagens::-webkit-scrollbar-thumb {
			background: #FFA17F;
			border: 0px none #ffffff;
			border-radius: 9px;
		}

	.viagens-modal-error {
		flex: 1;
		display: flex;
		justify-content: start;
		color: red;
		font-weight: bold;
		margin-right: 15px;
	}



	@keyframes alerts-animation {
		0% {
			width: 100%;
		}

		50% {
			width: 50%;
		}

		100% {
			width: 100%;
		}
	}

	.search-viagens, .search-container {
		display: flex;
		flex: 1;
		justify-content: end;
		align-items: baseline;
		padding-right: 10px;
	}

	#search-viagens, #search-ciclos, #search-matriculas, #search-Checks {
		max-width: 260px;
		margin-left: 5px;
	}

	
	.danger-double-border {
		border-left: 5.5px solid #B35447;
		border-right: 5.5px solid #B35447;
	}

	.warning-viagens {
		border-left: 5.5px solid var(--yellow-light) !important;
	}

	.viagens-body {
		max-height: calc(100vh - 170px);
	}

	.qualidade-body {
		max-height: calc(98vh - 103px);
	}

	.indice-body {
		max-height: calc(98vh - 140px)
	}

	.pds-body {
		max-height: calc(100vh - 91px)
	}

	.employee-body {
		max-height: calc(100vh - 126px)
	}

	.litologia-body {
		max-height: calc(100vh - 123px);
		margin-left: 7px;
	}

	.ajust-name {
		width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		
	}

	/*#endregion*/
	/*#region services*/
	.create-service {
		display: flex;
		flex-direction: row !important;
		justify-content: space-around;
		align-items: start;
	}

		.create-service .form-checklist {
			width: 50% !important;
			min-width: 50% !important;
			max-width: 50% !important;
		}

			.create-service .form-checklist .form-item {
				width: 75% !important;
				max-width: 75% !important;
				min-width: 75% !important;
			}

		.create-service .fault-list {
			height: calc(100vh - 115px);
			min-height: calc(100vh - 115px);
			max-height: calc(100vh - 115px);
			overflow-y: auto;
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: #232323;
		}

			.create-service .fault-list .fault-class {
				padding: 5px;
				background-color: #272727;
			}

			.create-service .fault-list #header-item {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.create-service .fault-list::-webkit-scrollbar {
				width: 5px;
				background-color: #121212;
			}

			.create-service .fault-list::-webkit-scrollbar-thumb {
				background: #FFA17F;
				border: 0px none #ffffff;
				border-radius: 99px;
			}

	/*#endregion*/
	/*#region Calendar*/
	#calendar {
		overflow-x: hidden;
		overflow-y: auto;
	}

		#calendar::-webkit-scrollbar {
			width: 5px;
			background-color: #121212;
		}

		#calendar::-webkit-scrollbar-thumb {
			background: #FFA17F;
			border: 0px none #ffffff;
			border-radius: 99px;
		}

	.shift {
		border: 1px solid #272727;
	}

	/*#endregion*/
	/*#region loader*/

	.placeholder-item {
		box-shadow: 0 1px 1px 0 rgba(33, 33, 33, 0.15);
		border-radius: 4px;
		height: 100px;
		width: 100%;
		position: relative;
		overflow: hidden;
		background-color: #232323;
	}

		.placeholder-item::before {
			content: "";
			display: block;
			position: absolute;
			left: 0px;
			top: 0;
			height: 100%;
			width: 150px;
			background: linear-gradient(to right, transparent 0%, #828282 50%, transparent 100%);
			animation: load 2s cubic-bezier(0.5, 0.5, 0.1, 1) infinite;
		}

	.placeholder-item-2 {
		box-shadow: 0 1px 1px 0 rgba(33, 33, 33, 0.15);
		border-radius: 4px;
		height: 30px;
		width: 60px;
		position: relative;
		overflow: hidden;
		background-color: #232323;
	}

		.placeholder-item-2::before {
			content: "";
			display: block;
			position: absolute;
			left: 0px;
			top: 0;
			height: 100%;
			width: 20px;
			background: linear-gradient(to right, transparent 0%, #828282 50%, transparent 100%);
			animation: load 2s cubic-bezier(0.5, 0.5, 0.1, 1) infinite;
		}

	@keyframes load {
		from {
			left: 0px;
		}

		to {
			left: 100%;
		}
	}
	/*#endregion*/
	.icon-btn {
		display: flex;
		font-size: 22px !important;
		padding: 8px;
	}

	.icon-btn {
		display: flex;
		font-size: 22px !important;
		padding: 8px;
	}

	.horizontal-container {
		display: flex;
		flex-direction: row;
	}



	.span-validation {
		font-size: 11px;
	}

	.white-color {
		color: #B8C6CC;
	}

	.hr-custum-1 {
		border-top: 5px solid rgba(255, 161, 127, 0.7) !important;
		margin: 1rem 1rem !important;
		opacity: 1;
	}

	.hr-custum-2 {
		border-top: 4px solid rgba(255, 161, 127, 0.7) !important;
		margin: 0 0 !important;
		opacity: 1;
	}

	a {
		text-decoration: none !important;
		cursor: pointer;
	}

	.row-divisor {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}


	.page-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		border: none;
	}

	.text-label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.text-label-os {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 2rem;
		margin-right: 2rem;
	}

		.text-label-os .label-os {
			font-size: 1.1rem;
			margin-bottom: -9px;
			align-self: start;
			color: #575E66;
		}

		.text-label-os .h6-os {
			font-size: 1.6rem;
			align-self: start;
			margin-bottom: 20px;
			color: var(--yellow-light) !important;
		}

	.text-label label {
		font-size: 1.1rem;
		margin-bottom: -9px;
		align-self: start;
		color: #575E66;
	}

	.text-label h6 {
		font-size: 1.6rem;
		align-self: start;
		margin-bottom: 20px;
		color: var(--yellow-light) !important;
	}

	.text-btn {
		font-size: 16px;
		display: flex;
		font-weight: 500;
		flex-grow: 1;
		text-align: center;
		justify-content: center;
		padding: 10px;
		cursor: pointer;
		border-right: 1px solid #121212;
	}

		.text-btn.selected, .text-btn:hover {
			color: var(--yellow-light) !important;
			font-weight: 800;
			background-color: #FFA17F;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}



	/*#region Cards Nimer*/

	.horizontal-container-clean {
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.main-button {
		display: flex;
		flex-direction: column;
		padding: 10px 20px 10px 20px;
		justify-content: center;
		text-align: center;
		align-items: center;
		font-weight: 500;
		transition: 0.3s;
		border-radius: 3px;
		font-weight: 600;
		cursor: pointer;
	}

	.overflow-cards-journey {
		max-height: calc(100vh - 57px - 0px);
		overflow: auto;
	}

	

	

	.cards-containers-speed {
		padding: 1rem 0px 0 -1px;
		max-height: calc(100vh - 59px - 10px);
	}

	

	.card-ajuste {
		justify-content: space-between;
		margin-left: 30px;
		margin-right: 50px;
	}


	
	.horizontal-container {
		display: flex;
		justify-content: space-around;
		border-bottom-right-radius: 5px;
		align-items: center;
	}

	.edition-btn {
		border-radius: 20px;
		width: 40px;
		margin: 5px;
		height: 40px;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25px;
		transition: 0.3s;
	}

	.modal-content2 {
		padding: 15px;
		position: relative;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 0.3rem;
		outline: 0;
	}

	
	.input-no-arrows::-webkit-inner-spin-button,
	.input-no-arrows::-webkit-outer-spin-button {
		-webkit-appearance: none;
	}

	/*#endregion*/
	/*#region estoque*/
	/*#region geral*/

	.add-item {
		color: #B8C6CC;
		padding: 10px;
		cursor: pointer;
		text-align: center;
		margin-bottom: 1px;
	}

		.add-item:hover {
			border-radius: 10px;
			color: var(--yellow-light) !important;
			font-weight: bold;
		}

	.-stock {
		margin-bottom: 2rem;
		padding-left: 0.5rem;
	}


	.select-item-content {
		display: flex;
		flex-direction: column;
		margin-left: 0;
		margin-top: 1rem;
		width: 100%;
		border-radius: 5px;
		border: 1px solid;
		background-color: #121212;
	}

	

	.select-item-body {
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		align-items: center;
		overflow: auto;
		overflow-x: hidden;
	}

	

	.tt-menu {
		color: #B8C6CC !important;
		background-color: #2c2c2c !important;
	}

	.tt-suggestion {
		font-size: 15px;
		color: #B8C6CC !important;
		background-color: #2c2c2c !important;
	}

	.geral-card .mx {
		max-width: 250px;
	}

	.info-stock {
		background-color: #1e1e1e;
		border: 1px solid #252525;
		margin: 3px 0 0 0;
		padding: 5px;
		border-radius: 10px;
	}

		.info-stock:hover {
			border-color: var(--yellow-light) !important;
			cursor: pointer;
		}

	/*#pagination {
		background-color: #272727;
		border-radius: 50px;
	}*/

	.pagination-item {
		color: #FFA17F;
	}

		.pagination-item:hover {
			color: #272727;
			background-color: #ffbfa8;
			box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
			border-radius: 50px;
		}

	.pagination-item-active {
		color: #272727;
		background-color: #ffbfa8;
		box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
		border-radius: 50px;
	}

	/*#endregion*/
	
	/*#region modal-estoque*/
	.modal-header-stock {
		padding: 15px;
	}

		.modal-header-stock .close {
			margin-top: -25px;
		}

	.modal-footer-stock {
		display: flex;
		justify-content: space-between;
		padding: 1rem;
	}

	@media (min-width: 768px) {
		.modal-dialog-stock {
			width: 800px;
			margin: 30px auto;
		}

		.modal-content-stock {
			-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
			border-radius: 1rem;
		}
	}
	/*#endregion*/
	/*#region estoque-side-bar*/
	.stock-side-bar-menu {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 15px;
		transition: 0.3s;
		max-width: 260px;
		min-width: 260px;
		overflow: auto;
		z-index: 1;
	}

		.stock-side-bar-menu .stock-list-group {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			background-color: #1e1e1e;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			width: 100%;
		}

			.stock-side-bar-menu .stock-list-group .stock-item {
				color: #B8C6CC;
				padding: 10px;
				cursor: pointer;
				text-align: center;
				flex-grow: 1;
				justify-content: space-between;
			}

				.stock-side-bar-menu .stock-list-group .stock-item:hover {
					background-color: #FFA17F;
					border-radius: 10px;
					color: var(--yellow-light) !important;
					font-weight: bold;
				}

	.icon {
		font-size: 28px;
	}

	.stock-side-bar-menu .dropdown-menu {
		background-color: #272727;
		border-radius: 10px;
		width: 230px;
	}

	/*#endregion*/
	/*#region part*/
	.select-part-main-content {
		display: flex;
		flex-direction: column;
		margin-left: 0;
		top: 51px;
		width: 100%;
		background-color: #121212;
		height: calc(100% - 51px);
		z-index: 0;
	}

	.search-input {
		background-color: #2e2e2e;
		color: #B8C6CC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		border: none;
		padding: 5px;
	}

	.ajust-search {
		width: 167px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
	}

	.select-part-header {
		display: flex;
		padding: 10px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #232323;
		border-radius: 10px;
	}

	.body-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		margin: 5px;
		min-width: 99%;
		max-width: 99%;
	}

	.select-part-body::-webkit-scrollbar {
		width: 5px;
		background-color: #121212;
	}

	.select-part-body::-webkit-scrollbar-thumb {
		background: #FFA17F;
		border: 0px none #ffffff;
		border-radius: 99px;
	}

	.select-part-body {
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		align-items: center;
		overflow: auto;
		overflow-x: hidden;
	}

	.part-card {
		box-shadow: 0 1px 5px rgb(0, 0, 0);
		display: flex;
		flex-direction: row;
		min-width: 99%;
		max-width: 99%;
		background-color: #272727;
		border-radius: 10px;
	}

	.header-label {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		flex-basis: 0;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;
		color: var(--yellow-light) !important;
	}

	.text-card {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		flex-basis: 0;
		justify-content: center;
		align-items: center;
		color: var(--yellow-light) !important;
	}

	.select-part-details {
		background-color: #2e2e2e;
		display: flex;
		flex-direction: column;
		margin-left: 0;
		top: 51px;
		width: 100%;
		height: calc(100% - 51px);
		z-index: 0;
		border-radius: 10px;
	}

	.body-header-details {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 99%;
		max-width: 99%;
	}

	.select-part-body-details {
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		align-items: center;
		overflow: auto;
		overflow-x: hidden;
	}

	@media screen and (max-width: 768px) {
		.part-card {
			max-width: 100%; /* O card ocupará toda a largura do contêiner pai em telas menores */
		}
	}
	/*#endregion*/

	/*#region stock-ui módulo (layout + responsivo)*/
	/* Telas do módulo Stock (migrado de stock-ui.css). Ativado via
	   body[data-module-active="stock"]. */
	body[data-module-active="stock"] #dashboard-content {
		background: transparent;
	}

	/* Menu lateral: ícones de navegação */
	.stock-side-icon {
		align-items: center;
		border: 1px solid rgba(255, 255, 255, 0.04);
		border-radius: 10px;
		color: var(--gray05);
		cursor: pointer;
		display: inline-flex;
		height: 42px;
		justify-content: center;
		transition: background var(--stock-transition), border-color var(--stock-transition), color var(--stock-transition);
		width: 42px;
	}

	.stock-side-icon:hover {
		background: rgba(255, 255, 179, 0.06);
		border-color: rgba(255, 255, 179, 0.3);
		color: var(--yellow-light);
	}

	.stock-side-icon.active,
	.stock-side-icon[aria-current="true"] {
		background: rgba(255, 255, 179, 0.1);
		border-color: var(--yellow-light);
		color: var(--yellow-light);
	}

	/* Área de rolagem das listas */
	.stock-scroll-area {
		max-height: calc(100vh - 210px);
		overflow-y: auto;
		padding-right: 0.15rem;
	}

	/* Refinamentos sutis nos modais quando o body é do módulo Stock */
	body[data-module-active="stock"] .modal-content {
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: var(--stock-radius);
	}

	body[data-module-active="stock"] .modal-header {
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	body[data-module-active="stock"] .modal-footer.footer-modal {
		border-top: 1px solid rgba(255, 255, 255, 0.05);
	}

	body[data-module-active="stock"] .form-floating > label {
		color: var(--stock-muted);
	}

	body[data-module-active="stock"] .form-control,
	body[data-module-active="stock"] .form-select {
		background-color: rgba(18, 18, 18, 0.6);
		border-color: rgba(255, 255, 255, 0.08);
		color: #fff;
	}

	body[data-module-active="stock"] .form-control:focus,
	body[data-module-active="stock"] .form-select:focus {
		background-color: rgba(18, 18, 18, 0.85);
		border-color: var(--yellow-light);
		box-shadow: 0 0 0 0.18rem rgba(255, 255, 179, 0.18);
		color: #fff;
	}

	/* Tablet retrato e abaixo: sidebar vira barra superior, conteúdo full-width.
	   O layout original trava a rolagem no body; aqui liberamos a rolagem natural. */
	@media (max-width: 991.98px) {
		body[data-module-active="stock"] {
			height: auto;
			overflow-y: auto;
		}

		body[data-module-active="stock"] #content {
			min-height: 0;
		}

		body[data-module-active="stock"] .main-content-side-menu {
			flex-direction: column;
			min-height: 0;
			margin-top: 0;
		}

		body[data-module-active="stock"] #dropdowns-content,
		body[data-module-active="stock"] #dropdowns-content.hidden-side-bar {
			max-width: 100% !important;
			min-width: 0 !important;
			width: 100% !important;
			position: sticky;
			top: 51px;
			z-index: 5;
		}

		body[data-module-active="stock"] #dashboard-content {
			margin-right: 0 !important;
			margin-top: 0.5rem !important;
		}

		body[data-module-active="stock"] #menu-icons {
			flex-wrap: nowrap;
			gap: 0.25rem;
			justify-content: space-between;
			overflow-x: auto;
			padding: 0.4rem 0.5rem;
		}

		body[data-module-active="stock"] .stock-side-icon {
			flex: 0 0 auto;
			height: 40px;
			width: 40px;
		}

		body[data-module-active="stock"] #navigation {
			width: 100%;
		}

		.stock-scroll-area {
			max-height: none;
			overflow-y: visible;
		}

		.stock-item-field--primary {
			grid-column: auto;
		}
	}
	/*#endregion*/

	/*#region stock-ui almoxarifados*/
	/* Grid de almoxarifados (tela Stock) — migrado de stock-ui.css */
	.stock-warehouse-grid {
		display: grid;
		gap: 0.75rem;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		padding: 0 0.25rem;
	}

	.stock-warehouse-tile {
		align-items: center;
		background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(35, 35, 35, 0.98));
		border: 1px solid rgba(255, 255, 255, 0.04);
		border-left: 3px solid transparent;
		border-radius: var(--stock-radius);
		box-shadow: var(--stock-elevation-1);
		cursor: pointer;
		display: flex;
		gap: 0.75rem;
		padding: 0.85rem 1rem;
		transition: border-color var(--stock-transition), box-shadow var(--stock-transition), transform var(--stock-transition);
	}

	.stock-warehouse-tile:hover,
	.stock-warehouse-tile:focus-visible {
		border-left-color: var(--yellow-light);
		box-shadow: var(--stock-elevation-2);
		outline: none;
		transform: translateY(-1px);
	}

	.stock-warehouse-tile__icon {
		align-items: center;
		background: rgba(255, 255, 179, 0.08);
		border-radius: 10px;
		color: var(--yellow-light);
		display: flex;
		font-size: 1.1rem;
		height: 42px;
		justify-content: center;
		width: 42px;
	}

	.stock-warehouse-tile__body {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}

	.stock-warehouse-tile__name {
		color: #fff;
		font-size: 0.95rem;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.stock-warehouse-tile__meta {
		color: var(--stock-muted);
		font-size: 0.74rem;
	}

	.stock-warehouse-tile__count {
		color: var(--yellow-light);
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 1;
	}

	/* Notebooks 13" e tablets em paisagem: grade um pouco mais densa */
	@media (max-width: 1280px) {
		.stock-warehouse-grid {
			grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		}
	}
	/*#endregion*/

	/*#region stock-ui itens*/
	/* Itens por almoxarifado: toolbar e cards (tela Stock) — migrado de stock-ui.css */
	.stock-items-toolbar {
		align-items: center;
		border-radius: var(--stock-radius);
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 0.75rem;
		margin: 0 0.25rem 0.5rem;
		padding: 0.6rem 0.85rem;
	}

	.stock-items-toolbar__title {
		flex: 1 1 220px;
		font-size: clamp(1.1rem, 1.4vw + 0.6rem, 1.6rem);
		font-weight: 700;
		margin: 0;
		min-width: 0;
	}

	.stock-items-toolbar__search {
		flex: 0 1 280px;
		min-width: 180px;
	}

	.stock-items-tabs {
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	.stock-items-tabs .btn {
		min-width: 0;
	}

	.stock-item-card {
		background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(35, 35, 35, 0.98));
		border: 1px solid rgba(255, 255, 255, 0.04);
		border-left: 3px solid transparent;
		border-radius: var(--stock-radius);
		box-shadow: var(--stock-elevation-1);
		margin: 0 0.25rem 0.65rem;
		overflow: hidden;
		transition: border-color var(--stock-transition), box-shadow var(--stock-transition), transform var(--stock-transition);
	}

	.stock-item-card:hover {
		border-left-color: var(--yellow-light);
		box-shadow: var(--stock-elevation-2);
		transform: translateY(-1px);
	}

	.stock-item-card--edited {
		border-left-color: var(--stock-warning);
	}

	.stock-item-card--alert {
		border-left-color: var(--stock-danger);
	}

	.stock-item-card--added {
		border-left-color: var(--stock-info);
	}

	.stock-item-card__header {
		background: rgba(255, 255, 255, 0.025);
		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
		display: grid;
		gap: 0.5rem 1rem;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		padding: 0.6rem 0.9rem;
	}

	.stock-item-card__grid {
		display: grid;
		gap: 0.5rem 1rem;
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		padding: 0.6rem 0.9rem;
	}

	.stock-item-field {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
		text-align: center;
	}

	.stock-item-field--primary {
		grid-column: span 2;
	}

	.stock-item-field__label {
		color: var(--stock-muted);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.stock-item-field__value {
		color: var(--yellow-light);
		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}

	.stock-item-field__value--strong {
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
	}

	/* Celulares: campos em duas colunas, toolbar empilhada */
	@media (max-width: 575.98px) {
		.stock-warehouse-grid {
			grid-template-columns: 1fr;
		}

		.stock-items-toolbar {
			align-items: stretch;
			flex-direction: column;
		}

		/* Em coluna, o `flex-basis: 220px` do título (pensado p/ largura no desktop)
		   vira ALTURA e criava ~220px de espaço vazio no topo da toolbar no celular.
		   Aqui o título volta a ter a altura do conteúdo. */
		.stock-items-toolbar__title {
			flex: 0 0 auto;
		}

		.stock-items-toolbar__search {
			flex: 1 1 auto;
			width: 100%;
		}

		.stock-item-card__header,
		.stock-item-card__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0.5rem 0.75rem;
		}

		.stock-item-field--primary {
			grid-column: 1 / -1;
		}

		.stock-items-tabs .btn {
			flex: 1 1 100%;
		}
	}

	/* Celulares muito estreitos: cada campo em sua própria linha */
	@media (max-width: 360px) {
		.stock-item-card__header,
		.stock-item-card__grid {
			grid-template-columns: 1fr;
		}
	}
	/*#endregion*/

	/*#region stock-ui saldo (part)*/
	/* Barra de saldo da peça (tela Part) — migrado de stock-ui.css */
	.stock-balance-bar {
		background: rgba(255, 255, 255, 0.04);
		border-radius: 999px;
		height: 6px;
		margin-top: 0.25rem;
		overflow: hidden;
		position: relative;
	}

	.stock-balance-bar__fill {
		background: var(--stock-success);
		border-radius: 999px;
		height: 100%;
		transition: width var(--stock-transition);
	}

	.stock-balance-bar__fill--low {
		background: var(--stock-warning);
	}

	.stock-balance-bar__fill--critical {
		background: var(--stock-danger);
	}

	.stock-balance-bar__min {
		background: var(--stock-muted);
		height: 100%;
		left: 0;
		opacity: 0.3;
		position: absolute;
		top: 0;
		width: 1px;
	}

	.stock-balance-summary {
		align-items: baseline;
		display: flex;
		font-size: 0.78rem;
		gap: 0.4rem;
		margin-top: 0.15rem;
	}

	.stock-balance-summary__value {
		color: #fff;
		font-size: 0.95rem;
		font-weight: 600;
	}

	.stock-balance-summary__range {
		color: var(--stock-muted);
	}
	/*#endregion*/
	/*#endregion*/
	/*#region part*/
	.select-part-main-content {
		display: flex;
		flex-direction: column;
		margin-left: 0;
		top: 51px;
		width: 100%;
		background-color: #121212;
		height: calc(100% - 51px);
		z-index: 0;
	}

	.search-input {
		background-color: #2e2e2e;
		color: #B8C6CC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		border: none;
		padding: 5px;
	}

	.select-part-header {
		display: flex;
		padding: 10px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #232323;
		border-radius: 10px;
	}

	.body-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		margin: 5px;
		min-width: 99%;
		max-width: 99%;
	}

	.select-part-body::-webkit-scrollbar {
		width: 5px;
		background-color: #121212;
	}

	.select-part-body::-webkit-scrollbar-thumb {
		background: #FFA17F;
		border: 0px none #ffffff;
		border-radius: 99px;
	}

	.select-part-body {
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		align-items: center;
		overflow: auto;
		overflow-x: hidden;
	}

	.part-card {
		box-shadow: 0 1px 5px rgb(0, 0, 0);
		display: flex;
		flex-direction: row;
		min-width: 99%;
		max-width: 99%;
		background-color: #272727;
		border-radius: 10px;
	}

	.header-label {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		flex-basis: 0;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;
		color: var(--yellow-light) !important;
	}

	.text-card {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		flex-basis: 0;
		justify-content: center;
		align-items: center;
		color: var(--yellow-light) !important;
	}

	.select-part-details {
		background-color: #2e2e2e;
		display: flex;
		flex-direction: column;
		margin-left: 0;
		top: 51px;
		width: 100%;
		height: calc(100% - 51px);
		z-index: 0;
		border-radius: 10px;
	}

	.body-header-details {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 99%;
		max-width: 99%;
	}

	

	.select-part-body-details {
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		align-items: center;
		overflow: auto;
		overflow-x: hidden;
	}

	@media screen and (max-width: 768px) {
		.part-card {
			max-width: 100%; /* O card ocupará toda a largura do contêiner pai em telas menores */
		}
	}
	/*#endregion*/
	/*#region pdf*/
	.text-label-print {
		padding: 1rem;
	}

		.text-label-print label {
			color: #000000;
			font-size: 10px;
		}

		.text-label-print h6 {
			color: #000000;
			font-size: 14px;
		}

	.body-print {
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
	}

	/*#endregion*/
	

	/*#region tela plano de fogo*/
	.dis-flex-direc-row, .dis-flex-direc-column {
		display: flex;
	}

	.just-cont-center {
		justify-content: center;
	}

	.just-cont-end {
		justify-content: end !important;
	}

	.dis-flex-direc-column {
		flex-direction: column;
	}

	.f1 {
		flex: 1;
	}

	.marg-left-12px {
		margin-left: 12px;
	}

	.check-box-edicao-furos-hide {
		display: none !important;
	}

	.check-box-edicao-furos-show {
		display: "" !important;
	}

	.input-plano-fogo {
		color: aqua;
	}

	@media (min-width: 1261px) {
		#pl-fogo-cabecalho-base-calc-large {
			display: flex !important;
		}

		#pl-fogo-cabecalho-base-calc-medium {
			display: none !important;
		}

		#pl-fogo-cabecalho-base-calc-small {
			display: none !important;
		}
	}

	/*#endregion tela plano de fogo*/

	/*#region Switch*/
	.switch-container {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 34px;
	}

	.switch-input {
		display: none;
	}

	.switch-label {
		position: absolute;
		cursor: pointer;
		background-color: #ccc;
		border-radius: 34px;
		width: 100%;
		height: 100%;
		transition: background-color 0.3s;
	}

		.switch-label::before {
			content: "";
			position: absolute;
			left: 4px;
			top: 4px;
			width: 26px;
			height: 26px;
			background-color: white;
			border-radius: 50%;
			transition: transform 0.3s;
		}

	.switch-input:checked + .switch-label {
		background-color: #4caf50;
	}

		.switch-input:checked + .switch-label::before {
			transform: translateX(26px);
		}
	/*#endregion*/
	.indice-content {
		position: relative;
		display: flex;
		height: 100%;
	}

	.indice-cards {
		display: flex;
		overflow-y: scroll;
		position: relative;
		height: 100%;
		overflow-x: hidden;
		width: 100%;
		flex-direction: column
	}

	.sidebar-tooltip {
		display: none;
		height: 100%;
		width: 40%;
		z-index: 1;
		background-color: #111;
		overflow-x: hidden;
		transition: 0.5s;
		position: absolute;
		right: 0px;
		top: 0px;
	}

	.closebtn {
		color: #fcfeff;
		font-size: xx-large;
		padding: 5px;
	}

	.project-card:hover {
		background-color: #121212;
	}

	.new-report-card:hover {
		background-color: #121212;
	}


	.loading-icon {
		border: 5px solid var(--yellow-light) !important;
		border-top: 5px solid #CFC786;
		border-radius: 50%;
		width: 35px;
		height: 35px;
		
		animation: spin 1s linear infinite;
	}

	.overlay {
		position: fixed; /* or absolute, depending on your layout needs */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
		z-index: 1; /* Ensure it's above all other content */
	}

	


	.indicators-content::-webkit-scrollbar {
		width: 5px;
		background-color: #121212;
	}

	.indicators-content::-webkit-scrollbar-thumb {
		background: #FFA17F;
		border: 0px none #ffffff;
		border-radius: 99px;
	}

	.std-card {
		contain-intrinsic-size: 65.69px;
		box-shadow: 0 1px 5px rgb(0, 0, 0);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		margin: 5px;
		min-width: 99%;
		max-width: 99%;
		background-color: #272727;
		border-radius: 10px;
	}
	.split-container {
		display: flex;
		gap: 10px;
		margin: 0px 5px;
	}

	.report-body {
		flex: 1;
		margin-top: 10px;
	}
	
	.legend-wrapper {
		display: flex; /* Exibe os itens horizontalmente */
		flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas, se necessário */
		justify-content: flex-start; /* Alinha os itens à esquerda */
	}

	.legend-item {
		display: flex;
		align-items: center; /* Alinha a bolinha e o nome ao centro verticalmente */
		margin-right: 15px; /* Espaçamento entre os itens */
		margin-bottom: 5px; /* Espaçamento entre as linhas, se houver */
	}

		.legend-item i {
			width: 15px; /* Largura da bolinha */
			height: 15px; /* Altura da bolinha */
			border-radius: 50%; /* Torna a bolinha redonda */
			margin-right: 5px; /* Espaçamento entre a bolinha e o nome */
		}

	
	.alert-speed {
		background-color: #121212 !important;
	}

	.icon-ciclos {
		margin-left: -90px;
		margin-right: -150px;
	}

.divisoria-vertical {
	margin-left: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* Card do equipamento em operação: painel glass com faixa de status à
   esquerda (cor herdada do status-pill interno via :has) e elevação no hover. */
.equipamento-group {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	margin: 3px 5px 5px 0;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
	box-shadow: var(--home-elevation-1);
	overflow: hidden;
	transition: transform var(--home-transition), box-shadow var(--home-transition), border-color var(--home-transition);
}

	.equipamento-group::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
		background: var(--home-muted);
		transition: background var(--home-transition), box-shadow var(--home-transition);
		z-index: 1;
	}

	.equipamento-group:hover {
		transform: translateY(-3px);
		border-color: rgba(255, 161, 127, 0.35);
		box-shadow: var(--home-elevation-2), 0 0 22px rgba(255, 161, 127, 0.12);
	}

	.equipamento-group:has(.status-pill--success)::before { background: var(--home-success); }
	.equipamento-group:has(.status-pill--warning)::before { background: var(--home-warning); }
	.equipamento-group:has(.status-pill--info)::before { background: var(--home-info); }

	.equipamento-group:has(.status-pill--danger)::before {
		background: var(--home-danger);
		box-shadow: 0 0 14px rgba(255, 138, 122, 0.55);
	}



.dash-header {
	background-color: white;
	border-bottom: 7px solid #FFCD03;
	height: 20%;
	width: 100%;
	display: flex;
	flex-direction:column;
	justify-content: space-between;
	padding: 10px;
}

.dash-header{
	display: flex;
	flex-direction:column;
}

.dash-header .form-control {
	color: #024B37;
	background-color: white;
	border: 0px solid #024B37 !important;
}

.dash-header .input-group-addon {
	color: #024B37;
	background-color: white;
	border-color: white !important;
	outline: none !important;
	box-shadow: none;
	border-top-right-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
}

.dash-header .input-group-addon:hover {
	color: #024B37;
	outline: none !important;
	border-color: #024B37 !important;
	box-shadow: 0 0 3px #024B37 !important;
}

.dash-header .datepicker {
	background-color: white;
	color: #024B37;
}

.dash-header .datepicker td.day,
.dash-header .datepicker-years td span,
.dash-header .datepicker-decades td span,
.dash-header .datepicker-months td span,
.dash-header .timepicker-hour,
.dash-header .timepicker-minute,
.dash-header .timepicker-second,
.dash-header .timepicker,
.dash-header .bootstrap-datetimepicker-widget table td span {
	background-color: white;
	color: #024B37;
}

.dash-header-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom:10px;
}

.dash-header-content h5{
	margin:0 !important;
}

.dash-header-title h1 {
	font-size: 8rem;
	color: #024B37;
	margin: 0;
}
.dash-header-title h3 {
	font-size: 3rem;
	color: #024B37;
	margin: 0;
}

/* ===== Fluxo Left Bar ===== */
#fluxo-left-bar {
	direction: rtl;
	height: 100%;
}

#fluxo-left-bar .fluxo-left-bar-header {
	direction: ltr;
	text-align: center;
	padding: 6px 4px;
	border-bottom: 1px solid #2e2e2e;
	margin-bottom: 4px;
}

#fluxo-left-bar .fluxo-left-bar-body {
	direction: rtl;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100vh - 120px);
	padding-bottom: 8px;
}

#fluxo-left-bar .fluxo-left-bar-body::-webkit-scrollbar {
	width: 4px;
	background-color: #121212;
}

#fluxo-left-bar .fluxo-left-bar-body::-webkit-scrollbar-thumb {
	background: #ffa17f;
	border-radius: 99px;
}

#fluxo-left-bar .status-alocacao-card {
	direction: ltr;
	margin: 4px 3px;
	padding: 8px 10px 6px;
	border: 1px solid #3a3a3a;
	border-radius: 10px;
	background-color: #252525;
}

#fluxo-left-bar .status-alocacao-card .icon-row {
	margin: 0 0 -22px 0;
	/* A margem negativa faz o bloco "Equipamento" subir POR CIMA desta linha. Sem position,
	   o z-index era ignorado e o texto roubava o clique do ícone (só uma fresta clicava).
	   pointer-events: none na faixa transparente deixa o texto embaixo livre; só o <a> captura. */
	position: relative;
	z-index: 1;
	pointer-events: none;
}

#fluxo-left-bar .status-alocacao-card .icon-row a {
	color: rgba(255, 161, 127, 0.3);
	font-size: 20px;
	pointer-events: auto;
	/* alvo de clique maior que o glifo; margens negativas compensam o padding
	   para o ícone não sair do lugar */
	padding: 6px 8px;
	margin: -6px -8px -6px 6px;
	display: inline-flex;
	align-items: center;
}

#fluxo-left-bar .status-alocacao-card .icon-row a:hover {
	color: #ffa17f;
	cursor: pointer;
}

#fluxo-left-bar .status-alocacao-card label {
	color: #6e8a97 !important;
	font-size: 12px !important;
	font-weight: bold !important;
	display: block;
	margin: 0 !important;
	line-height: 1.2;
}

#fluxo-left-bar .status-alocacao-card h6 {
	font-size: 14px !important;
	margin: 0 0 5px 0 !important;
	line-height: 1.3;
}

@media (max-width: 1260px) {
	#fluxo-left-bar {
		height: 140px;
	}

	#fluxo-left-bar .fluxo-left-bar-header {
		display: none;
	}

	#fluxo-left-bar .fluxo-left-bar-body {
		display: flex;
		flex-direction: row;
		overflow-y: hidden;
		overflow-x: auto;
		max-height: 100%;
		height: 100%;
		padding-bottom: 0;
	}

	#fluxo-left-bar .status-alocacao-card {
		min-width: 150px;
		max-width: 150px;
		margin: 2px 3px;
	}
}

.dash-content{
	width:100%;
	height:100%;
	background-color:white;
}

#availabilityChart, #statusChart, #PDTChart {
	width: 100%;
}
/* ===== FIM do conteúdo migrado do newSite.css ===== */


/*#region base (migrado do newSite.css) */
body {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding-top: 51px;
    height: 100%;
    overflow: hidden;
}
/*#endregion*/

/*#region config*/
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
       supported by Chrome, Edge, Opera and Firefox */
}

h1,
h2,
h3,
h4,
h5,
h6,
h8,
label {
    color: var(--gray05) !important;
}

.btn:focus, .btn:active,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-floating:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.15rem var(--yellow-light);
}

.input-group-text:hover {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.15rem var(--yellow-light);
}

.btn.active {
    background-color: var(--nm05) !important;
    color: black !important
}

.modal-content {
    top: 4vh;
    background-color: var(--gray100-85) !important;
}

.modal-footer {
    border-top: 1px solid #dee2e640 !important;
}

.modal-header {
    border-bottom: 1px solid #dee2e640 !important;
}

.modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* No celular as barras da home sobem para z-index 1100 (bottom) e 1200
   (laterais + alças de expandir). O modal do Bootstrap usa 1055/1050 por
   padrão e acabava ficando ATRÁS dessas barras. Subimos modal e backdrop
   para 1300/1290 para garantir que o modal cubra tudo. */
.modal {
    z-index: 1300;
}

.modal-backdrop {
    z-index: 1290;
}

input, select, .input-group-text {
    background-color: var(--gray70) !important;
    color: var(--yellow-light) !important;
    border: 1px solid #444 !important;
}

.fa-sort, .fa-circle-info {
    cursor: pointer;
}

.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget.dark .date-container-months div.active,
.tempus-dominus-widget.dark .date-container-years div.active {
    background-color: var(--yellow-light) !important;
    color: var(--gray70) !important;
}

.fa {
    display: inline-block;
}

img:hover,
.fa-circle-plus:hover,
.fa-history:hover,
.fa-undo:hover,
.fa-file-word:hover,
.fa-gear:hover,
.fa-list-ul:hover,
.bi-person-vcard:hover,
.bi-search:hover,
.fa-eye:hover,
.fa-edit:hover,
.fa-draw-polygon:hover,
.fa-flask:hover,
.fa-trash:hover,
.fa-route:hover,
.fa-route:hover,
.fa-question-circle:hover,
.fa-clock:hover,
.fa-file:hover,
.fa-history:hover,
.fa-list:hover,
.fa-rotate:hover,
.fa-reply-all:hover,
.fa-map-marked-alt:hover,
.fa-user-shield:hover,
.fa-info-circle:hover,
.fa-shield-exclamation:hover,
.fa-exclamation-triangle:hover,
.fa-file-pdf:hover,
.fa-check-circle:hover,
.fa-users:hover,
.fa-minus:hover,
.fa-check:hover,
.fa-xmark:hover,
.fa-plus-circle:hover,
.fa-calculator:hover,
.fa-plus-octagon:hover,
.fa-minus-circle:hover,
.fa-lock:hover,
.fa-file-pdf:hover,
.fa-sync:hover,
.fa-gears:hover,
.fa-unlock-alt:hover,
.fa-sync:hover,
.fa-arrows-rotate:hover,
.fa-file-circle-plus:hover,
.fa-signature:hover {
    opacity: 1 !important;
    cursor: pointer !important;
}

.placeholder {
    background-color: rgb(77 78 80) !important;
}

.border-end {
    border-right: 0.5px solid var(--gray50) !important;
}

.border-start {
    border-left: 0.5px solid var(--gray50) !important;
}

.border-bottom {
    border-bottom: 0.5px solid var(--gray50) !important;
}
.border-top {
    border-top: 0.5px solid var(--gray50) !important;
}
.border {
    border: 0.5px solid var(--gray50) !important;
}

.border-warning {
    border-color: var(--yellow-light) !important;
}

.cursor-grab {
    cursor: grab;
}

    .cursor-grab:hover {
        border: 2px solid var(--yellow-light) !important;
    }

    .cursor-grab:active {
        cursor: grabbing;
    }

.fa-circle-info:hover {
    color: var(--yellow-light) !important;
    opacity: 1 !important;
}

.fluxo-dragged-into {
    border: 1px solid var(--yellow-light) !important;
}

.dropdown-item:hover {
    background-color: #343a40; /* Cor de fundo no hover (ex: cinza escuro) */
    color: var(--yellow-light) !important; /* Cor do texto no hover (ex: amarelo) */
}

.progress {
    --bs-progress-bar-bg: var(--nm09) !important;
    --bs-progress-bg: var(--gray50) !important;
}

.progress-bar {
    color: var(--gray100) !important;
}

hr {
    border-bottom: 1px solid #dee2e640 !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.popover-body{
    background-color:var(--gray100-85) !important;
}
/*#endregion*/

/*#region*/
.popover-header {
    background-color: var(--gray55) !important;
}

.apr-risk-popover {
    --bs-popover-max-width: min(90vw, 900px);
}

.apr-risk-popover .popover-body {
    max-height: min(70vh, 700px);
    overflow: auto;
    padding: 0;
}

.apr-risk-popover-trigger {
    background: transparent;
    border: 0;
    padding: 0;
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .bs-popover-start > .popover-arrow::after {
    right: var(--bs-popover-border-width);
    border-left-color: var(--gray60) !important;
}
/*#endregion*/

/*#region scrollbar*/
.overflow-auto {
    max-height: calc(100vh - 64px);
}

::-webkit-scrollbar {
    width: 4px;
    background-color: #121212;
}

::-webkit-scrollbar-thumb {
    background: var(--nm09) !important;
    border: 0 none #ffffff;
    border-radius: 99px;
    width: 4px;
}

::-webkit-scrollbar:horizontal {
    height: 4px;
}

select::-webkit-scrollbar {
    width: 5px;
    background-color: #121212;
}

select::-webkit-scrollbar-thumb {
    background: var(--yellow-light) !important;
    border: 0px none #ffffff;
    border-radius: 99px;
}

select::-webkit-scrollbar-thumb {
    background: var(--yellow-light) !important;
    border: 0px none #ffffff;
    border-radius: 99px;
}
/*#endregion*/

/*#region btn*/
.btn-custom-hover-01:hover {
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
}

.btn-custom-hover-02:hover {
    border-color: var(--yellow-light) !important;
    color: var(--yellow-light) !important;
}

/* ----- Botões do Stock UI (migrado de stock-ui.css) ----- */
.stock-btn-primary {
    background: var(--yellow-light);
    border: none;
    border-radius: var(--stock-radius-sm);
    color: #1a1a1a;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    transition: filter var(--stock-transition), transform var(--stock-transition);
}

.stock-btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.stock-btn-primary:disabled,
.stock-btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.stock-btn-secondary {
    background: transparent;
    border: 1px solid var(--stock-border-subtle);
    border-radius: var(--stock-radius-sm);
    color: var(--yellow-light);
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    transition: border-color var(--stock-transition), background var(--stock-transition);
}

.stock-btn-secondary:hover {
    background: rgba(255, 255, 179, 0.06);
    border-color: var(--yellow-light);
    color: var(--yellow-light);
}

.stock-btn-danger {
    background: var(--stock-danger-bg);
    border: 1px solid transparent;
    border-radius: var(--stock-radius-sm);
    color: var(--stock-danger);
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    transition: filter var(--stock-transition), transform var(--stock-transition), background var(--stock-transition);
}

.stock-btn-danger:hover {
    background: var(--stock-danger);
    color: #1a1a1a;
    transform: translateY(-1px);
}

/* ----- Ícones de ação (botões quadrados) ----- */
.stock-action {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: var(--yellow-light);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.95rem;
    height: 32px;
    justify-content: center;
    transition: background var(--stock-transition), color var(--stock-transition), transform var(--stock-transition);
    width: 32px;
}

.stock-action:hover {
    background: rgba(255, 255, 179, 0.1);
    color: var(--yellow-light);
    transform: translateY(-1px);
}

.stock-action--success:hover {
    background: var(--stock-success-bg);
    color: var(--stock-success);
}

.stock-action--danger {
    color: var(--stock-danger);
}

.stock-action--danger:hover {
    background: var(--stock-danger-bg);
    color: var(--stock-danger);
}

.stock-action--info:hover {
    background: var(--stock-info-bg);
    color: var(--stock-info);
}
/*#endregion*/

/*#region Login*/
.card-login {
    width: 400px !important;
    background-color: #3D3D3D;
    opacity: 0.85;
    border-radius: 10px;
    border: 2px solid #808080;
}

.login {
    background: url("../images/metalArLanding1.jpg") no-repeat center center fixed;
    background-size: cover;
    background-position: center;
}

.login-section input {
    background-color: #fff !important;
    color: var(--gray70) !important;
}

    .login-section input:focus {
        color: var(--gray70) !important;
    }
/*#endregion*/

/*#region navbar*/
.navbar {
    height: 65px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 1px 0 rgba(255, 161, 127, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
    padding-top: 0;
    padding-bottom: 0;
}

/* Só na Home a navbar precisa subir acima das suas camadas (bottom bar 1100,
   drawers 1200) para que o menu colapsado no celular não fique atrás da barra
   inferior. Escopado à Home para não passar à frente dos modais nas demais
   telas (onde a navbar mantém o z-index padrão do Bootstrap, abaixo do modal). */
body[data-module-active="home"] .navbar {
    z-index: 2000;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

/* Links principais: alvo de toque maior, cantos arredondados e transição suave. */
.navbar .navbar-nav .nav-link {
    color: var(--gray05);
    font-size: 14px;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    transition: background-color 160ms cubic-bezier(.2, .8, .2, 1), color 160ms cubic-bezier(.2, .8, .2, 1);
}

    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus {
        color: var(--nm05) !important;
        background-color: rgba(255, 161, 127, 0.10);
    }

    /* Item ativo / dropdown aberto recebe destaque na cor de marca (--nm05). */
    .navbar .navbar-nav .nav-link.active,
    .navbar .navbar-nav .nav-item.show > .nav-link {
        color: var(--nm05) !important;
        background-color: rgba(255, 161, 127, 0.14);
    }

    /* Item "Assistente IA": destaque na cor de marca (--nm05) para sinalizar a feature de IA. */
    .navbar .navbar-nav .nav-link.ia-nav-link {
        color: var(--nm05) !important;
        background: linear-gradient(135deg, rgba(255, 161, 127, 0.16), rgba(255, 161, 127, 0.05));
        border: 1px solid rgba(255, 161, 127, 0.28);
    }

        .navbar .navbar-nav .nav-link.ia-nav-link:hover,
        .navbar .navbar-nav .nav-link.ia-nav-link:focus,
        .navbar .navbar-nav .nav-link.ia-nav-link.active {
            color: #fff !important;
            background: linear-gradient(135deg, rgba(255, 161, 127, 0.34), rgba(255, 161, 127, 0.14));
            border-color: rgba(255, 161, 127, 0.55);
            box-shadow: 0 0 16px rgba(255, 161, 127, 0.25);
        }

        .navbar .navbar-nav .nav-link.ia-nav-link i {
            filter: drop-shadow(0 0 4px rgba(255, 161, 127, 0.6));
        }

/* Modo expandido (>= 992px, faixa do navbar-expand-lg): itens em UMA linha.
   O recolhimento item-a-item (Priority+) fica a cargo de navbar-priority.js,
   que move os itens excedentes para o botão "Mais". Aqui só garantimos nowrap,
   alinhamento vertical e que a faixa de links ocupe o espaço disponível
   (flex:1 + min-width:0 para o cálculo de overflow do JS funcionar). */
@media (min-width: 992px) {
    /* min-width:0 sobe a cadeia (collapse -> nav) para que ambos possam encolher
       abaixo do tamanho de conteúdo. Sem isto, o collapse fica do tamanho de
       TODOS os itens (estourando o container) e o JS mede uma largura maior que
       a real — recolhendo itens de menos. */
    .navbar .navbar-collapse {
        min-width: 0;
    }

    .navbar .navbar-nav {
        align-items: center;
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar .navbar-nav .nav-link {
        white-space: nowrap;
    }
}

/* Botão hambúrguer (modo colapsado). */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.15);
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.15rem rgba(255, 161, 127, 0.4);
    }

/* No desktop (expandido) a área dos links é parte da barra — fundo transparente
   pra não desenhar um retângulo distinto. O fundo do painel só vale no colapsado. */
.navbar-collapse {
    background-color: transparent;
}

/* Dropdowns no mesmo estilo do select novo (custom-select.css): popover escuro/glass
   arredondado e itens com hover em barra-acento --nm05 + fill suave. */
.navbar .dropdown-menu {
    background: rgba(26, 26, 26, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    padding: 6px;
    margin-top: 0.45rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

    .navbar .dropdown-menu a,
    .navbar .dropdown-menu .dropdown-item {
        color: #d6d6d6;
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
    }

        .navbar .dropdown-menu a:hover,
        .navbar .dropdown-menu .dropdown-item:hover,
        .navbar .dropdown-menu a:focus,
        .navbar .dropdown-menu .dropdown-item:focus,
        .navbar .dropdown-menu .dropdown-item.active {
            color: #fff !important;
            background: linear-gradient(90deg, rgba(255, 161, 127, 0.16), rgba(255, 255, 255, 0.04));
            box-shadow: inset 2px 0 0 var(--nm05);
        }

    .navbar .dropdown-menu li {
        font-size: 14px;
    }

    .navbar .dropdown-menu hr,
    .navbar .dropdown-menu .hr {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin: 0.3rem 0.3rem !important;
    }

/* Teto de altura com rolagem (26/08/2026). O menu de Manutenção passou de 15 itens
   (Solicitação, OS, Quiosque, Cadastros, Preventiva V1 + V2, Preditiva, Indicadores,
   Histórico, Pneus, Componentes, Serviço externo) e, como ele é ancorado logo abaixo
   da navbar, o fim da lista caía FORA da janela em tela baixa: os últimos itens ficavam
   invisíveis e SEM JEITO DE CHEGAR NELES — o dropdown não rolava e a página atrás
   também não. O teto é a altura da janela menos a navbar (65px) e uma folga; menu que
   já cabia não muda em nada (fica abaixo do teto e não ganha barra nenhuma).
   Só no modo expandido: abaixo de 992px o dropdown fica embutido e quem rola é o
   .navbar-collapse (regra mais adiante) — um segundo scroller aninhado ali seria pior. */
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Barra de rolagem no tom do popover escuro — a padrão do sistema desenha um trilho
   claro por cima do vidro. Vale também para a gaveta do "Mais", que já rolava. */
.navbar .dropdown-menu,
.navbar .nav-more > .nav-more-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.45) transparent;
}

.navbar .dropdown-menu::-webkit-scrollbar,
.navbar .nav-more > .nav-more-menu::-webkit-scrollbar {
    width: 6px;
}

.navbar .dropdown-menu::-webkit-scrollbar-track,
.navbar .nav-more > .nav-more-menu::-webkit-scrollbar-track {
    background: transparent;
}

.navbar .dropdown-menu::-webkit-scrollbar-thumb,
.navbar .nav-more > .nav-more-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.45);
    border-radius: 99px;
}

    .navbar .dropdown-menu::-webkit-scrollbar-thumb:hover,
    .navbar .nav-more > .nav-more-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 161, 127, 0.70);
    }

/* Rótulo de geração no menu (Preventiva V1 x V2, 12/08/2026). Enquanto o cliente avalia a V2 as
   duas telas ficam listadas ao mesmo tempo; sem o rótulo ele abre uma achando que é a outra. */
.navbar .dropdown-menu .nav-version-header {
    color: #8f8f8f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem 0.25rem;
    margin: 0;
}

.navbar .dropdown-menu .nav-version-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: 1px;
    color: #b9bdc9;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.navbar .dropdown-menu .nav-version-tag--new {
    color: #ffc7ac;
    background: rgba(255, 161, 127, 0.16);
    border-color: rgba(255, 161, 127, 0.42);
}

/* Faixa "esta tela e a versao X" (_PreventiveVersionBar.cshtml). Global de proposito: as telas de
   preventiva V1 e V2 tem CSS inline proprio e nao compartilham arquivo. */
.prev-version-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0.5rem 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #d9dced;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.prev-version-bar--v2 {
    color: #ffd9c6;
    background: rgba(255, 161, 127, 0.10);
    border-color: rgba(255, 161, 127, 0.34);
}

.prev-version-bar__tag {
    flex: 0 0 auto;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #cdd1de;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.prev-version-bar--v2 .prev-version-bar__tag {
    color: #ffc7ac;
    background: rgba(255, 161, 127, 0.20);
    border-color: rgba(255, 161, 127, 0.48);
}

.prev-version-bar__text { flex: 1 1 320px; min-width: 0; }
.prev-version-bar__text strong { color: #fff; }
.prev-version-bar--v2 .prev-version-bar__text strong { color: #ffe6d8; }

.prev-version-bar__link {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
    text-decoration: none;
    color: var(--nm05, #ffa17f);
    border-bottom: 1px solid rgba(255, 161, 127, 0.4);
}

.prev-version-bar__link:hover { color: #ffc7ac; border-bottom-color: #ffc7ac; }

/* Modo colapsado (celular / tablet em pé, < 992px): menu rolável e dropdowns
   embutidos. Acima de 992px o navbar fica expandido e o recolhimento é feito
   item-a-item pelo Priority+ (navbar-priority.js), não mais pelo hambúrguer. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgba(22, 22, 22, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        max-height: calc(100vh - 65px);
        overflow-y: auto;
        padding: 0.5rem 0.75rem 0.75rem;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.75);
    }

    .navbar .navbar-nav .nav-link {
        padding: 0.6rem 0.75rem;
    }

    /* Dropdown aberto fica embutido (recuado), sem flutuar sobre a lista. */
    .navbar .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.03);
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin: 0 0 0.25rem 0.6rem;
        padding: 0.15rem 0.25rem;
    }
}

/* =========================================================================
   PRIORITY+ : botão "Mais" e sua gaveta (controlado por navbar-priority.js).
   Vale só no modo expandido (>= 992px); abaixo disso o "Mais" some e o
   Bootstrap colapsa tudo no hambúrguer (regras @media max-width:991.98px acima).
   ========================================================================= */
.navbar .nav-more {
    position: relative;
}

    .navbar .nav-more > .nav-more-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        white-space: nowrap;
    }

    .navbar .nav-more .nav-more-count {
        font-size: 11px;
        font-weight: 700;
        color: var(--nm05);
        background: rgba(255, 161, 127, 0.14);
        border: 1px solid rgba(255, 161, 127, 0.30);
        border-radius: 999px;
        padding: 0 7px;
        line-height: 1.5;
    }
    .navbar .nav-more .nav-more-count:empty {
        display: none;
    }

    .navbar .nav-more .nav-more-caret {
        font-size: 10px;
        opacity: .75;
        transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
    }

    .navbar .nav-more.show > .nav-more-toggle {
        color: var(--nm05) !important;
        background-color: rgba(255, 161, 127, 0.14);
    }

        .navbar .nav-more.show > .nav-more-toggle .nav-more-caret {
            transform: rotate(180deg);
        }

/* A gaveta (flyout) do "Mais" — herda o visual de .navbar .dropdown-menu, mas
   é posicionada por CSS (não pelo Popper) e ancorada à direita do botão. */
.navbar .nav-more > .nav-more-menu {
    display: none;
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 0.45rem);
    min-width: 232px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    margin-top: 0;
}

.navbar .nav-more.show > .nav-more-menu {
    display: block;
}

/* Itens recolhidos: viram linha vertical full-width dentro do "Mais". */
.navbar .nav-more-menu > .nav-item {
    width: 100%;
}

    .navbar .nav-more-menu > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 8px;
        padding: 0.5rem 0.7rem;
        color: #d6d6d6;
    }

        .navbar .nav-more-menu > .nav-item > .nav-link:hover,
        .navbar .nav-more-menu > .nav-item.show > .nav-link {
            color: #fff !important;
            background: linear-gradient(90deg, rgba(255, 161, 127, 0.16), rgba(255, 255, 255, 0.04));
            box-shadow: inset 2px 0 0 var(--nm05);
        }

    /* Caret do dropdown recolhido empurrado para a direita da linha. */
    .navbar .nav-more-menu > .nav-item.dropdown > .nav-link::after,
    .navbar .nav-more-menu > .nav-item.dropdown > .dropdown-toggle::after {
        margin-left: auto;
    }

/* Submenu de um dropdown recolhido: acordeão embutido (estático). O !important
   neutraliza eventuais estilos inline deixados pelo Popper quando esse dropdown
   foi aberto enquanto estava na barra. */
.navbar .nav-more-menu > .nav-item.dropdown > .dropdown-menu {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    display: none;
    float: none;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0 0 0.25rem 0.6rem;
    padding: 0.15rem 0.25rem;
    min-width: 0;
    /* Acordeão embutido: quem rola é a gaveta do "Mais" (max-height acima). Sem
       desfazer o teto do dropdown flutuante daria scroller dentro de scroller. */
    max-height: none;
    overflow: visible;
}

.navbar .nav-more-menu > .nav-item.dropdown.show > .dropdown-menu {
    display: block;
}
/*#endregion*/

/*#region Tela Home*/
.mobile-text {
    font-size: 12px;
}

#map-home {
    position: absolute;
    display: flex;
    margin-left: 0;
    top: 51px;
    width: 100vw;
    height: calc(100% - 51px);
    z-index: 0;
}
/*#endregion*/

/*#region Tela Home - Fora */
#left-menu-bar {
    position: absolute;
    display: flex;
    width: 12vw;
    min-width: 12vw;
    max-width: 12vw;
    left: 0px;
    height: calc(100% - 51px);
    z-index: 3;
    background: var(--home-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--home-elevation-2);
    border-right: var(--home-border);
    border-top-right-radius: var(--home-radius);
    transition: 0.3s;
    margin-top: .5rem;
}

#EquipStatusFora {
    width: 100%;
    overflow: auto;
    height: 99%;
    direction: rtl;
    display: flex;
    flex-direction: column;
    color: #B8C6CC;
    align-items: center;
}

    #EquipStatusFora h8 h12 {
        color: var(--yellow-light) !important;
    }

    #EquipStatusFora::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }

    #EquipStatusFora::-webkit-scrollbar-thumb {
        background: rgba(255, 161, 127, 0.6);
        border: 0px none #ffffff;
        border-radius: 99px;
    }

        #EquipStatusFora::-webkit-scrollbar-thumb:hover {
            background: var(--nm05);
        }

.status-fora-equip {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    max-height: none;
    height: auto;
    padding: 0;
    min-width: 0;
}

    .status-fora-equip img {
        height: 3vh;
    }

    /* Nome em destaque (branco), centralizado no card estreito */
    .status-fora-equip .status-fora-header {
        font-size: clamp(0.78rem, 1.5vmin, 1.05rem);
        font-weight: 700;
        color: #fff !important;
        width: 100%;
        text-align: center;
        line-height: 1.2;
        letter-spacing: 0.01em;
        overflow-wrap: anywhere;
    }

    .status-fora-equip .status-fora-footer {
        font-size: clamp(0.68rem, 1.35vmin, 1.05rem);
        display: flex;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
    }

        .status-fora-equip .status-fora-footer .status-manu-text {
            text-align: center;
            min-width: 0;
            max-width: 100%;
        }

    /* Imagem do equipamento (ícone transparente) — sem moldura/fundo */
    .status-fora-equip .status-fora-body {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        margin: 4px 0;
    }

/* Card lateral (Fora / Manutenção / Outros Motivos): mesmo painel glass dos
   cards de operação, com faixa de status à esquerda (cor via :has no pill). */
.status-fora-equip-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    gap: 6px;
    width: 92%;
    margin: 4px 0;
    padding: 10px 12px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
    box-shadow: var(--home-elevation-1);
    overflow: hidden;
    transition: transform var(--home-transition), box-shadow var(--home-transition), border-color var(--home-transition);
}

    .status-fora-equip-container::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--home-muted);
        z-index: 1;
    }

    .status-fora-equip-container:has(.status-pill--danger)::before {
        background: var(--home-danger);
        box-shadow: 0 0 12px rgba(255, 138, 122, 0.50);
    }

    .status-fora-equip-container:has(.status-pill--warning)::before { background: var(--home-warning); }
    .status-fora-equip-container:has(.status-pill--info)::before { background: var(--home-info); }

    .status-fora-equip-container:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 161, 127, 0.30);
        box-shadow: var(--home-elevation-2), 0 0 18px rgba(255, 161, 127, 0.10);
    }

.status-fora-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin-top: 2px;
}

    .status-fora-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0.1vmin;
        border-radius: 8px;
        font-size: 0.9rem;
        color: var(--nm05);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        transition: background var(--home-transition), color var(--home-transition), border-color var(--home-transition), transform var(--home-transition);
    }

        .status-fora-actions a:hover {
            background: rgba(255, 161, 127, 0.16);
            border-color: rgba(255, 161, 127, 0.40);
            color: var(--nm05) !important;
            transform: translateY(-1px);
        }

#toggle-left-menu-button {
    display: flex;
    position: absolute;
    background: var(--home-glass-strong) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--home-border);
    box-shadow: var(--home-elevation-1);
    padding: 20px 7px 20px 7px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    color: var(--yellow-light);
    left: 12vw;
    top: 0;
    margin-top: 30vh;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    flex-direction: column-reverse;
    font-size: clamp(0.9rem, 1.5vmin, 2rem);
}

#toggle-left-menu-button:hover,
#toggle-right-menu-button:hover {
    background: linear-gradient(180deg, rgba(40, 40, 40, 0.96), rgba(28, 28, 28, 0.96)) !important;
    color: var(--yellow-light);
}

@media only screen and (max-width: 1280px) {
    #EquipStatusFora::-webkit-scrollbar {
        width: 2px !important;
    }

    .status-fora-equip-container {
        flex-direction: column !important;
        margin-bottom: 15px;
    }

    .status-fora-actions {
        flex-direction: row !important;
    }

        .status-fora-actions a {
            font-size: 18px !important;
        }

    .status-fora-equip {
        min-height: 8vh !important;
        max-height: 8vh !important;
    }

        .status-fora-equip .status-fora-header {
            font-size: 12px !important;
        }

        .status-fora-equip .status-fora-footer {
            font-size: 10px !important;
        }

            .status-fora-equip .status-fora-footer .status-manu-text {
                text-align: center;
            }

        .status-fora-equip .status-fora-body {
            display: none !important;
        }
}

/*#endregion*/

/*#region Tela Home - Operação */
#bottom-menu-bar {
    position: absolute;
    display: flex;
    width: 76vw;
    bottom: 0;
    left: 12vw;
    /* Altura DIRIGIDA PELO CONTEÚDO: a barra é ancorada em bottom:0, então
       crescer a altura empurra a borda de cima para CIMA. Assim, em telas
       baixas, nenhum dado do card (operador, origem, destino, velocidade...)
       fica cortado no rodapé — em vez de esconder, a barra fica mais alta.
       min-height = piso estável (evita "pular" entre abas com pouco conteúdo);
       max-height = teto de segurança: passando dele, a lista interna
       (#equipments-on-operation) rola na vertical em vez de cobrir o mapa. */
    height: auto;
    min-height: 240px;
    max-height: 70vh;
    z-index: 1;
    background: var(--home-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--home-elevation-2);
    border-top: var(--home-border);
    border-top-left-radius: var(--home-radius);
    border-top-right-radius: var(--home-radius);
    transition: 0.3s;
}

.bottom-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Barra de equipamentos em operação: alça para ocultar/mostrar (igual aos
   menus lateral esquerdo/direito). A barra passa a empilhar em coluna:
   alça no topo + conteúdo abaixo. */
#bottom-menu-bar {
    flex-direction: column;
}

#bottom-menu-bar .bottom-content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

#toggle-bottom-menu-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 40px;
    cursor: pointer;
    color: var(--yellow-light);
    background: var(--home-glass-strong);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: var(--home-radius);
    border-top-right-radius: var(--home-radius);
    transition: background var(--home-transition), color var(--home-transition);
}

#toggle-bottom-menu-button:hover {
    background: linear-gradient(180deg, rgba(40, 40, 40, 0.96), rgba(28, 28, 28, 0.96));
    color: var(--yellow-light);
}

#toggle-bottom-menu-button #icon-bottom {
    font-size: 1.2rem;
    line-height: 1;
}

/* No celular a alça fica ainda mais alta (alvo de toque confortável) */
@media only screen and (max-width: 991.98px) {
    #toggle-bottom-menu-button {
        height: 46px;
    }

    #toggle-bottom-menu-button #icon-bottom {
        font-size: 1.35rem;
    }
}

#navbar-equipment-types {
    height: 4cm;
    max-height: 4vh;
    min-height: 4vh;
    color: var(--gray05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: 0.3s;
}

.navbar-equipment-item {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    align-self: center;
    font-size: 1.6vmin;
    cursor: pointer;
    color: var(--gray05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    height: 70%;
    padding-bottom: 6px;
    transition: background var(--home-transition), color var(--home-transition);
}

    .navbar-equipment-item::after {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: var(--yellow-light);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform var(--home-transition);
    }

    .navbar-equipment-item:hover, .navbar-equipment-item.active {
        background: rgba(255, 161, 127, 0.08) !important;
        color: var(--yellow-light) !important;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

        .navbar-equipment-item:hover::after, .navbar-equipment-item.active::after {
            transform: scaleX(1);
        }

        .navbar-equipment-item:hover h12, .navbar-equipment-item.active h12 {
            color: var(--yellow-light) !important;
        }

#equipments-on-operation {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    /* auto (não hidden): se a barra atingir o teto (max-height) a lista rola na
       vertical, garantindo que nenhum dado fique escondido fora da tela. */
    overflow-y: auto;
    justify-content: start;
}

    #equipments-on-operation::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }

    #equipments-on-operation::-webkit-scrollbar-thumb {
        background: rgba(255, 161, 127, 0.6);
        border: 0px none #ffffff;
        border-radius: 99px;
        cursor: pointer;
    }

        #equipments-on-operation::-webkit-scrollbar-thumb:hover {
            background: var(--nm05);
        }

.status-operacao-equip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

    .status-operacao-equip img {
        height: 3vh;
    }

    /* Cabeçalho: nome em destaque (branco) + ícone de sinal à direita */
    .status-operacao-equip .status-operacao-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

        .status-operacao-equip .status-operacao-header .text {
            flex: 1 1 auto;
            text-align: left;
            color: #fff !important;
            font-size: clamp(0.9rem, 1.5vmin, 1.1rem);
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.15;
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .status-operacao-equip .status-operacao-header .speed {
            display: flex;
            justify-content: center;
            color: #B8C6CC;
        }

    /* Imagem do equipamento (ícone transparente) — sem moldura/fundo */
    .status-operacao-equip .status-operacao-body {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

        .status-operacao-equip .status-operacao-body .signal-icon {
            height: 1.8vh;
            margin-left: -2px;
            margin-top: 3px;
            z-index: 10;
        }

    /* Campos: linha "ícone + valor" alinhada à esquerda (melhor leitura) */
    .status-operacao-equip .status-operacao-footer {
        font-size: clamp(0.68rem, 1.3vmin, 0.9rem);
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: #c4ccd1;
        min-width: 0;
        max-width: 100%;
    }

        .status-operacao-equip .status-operacao-footer .status-text {
            display: flex;
            align-items: center;
            gap: 6px;
            text-align: left;
            min-width: 0;
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .status-operacao-equip .status-operacao-footer .status-text > i {
            flex: 0 0 auto;
            width: 13px;
            text-align: center;
            color: var(--home-muted);
            font-size: 0.82em;
        }

        /* Linha do status-pill: sem o recuo pesado do .p-2 do Bootstrap */
        .status-operacao-equip .status-operacao-footer .status-text.p-2 {
            padding: 0 !important;
            margin-bottom: 1px;
        }

.status-operacao-equip-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    /* Sem height:100% — o card tem a altura do PRÓPRIO conteúdo. Com a barra em
       height:auto, é isso que a faz crescer pra caber tudo. Cards da mesma linha
       igualam a altura via align-items:stretch do #equipments-on-operation. */
    height: auto;

    width: 15vw;
    min-width: 190px;
    max-width: 270px;

    align-self: stretch;
    padding: 10px 10px 10px 14px;
    transition: background var(--home-transition);
}

/* Notebook pequeno */
@media (max-width: 1366px) {
    .status-operacao-equip-container {
        width: 18vw;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .status-operacao-equip-container {
        width: 30vw;
    }
}

/* Celular */
@media (max-width: 768px) {
    .status-operacao-equip-container {
        width: 100%;
        max-width: unset;
    }
	#navbar-equipment-types {
		margin-bottom: 40px !important;
	}
	.navbar-equipment-item{
		margin-bottom: 4px;
	}
}

    /* Elevação/realce do card agora é do .equipamento-group; aqui só um
       leve clareamento do conteúdo quando o card está sob o cursor. */
    .equipamento-group:hover .status-operacao-equip-container {
        background: rgba(255, 255, 255, 0.022);
    }

/* Ações: coluna de botões glass (padrão stock-action do Guia Visual),
   separada do conteúdo por um divisor sutil. */
.status-operacao-actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;
    justify-content: center;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

    .status-operacao-actions .first-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .status-operacao-actions .second-block {
        display: flex;
        justify-content: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .status-operacao-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 0.95rem;
        color: var(--nm05);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        transition: background var(--home-transition), color var(--home-transition), border-color var(--home-transition), transform var(--home-transition);
    }

        .status-operacao-actions a:hover {
            background: rgba(255, 161, 127, 0.16);
            border-color: rgba(255, 161, 127, 0.40);
            color: var(--nm05) !important;
            transform: translateY(-1px);
        }

        /* Ações destrutivas (remover alocação) mantêm o vermelho semântico */
        .status-operacao-actions a.red-color {
            color: var(--home-danger);
        }

            .status-operacao-actions a.red-color:hover {
                background: var(--home-danger-bg);
                border-color: rgba(255, 138, 122, 0.40);
                color: var(--home-danger) !important;
            }

        /* Botão de ciclo (cronômetro) destacado quando a info está expandida */
        .status-operacao-actions a#btn-toggle-info.info-active {
            background: rgba(255, 161, 127, 0.16);
            border-color: rgba(255, 161, 127, 0.40);
            color: var(--nm05) !important;
        }

.info-ciclo-home {
    color: rgba(255, 161, 127, 0.35);
}

#btn-toggle-info:hover {
    color: var(--nm05) !important;
    cursor: pointer;
}
/*#endregion*/

/*#region Tela Home - Manutenção */
#EquipStatusManutencao {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 50%;
    direction: ltr;
    display: flex;
    flex-direction: column;
    color: #B8C6CC;
    align-items: center;
}

    #EquipStatusManutencao::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }

    #EquipStatusManutencao::-webkit-scrollbar-thumb {
        background: rgba(255, 161, 127, 0.6);
        border: 0px none #ffffff;
        border-radius: 99px;
    }

        #EquipStatusManutencao::-webkit-scrollbar-thumb:hover {
            background: var(--nm05);
        }

#right-menu-bar {
    position: absolute;
    display: flex;
    width: 12vw;
    min-width: 12vw;
    max-width: 12vw;
    right: 0px;
    top: 51px;
    height: calc(100% - 51px);
    z-index: 2;
    background: var(--home-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--home-elevation-2);
    border-left: var(--home-border);
    border-top-left-radius: var(--home-radius);
    transition: 0.3s;
}

#conteudo-home .leaflet-right {
    position: absolute;
    right: 12vw !important;
    transition: 0.3s !important;
    margin-top: .5rem;
}



#toggle-right-menu-button {
    display: flex;
    position: absolute;
    background: var(--home-glass-strong) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--home-border);
    box-shadow: var(--home-elevation-1);
    padding: 20px 7px 20px 7px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    color: var(--yellow-light);
    right: 12vw;
    top: 0;
    margin-top: 30vh;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    flex-direction: column-reverse;
    font-size: clamp(0.9rem, 1.5vmin, 2rem);
}

#icon-right {
    margin-top: 3.5vmin;
}
/*#endregion*/

/*#region Tela Home - Outros Motivos */
#EquipStatusOutrosMotivos {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 46%;
    direction: ltr;
    display: flex;
    flex-direction: column;
    color: #B8C6CC;
    align-items: center;
}

    #EquipStatusOutrosMotivos::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }

    #EquipStatusOutrosMotivos::-webkit-scrollbar-thumb {
        background: rgba(255, 161, 127, 0.6);
        border: 0px none #ffffff;
        border-radius: 99px;
    }

        #EquipStatusOutrosMotivos::-webkit-scrollbar-thumb:hover {
            background: var(--nm05);
        }
/*#endregion*/

/*#region Tela Home - Omissao */
#notification-icon {
    position: absolute;
    top: 190px;
    right: 12.5vw;
    background: var(--home-glass-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--home-border);
    box-shadow: var(--home-elevation-1);
    padding: 7px 10px 7px 10px;
    border-radius: 10px;
    z-index: 1;
    transition: background var(--home-transition), color var(--home-transition), box-shadow var(--home-transition);
}

    #notification-icon:hover {
        background: linear-gradient(180deg, rgba(40, 40, 40, 0.96), rgba(28, 28, 28, 0.96));
        box-shadow: var(--home-elevation-2);
    }

.notification-icon-selected {
    color: var(--yellow-light) !important;
    background-color: #121212 !important;
    border-color: var(--yellow-light) !important;
}

#omissao-table {
    display: flex;
    position: absolute;
    background-color: rgba(18, 18, 18, 0.7);
    top: 196px;
    right: 12.3vw;
    z-index: 10000;
    width: 380px;
    border: var(--home-border);
    box-shadow: var(--home-elevation-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding: 5px 0px 5px 5px;
    transition: 0.3s;
}

.omissao-cards::-webkit-scrollbar {
    width: 5px;
    background-color: #121212;
}

.omissao-cards::-webkit-scrollbar-thumb {
    background: #FFA17F;
    border: 0px none #ffffff;
    border-radius: 99px;
}

#om-count {
    display: flex;
    position: absolute;
    color: var(--gray60) !important;
    font-size: 13px;
    background-color: #FFA17F;
    padding: 0 3px 0 3px;
    border-radius: 20px;
    top: 0px;
    right: 0px;
}

.omissao-cards {
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    width: 100%;
    padding: 5px;
    height: 50vh;
    max-height: 50vh;
    min-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

    .omissao-cards .footer {
        font-size: 12px;
        display: flex;
        justify-content: center;
    }

        .omissao-cards .footer label {
            margin-top: 5px;
            font-size: 12px;
            color: var(--yellow-light) !important;
        }

        .omissao-cards .footer a {
            margin-top: 5px;
            font-size: 14px;
        }

.omissao-card {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    background-color: rgba(46, 46, 46, 0.6);
    margin: 3px;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    width: 99%;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between !important;
    align-items: center;
    transition: 0.3s;
}

    .omissao-card label {
        margin: 0px;
    }

    .omissao-card .btn-section {
        display: flex;
        flex-direction: row;
        justify-content: end;
        margin-top: -5px;
        margin-bottom: -15px;
        width: 100%;
    }

    .omissao-card .info {
        display: flex;
        flex-direction: row;
    }

        .omissao-card .info .header {
            display: flex;
            align-items: center;
            flex-direction: column;
            font-size: 12px;
        }
/*#endregion*/

/*#region Customização visual do checkbox */
.custom-checkbox {
    cursor: pointer;
    position: relative;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    width: 16px;
    height: 16px;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

    .custom-checkbox::before {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        top: 0;
        left: 0;
        border-radius: 3px;
        background-color: #575E66;
        box-shadow: none;
    }

    .custom-checkbox:checked::after {
        content: "";
        display: block;
        width: 5px;
        height: 10px;
        border: solid #aeffa4;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        position: absolute;
        top: 2px;
        left: 6px;
    }


/*#endregion*/

/*#region DropDowns Relatorios*/
.main-content-side-menu {
    margin-top: 11px;
    box-sizing: border-box;
    min-height: 100vh;
}

.form-select option {
    background-color: #2c2c2c;
    color: #B8C6CC;
}

    .form-select option:hover {
        background-color: transparent !important;
        color: var(--yellow-light) !important;
    }

.hidden-side-bar {
    max-width: 70px !important;
    min-width: 70px !important;
}

#dropdowns-content {
    width: 300px;
    flex: 0 0 300px;
}

/* Permite que a área de cards encolha dentro do flex e respeite a largura disponível */
.main-content-side-menu > #dashboard-content {
    min-width: 0;
    overflow-x: hidden;
}

/* Altura dos mapas Leaflet na tela de detalhes da viagem */
.viagem-map {
    height: 460px;
    width: 100%;
}

/* Detalhes da viagem em telas menores / celular */
@media (max-width: 991.98px) {
    .viagem-map {
        height: 360px;
    }
}

@media (max-width: 575.98px) {
    .viagens-details {
        padding: 0.5rem !important;
    }

    .viagem-map {
        height: 280px;
    }

    /* Cards de cheio/vazio ocupam a largura toda, sem margem lateral que estoura */
    .viagens-details .stock-item-card {
        margin-left: 0;
        margin-right: 0;
    }

    /* Conteúdo interno dos cards com padding menor no celular */
    .viagens-details .stock-item-card > .p-2 {
        padding: 0.5rem !important;
    }

    .stock-table-wrap {
        max-height: 260px;
    }

    .stock-table {
        font-size: 0.78rem;
    }

    .stock-table thead th,
    .stock-table tbody td {
        padding: 0.4rem 0.5rem;
    }
}

/* Tabela no padrão stock-ui (ex.: deslocamento na tela de detalhes da viagem) */
.stock-table-wrap {
    max-height: 340px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--stock-radius-sm);
    background: rgba(18, 18, 18, 0.35);
}

.stock-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    color: var(--yellow-light);
}

.stock-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #232323;
    color: var(--stock-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.stock-table tbody td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
    white-space: nowrap;
}

.stock-table tbody tr:last-child td {
    border-bottom: none;
}

.stock-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.015);
}

.stock-table tbody tr:hover td {
    background: rgba(255, 255, 179, 0.06);
}

.hidden-side-bar #navigation {
    display: none !important;
}

#menu-icons a:hover,
#minimize-button:hover {
    border-color: var(--yellow-light) !important;
    color: var(--yellow-light) !important;
    text-decoration: none;
}

/*#endregion*/

/*#region Cards*/
.departure-card {
    display: flex;
    border-radius: 5px;
    flex-direction: column;
    width: 99%;
    margin-bottom: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

.auto-hide-payroll {
    content-visibility: auto;
    contain-intrinsic-size: 168.4px;
}

.cards-containers {
    padding: 1rem 0px 0 -1px;
    max-height: calc(100vh - 59px - 57px);
}

    .departure-card-header p {
        font-weight: 700;
        margin-bottom: 0;
        height: auto;
    }

.secondary-text {
    color: #FFFFFF;
    opacity: 0.5;
    text-align: center;
}

.vertical-line-right::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background-color: #383838;
}

.vehicle-image-container {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-width: 100px;
    min-height: 50px;
}

.vehicle-image {
    max-width: 80px;
    max-height: 50px;
}

/* ----- Cards do Stock UI (migrado de stock-ui.css) ----- */
.stock-card {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(35, 35, 35, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-left: 3px solid transparent;
    border-radius: var(--stock-radius);
    box-shadow: var(--stock-elevation-1);
    margin: 0 0.25rem 0.65rem;
    overflow: hidden;
    transition: border-color var(--stock-transition), box-shadow var(--stock-transition), transform var(--stock-transition);
}

.stock-card:hover {
    border-left-color: var(--yellow-light);
    box-shadow: var(--stock-elevation-2);
    transform: translateY(-1px);
}

.stock-card--alert {
    border-left-color: var(--stock-warning);
}

.stock-card--success {
    border-left-color: var(--stock-success);
}

.stock-card--danger {
    border-left-color: var(--stock-danger);
}

.stock-card-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: 0.65rem 0.95rem;
}

.stock-card-row + .stock-card-row {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.stock-field {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.stock-field--primary {
    flex: 2 1 0;
}

.stock-field--actions {
    align-items: center;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.6rem;
    justify-content: flex-end;
}

.stock-field-label {
    color: var(--stock-muted);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.stock-field-value {
    color: var(--yellow-light);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-field-value--strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.stock-field-value--muted {
    color: var(--stock-muted);
}

/* Responsivo: empilha campos do card em telas estreitas */
@media (max-width: 992px) {
    .stock-card-row {
        flex-wrap: wrap;
    }

    .stock-field {
        flex-basis: 45%;
    }

    .stock-field--actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

/*#endregion*/

/*#region Alertas*/
.alert-error, .alert-success {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 8px;
    padding-left: 8px;
    background-color: rgba(250, 40, 40, 0.5);
    color: white;
    display: none;
    text-align: center;
    animation-name: alerts-animation;
    animation-duration: 5s;
}

.alert-success {
    background-color: #aeffa4;
    color: #000000;
}
/*#endregion*/

/*#region Stock Badges*/
/* Pílulas de status (migrado de stock-ui.css) */
.stock-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.3rem;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.65rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.stock-badge::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 0.45rem;
    width: 0.45rem;
}

.stock-badge--success {
    background: var(--stock-success-bg);
    color: var(--stock-success);
}

.stock-badge--warning {
    background: var(--stock-warning-bg);
    color: var(--stock-warning);
}

.stock-badge--danger {
    background: var(--stock-danger-bg);
    color: var(--stock-danger);
}

.stock-badge--info {
    background: var(--stock-info-bg);
    color: var(--stock-info);
}

.stock-badge--muted {
    background: rgba(184, 198, 204, 0.08);
    color: var(--stock-muted);
}

.stock-badge--nm05 {
    background: rgba(255, 161, 127, 0.15);
    color: var(--nm05, #FFA17F);
    box-shadow: 0 0 8px rgba(255, 161, 127, 0.20);
}

/* Cadastro marcado como "de teste" (Matricula.IsEmployeeTest / Equipamento.IsEquipmentTest).
   Contorno como o .stock-badge--deleted (deleted-filter.css) de propósito: os dois são badges
   de SITUAÇÃO do cadastro e podem aparecer no mesmo card, então precisam parecer irmãos —
   e não se confundir com as pílulas semânticas sem borda (--warning, --info...).

   Por que existe: o flag esconde o cadastro de TODO select, relatório e multiselect da web,
   mas NÃO impede de ir pro tablet — o operador aponta, a PD entra e a pessoa some dos
   relatórios. Sem badge o card fica idêntico a um normal (incidente Ijaci 08/08/2026:
   colaboradora real marcada como teste, ninguém entendia por que sumia do select de Partes
   Diárias). Ver .claude/memoria/projeto/matricula-flags-teste-enabled.md. */
.stock-badge--test {
    background: var(--stock-warning-bg);
    border: 1px solid rgba(255, 210, 127, 0.45);
    color: var(--stock-warning);
    white-space: nowrap;
}
/*#endregion*/

/*#region Stock Cabeçalho de listagem*/
/* Cabeçalho padronizado de listas + campo de busca (migrado de stock-ui.css) */
.stock-list-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(35, 35, 35, 0.6), rgba(35, 35, 35, 0.3));
    border-radius: var(--stock-radius);
    display: flex;
    gap: 0.75rem;
    margin: 0 0.25rem 0.75rem;
    padding: 0.6rem 0.9rem;
}

.stock-list-header h4 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
    flex: 1 1 auto;
}

.stock-list-header .stock-list-meta {
    color: var(--stock-muted);
    font-size: 0.82rem;
    margin-left: 0.5rem;
}

.stock-list-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.stock-search {
    background: rgba(18, 18, 18, 0.55);
    border: 1px solid var(--stock-border-subtle);
    border-radius: var(--stock-radius-sm);
    color: #fff;
    min-width: 220px;
    padding: 0.45rem 0.7rem 0.45rem 2rem;
    transition: border-color var(--stock-transition), background var(--stock-transition);
}

.stock-search:focus {
    background: rgba(18, 18, 18, 0.85);
    border-color: var(--yellow-light);
    color: #fff;
    outline: none;
}

.stock-search-wrap {
    position: relative;
}

/* Ícone <i> renderizado dentro do .stock-search-wrap (mais robusto que ::before,
   pois usa diretamente a fonte/classe do Font Awesome carregada no layout). */
.stock-search-wrap .stock-search-icon {
    color: var(--stock-muted);
    font-size: 0.9rem;
    left: 0.7rem;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.stock-search-wrap:focus-within .stock-search-icon {
    color: var(--yellow-light);
}
/*#endregion*/

/*#region Stock Listas (empty / paginação)*/
/* Estado vazio e paginação refinada (migrado de stock-ui.css) */
.stock-empty {
    align-items: center;
    color: var(--stock-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
}

.stock-empty i {
    font-size: 2rem;
    opacity: 0.4;
}

.stock-pagination {
    align-items: center;
    color: var(--stock-muted);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
}

.stock-pagination .pagination .page-link {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--gray05);
}

.stock-pagination .pagination .page-item.active .page-link {
    background: rgba(255, 255, 179, 0.12);
    border-color: var(--yellow-light);
    color: var(--yellow-light);
}

.stock-pagination .pagination .page-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--yellow-light);
}
/*#endregion*/

/*#region Stock Modais (tema escuro)*/
/* Modal portátil (.stock-modal): traz o tema escuro de forma autocontida para
 * telas fora do módulo Stock (ex.: Home/Fluxo). Migrado de stock-ui.css. */
.stock-modal {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--stock-radius);
}

.stock-modal .form-control,
.stock-modal .form-select,
.stock-modal textarea {
    background-color: rgba(18, 18, 18, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.stock-modal .form-control:focus,
.stock-modal .form-select:focus,
.stock-modal textarea:focus {
    background-color: rgba(18, 18, 18, 0.85);
    border-color: var(--yellow-light);
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 179, 0.18);
    color: #fff;
}

.stock-modal .form-floating > label {
    color: var(--stock-muted);
}

/* Lista nativa de <select> nos modais: escurece as opções */
.stock-modal .form-select option,
.stock-modal .form-select optgroup {
    background-color: var(--gray90);
    color: var(--gray05);
}

.stock-modal .form-select option:checked {
    background-color: rgba(255, 255, 179, 0.16);
    color: var(--yellow-light);
}

/* Lista de detalhes/itens (somente leitura) dentro de modais Stock */
.stock-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.stock-detail-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--stock-radius-sm);
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.stock-detail-row .stock-field-value {
    white-space: normal;
}
/*#endregion*/

/*#region Stock Animações*/
@keyframes stock-fade-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.stock-card,
.stock-list-header {
    animation: stock-fade-in 200ms ease-out both;
}
/*#endregion*/

/*#region CheckBox*/
.switch-toggle {
    height: 40px;
    position: relative;
    display: inline-block;
}

    .switch-toggle input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        z-index: 0;
    }

        .switch-toggle input[type="checkbox"] + label {
            position: relative;
            display: inline-block;
            height: 30px;
            width: 60px;
            border-radius: 20px;
            margin: 0;
            cursor: pointer;
            box-shadow: inset 4px 4px 4px rgba(0,0,0, .20);
            background-color: #e5e5e5;
            transition: background-color 0.3s ease;
        }

        .switch-toggle input[type="checkbox"]:checked + label {
            background-color: var(--nm05) !important;
        }

        .switch-toggle input[type="checkbox"] + label::after {
            position: absolute;
            top: 0.25em;
            left: 0.1em;
            font-size: 0.8em;
            color: #fff;
            opacity: 0;
        }

        .switch-toggle input[type="checkbox"] + label::before {
            position: absolute;
            content: 'Não';
            font-size: 10px;
            text-align: center;
            line-height: 20px;
            top: 5px;
            left: 6px;
            color: white;
            width: 35px;
            height: 20px;
            border-radius: 20px;
            background-color: #383838;
            box-shadow: 3px 3px 5px rgba(0,0,0, .25);
            transition: .3s ease-in-out;
            border: 0;
        }

        .switch-toggle input[type="checkbox"]:checked + label::before {
            left: 35%;
            right: 6px;
            content: 'Sim';
            color: #fff;
            background-color: #383838;
            box-shadow: 3px 3px 5px rgba(0,0,0,   .25);
        }

.switch-toggle, #swithToggleTonshourOrCubicmeter input[type="checkbox"] + label::before {
    content: 'm³';
}

.switch-toggle, #swithToggleTonshourOrCubicmeter input[type="checkbox"]:checked + label::before {
    content: 'T';
}

.switch-toggle, #swithToggleBucketFactorAdjustmentByOrigin input[type="checkbox"] + label::before {
    content: 'Destino';
}

.switch-toggle, #swithToggleBucketFactorAdjustmentByOrigin input[type="checkbox"]:checked + label::before {
    content: 'Origem';
}
.custom-toggle-wrapper {
    width: 70px;
    height: 50px;
    position: relative;
    display: inline-block;
}

.custom-toggle-checkbox {
    display: none;
}

.custom-toggle-label {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e5e5e5;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: inset 4px 4px 4px rgba(0,0,0, .20);
}

.toggle-thumb {
    width: 40px;
    height: 40px;
    background-color: var(--nm05) !important;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease;
    font-size: 20px;
    color: black;
    box-shadow: inset 4px 4px 4px rgba(0,0,0, .20);
}

.custom-toggle-label .icon-on,
.custom-toggle-label .icon-off {
    position: absolute;
    transition: opacity 0.3s ease;
}

.custom-toggle-label .icon-on {
    opacity: 0;
}

.custom-toggle-label .icon-off {
    opacity: 1;
}

.custom-toggle-checkbox:checked + .custom-toggle-label .toggle-thumb {
    left: 25px;
    box-shadow: 3px 3px 5px rgba(0,0,0,   .25);
}

.custom-toggle-checkbox:checked + .custom-toggle-label .icon-on {
    opacity: 1;
}

.custom-toggle-checkbox:checked + .custom-toggle-label .icon-off {
    opacity: 0;
}

/*#endregion*/

/*#region DataTable*/
div.dt-container {
    margin: 0 auto;
    width: 99%;
}
.dt-container {
    padding: 1rem !important;
}

.dt-info {
    color: var(--gray05) !important;
}


.page-link {
    background-color: var(--nm05);
    color: black !important;
    border: 1px solid var(--gray90) !important;
}

.active > .page-link {
    background-color: var(--nm05-70) !important;
}

.page-link:hover {
    background-color: var(--nm05);
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
}

th, td {
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
}

.table th, .table td {
    padding: 8px !important;
    text-align: center !important;
    color: #B8C6CC !important;
}
/*#endregion*/

/*#region Tela Percurso*/

#speed-graph {
    position: absolute;
    width: 86vw;
    height: 25vh;
    max-height: 25vh;
    min-height: 25vh;
    background-color: rgba(18, 18, 18, 0.85);
    left: 14vw;
    z-index: 1000;
    border-radius: 0px;
    transition: 0.3s;
}

#map-percurso {
    position: absolute;
    display: flex;
    left: 0;
    width: 100vw;
    height: calc(100vh - 52px);
    z-index: 0;
}

.legend-graph-percuso {
    z-index: 9999;
    max-width: 90%;
    font-size: 14px;
    overflow-x: auto;
    white-space: nowrap;
}

/*#endregion*/

/*#region Select2*/
/* z-index alto só quando o dropdown está aberto, para o widget fechado
   não se sobrepor a dropdowns da navbar (.fixed-top, z-index 1030). */
.select2-container--open {
    z-index: 1056 !important;
}

.select2-selection {
    min-height: 57.99px !important;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.text-light {
    font-weight: bold;
}

/* ---- Caixa do select (single) ---- */
.select2-container--default .select2-selection--single {
    background-color: rgba(18, 18, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--yellow-light) !important;
        line-height: 28px;
    }

/* ---- Caixa do select (multiple) ---- */
.select2-container--default .select2-selection--multiple {
    background-color: rgba(18, 18, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 0.15rem 0.5rem !important;
    /* Largura travada: cresce só em altura quando chips quebram linha */
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Centraliza verticalmente o conteúdo na caixa */
    display: flex !important;
    align-items: center !important;
}

/* Conteúdo flui à esquerda naturalmente (inline), sem esticar */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: normal !important;
    overflow: hidden !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: block !important;
    float: none !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    padding: 0.15rem 0 !important;
    background-color: transparent !important;
    border: none !important;
    text-align: left !important;
    color: var(--yellow-light) !important;
}

    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field:focus {
        box-shadow: none !important;
        border: none !important;
    }

    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
        color: var(--gray05) !important;
        opacity: 0.55 !important;
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(255, 255, 179, 0.12) !important;
    border: 1px solid rgba(255, 255, 179, 0.18) !important;
    border-radius: 12px !important;
    color: var(--yellow-light) !important;
    font-weight: 500 !important;
    padding: 0.12rem 0.55rem !important;
    margin-top: 0.2rem !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.select2-selection__choice__display {
    color: var(--yellow-light) !important;
    padding-left: 1.2rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.select2-selection__choice__remove {
    border-right: none !important;
    color: var(--yellow-light) !important;
    border-radius: 999px 0 0 999px !important;
}

    .select2-selection__choice__remove:hover {
        background-color: rgba(255, 255, 179, 0.2) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

/* ---- Painel do dropdown (a lista que aparece) ---- */
.select2-dropdown {
    background-color: var(--gray90) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.75) !important;
    overflow: hidden !important;
    color: var(--gray05) !important;
}

.select2-results__options {
    padding: 0.35rem !important;
}

/* Cada opção da lista */
.select2-container--default .select2-results__option {
    color: var(--gray05) !important;
    border-radius: 7px !important;
    padding: 0.45rem 0.7rem !important;
    font-size: 0.92rem !important;
    transition: background-color 160ms cubic-bezier(.2, .8, .2, 1), color 160ms cubic-bezier(.2, .8, .2, 1) !important;
}

/* Opção em foco (mouse/teclado) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: rgba(255, 161, 127, 0.18) !important;
    color: var(--yellow-light) !important;
}

/* Opção já selecionada */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(255, 255, 179, 0.1) !important;
    color: var(--yellow-light) !important;
}

.select2-results__message {
    color: var(--gray05) !important;
    opacity: 0.6;
}

.select2-results__options::-webkit-scrollbar, .new-report-body::-webkit-scrollbar {
    width: 6px !important;
    background-color: transparent !important;
}

.select2-results__options::-webkit-scrollbar-thumb, .new-report-body::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.6) !important;
    border: 0px none #ffffff !important;
    border-radius: 99px !important;
}

/* ---- Busca dentro do dropdown ---- */
.select2-search--dropdown {
    padding: 0.4rem !important;
}

.select2-search__field {
    background-color: rgba(18, 18, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    color: #fff !important;
    margin-top: 0 !important;
    padding: 0.4rem 0.6rem !important;
    font-weight: 500;
}

    .select2-search__field:focus {
        border-color: var(--yellow-light) !important;
        box-shadow: 0 0 0 0.18rem rgba(255, 255, 179, 0.18) !important;
        outline: none !important;
    }

.select2-container--open {
    z-index: 9999 !important;
}

/*#endregion*/

/*#region Snackbar*/
#snackbar {
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 280px;
    max-width: 420px;
    background-color: #333;
    font-family: var(--font);
    font-weight: 600;
    color: #fff;
    text-align: left;
    border-radius: 10px;
    padding: 14px 16px;
    position: fixed;
    z-index: 10000;
    right: 24px;
    bottom: 30px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

    #snackbar.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

#snackbar-message {
    flex: 1 1 auto;
    line-height: 1.35;
    font-size: 0.95rem;
    word-break: break-word;
}

#snackbar-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, background 0.15s ease;
}

    #snackbar-close:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.22);
    }

#progress-bar {
    flex: 1 1 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#progress-bar-inner {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.08s linear;
}
/*#endregion*/

/*#region Dashboard*/

.d3-geral-rect {
    fill: #3dff25;
    fill-opacity: 0.25;
}

.d3-meta-text {
    fill: #575E66;
}

.d3-histogram-mean {
    fill: #B8C6CC;
    stroke: #B8C6CC;
}

.d3-meta {
    stroke: #575E66;
}

@media (max-width: 1300px) {
    .teble-report {
        max-width: Calc(100% - 85px);
    }
}
/*#endregion*/

/*#region Fluxo*/
@media (min-width: 1024px) {
    .fluxo-container {
        height: 100vh !important;
    }

    #fluxo-left-bar {
        max-height: calc(100vh - 110px);
    }

    #fluxo-mc-body {
        max-height: calc(100vh - 118px);
    }
}

@media (max-width: 1023px) {
    /* .fluxo-container {
    } */

    .fluxo-titulo {
        display: none;
    }

    #fluxo-mc-body {
        max-height: 430px;
    }

    .fluxo-img {
        display: none;
    }

    .fluxo-infos {
        width: 100% !important;
        font-size: 1rem;
    }

    .fluxo-label {
        font-size: 10px;
    }

    .fluxo-info {
        font-size: 12px;
    }
}
/*#endregion*/

/*#region tooltip*/

#tooltip-div {
    position: fixed; /* fica acima de qualquer container com overflow/transform */
    display: none; /* começa oculto */
    z-index: 9999; /* acima dos SVGs/cards */
    pointer-events: none; /* não captura o mouse */
}

    #tooltip-div .tip {
        background: rgba(0,0,0,.85);
        color: #e6edf3;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 8px;
        padding: 8px 10px;
        font-size: .875rem;
        line-height: 1.2;
        box-shadow: 0 6px 24px rgba(0,0,0,.35);
        white-space: nowrap; /* quebra se quiser: normal */
    }
/*#endregion*/

/*#region dropdown do autocomplete*/
.ui-autocomplete {
    background: rgba(22,22,22,.97) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 13px !important;
    padding: 6px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 14px !important;
    color: #d6dbdf !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 9999 !important;
}

/* Scrollbar sutil */
.ui-autocomplete::-webkit-scrollbar { width: 4px; }
.ui-autocomplete::-webkit-scrollbar-track { background: transparent; }
.ui-autocomplete::-webkit-scrollbar-thumb { background: rgba(255,161,127,.25); border-radius: 4px; }

.ui-menu-item { border-radius: 8px !important; }

.ui-menu-item-wrapper {
    padding: 9px 12px !important;
    color: #d6dbdf !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: background .12s, color .12s !important;
}

.ui-state-active,
.ui-menu-item-wrapper.ui-state-active {
    background: linear-gradient(90deg, rgba(255,161,127,.16), transparent) !important;
    box-shadow: inset 2px 0 0 var(--nm05, #FFA17F) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
}

/* Item "Nenhum resultado" */
.ui-state-disabled .ui-menu-item-wrapper {
    color: rgba(184,198,204,.45) !important;
    font-style: italic;
    cursor: default !important;
}
/*#endregion*/

/*#region Dashboard Grao Para*/
#gp-dropdowns-content {
    min-width: 300px;
    max-width: 330px;
}

#gp-dashboard-content {
    padding: 8px;
}

#gp-dropdowns-content .form-control,
#gp-dropdowns-content .form-select,
#gp-dropdowns-content .input-group-text {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: #b8c6cc;
}

#gp-dropdowns-content .form-control::placeholder {
    color: #575e66;
}

#gp-dropdowns-content .form-check-input {
    border-color: rgba(255,255,255,0.3);
    background-color: transparent;
}

#gp-dropdowns-content .form-check-input:checked {
    background-color: #aeffa4;
    border-color: #aeffa4;
}

#gp-dropdowns-content .form-check-label {
    color: #b8c6cc;
}

#gp-dropdowns-content .select2-container {
    width: 100% !important;
}

.gp-periodo-toggle-list {
    border: 1px solid #252525;
    border-radius: 8px;
    background: #1e1e1e;
    padding: 6px 8px;
}

/*#region DailyPart modals*/
.pd-modal {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    animation: pd-modal-in 180ms ease-out both;
    overflow: hidden;
}

@keyframes pd-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pd-modal .modal-header {
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.pd-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.pd-modal .modal-title .pd-modal-icon {
    font-size: 0.95rem;
    opacity: 0.85;
}

.pd-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--yellow-light);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pd-modal-close:hover,
.pd-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    outline: none;
}

.pd-modal .footer-modal {
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.pd-modal .form-select:focus,
.pd-modal .form-control:focus {
    border-color: var(--yellow-light) !important;
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 179, 0.16) !important;
}

/*#region Preventive History Modal (ph-modal) */
.ph-modal {
    --ph-accent: var(--yellow-light, #ffffb3);
    --ph-accent-soft: rgba(255, 255, 179, 0.12);
}

/* Header */
.ph-header {
    padding: 1.1rem 1.25rem 0.75rem;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.ph-header-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 1;
    min-width: 0;
}

.ph-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 179, 0.1);
    border: 1px solid rgba(255, 255, 179, 0.18);
    color: var(--ph-accent);
    font-size: 1rem;
    flex-shrink: 0;
}

.ph-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.ph-subtitle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}

.ph-equip-icon {
    font-size: 0.7rem;
    opacity: 0.7;
}

.ph-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 179, 0.1);
    border: 1px solid rgba(255, 255, 179, 0.2);
    color: var(--ph-accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Table */
.ph-table {
    font-size: 13px;
}

.ph-table thead tr {
    background: rgba(255, 255, 179, 0.04);
    border-bottom: 2px solid rgba(255, 255, 179, 0.18);
}

.ph-th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 179, 0.6);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.ph-th-id {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.25);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    width: 52px;
}

.ph-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    transition: background 0.15s, box-shadow 0.15s;
}

.ph-row:last-child {
    border-bottom: none;
}

.ph-row:hover {
    background: rgba(255, 255, 179, 0.07) !important;
    box-shadow: inset 3px 0 0 var(--ph-accent);
}

.ph-id-cell {
    color: rgba(255, 255, 255, 0.28);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.ph-date-cell,
.ph-hor-cell {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.ph-cell-icon {
    font-size: 0.65rem;
    margin-right: 0.3rem;
}

/* Data icon → azul céu; Horímetro icon → amarelo */
.ph-date-cell .ph-cell-icon {
    color: #7dd3fc;
    opacity: 0.8;
}

.ph-hor-cell .ph-cell-icon {
    color: var(--ph-accent);
    opacity: 0.75;
}

.ph-step-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: 6px;
    background: rgba(255, 255, 179, 0.1);
    border: 1px solid rgba(255, 255, 179, 0.22);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ph-accent);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-actions {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

/* Empty state */
.ph-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 0.5rem;
    text-align: center;
}

.ph-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 179, 0.07);
    border: 1px solid rgba(255, 255, 179, 0.14);
    color: rgba(255, 255, 179, 0.4);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.ph-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.ph-empty-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    max-width: 300px;
}

/* Edit panel */
.ph-edit-panel {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 179, 0.025);
}

.ph-edit-header {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ph-accent);
    opacity: 0.85;
    margin-bottom: 0.85rem;
}

/* Footer */
.ph-footer {
    padding: 0.75rem 1.25rem;
}

/* Histórico da Preventiva V2 — mesmo skin .ph-*, colunas a mais (origem, OS) e o
   registro AVULSO marcado. Nota: NÃO usar `opacity` para "apagar" o avulso; sobre
   --stock-muted (.55) a tela fica ilegível — foi o defeito corrigido em 12/08/2026. */
.ph-note {
    margin: 0.75rem 1.25rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: rgba(255, 210, 127, 0.1);
    border: 1px solid rgba(255, 210, 127, 0.24);
    color: #ffe7bd;
    font-size: 0.78rem;
    line-height: 1.45;
}

.ph-step-badge--loose {
    background: rgba(255, 210, 127, 0.12);
    border-color: rgba(255, 210, 127, 0.28);
    color: #ffd27f;
}

.ph-sub-cell {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--gray05);
}

.ph-source {
    font-size: 0.74rem;
    color: var(--gray05);
}

.ph-os-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    background: rgba(111, 224, 140, 0.12);
    border: 1px solid rgba(111, 224, 140, 0.26);
    color: #6FE08C;
    font-size: 0.72rem;
    font-weight: 600;
}

.ph-dash {
    color: var(--gray05);
    font-size: 0.78rem;
}

/*
 * Âncora e exclusão no histórico da V2 (24/09/2026).
 *
 * A marca "âncora" existe para responder, na própria tela, ao "registrei e o card não mudou": numa
 * tarefa por horímetro quem define o próximo vencimento é a execução de MAIOR horímetro, não a mais
 * recente — e sem a marca a linha que manda é indistinguível das outras.
 */
.ph-anchor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: rgba(127, 190, 255, 0.12);
    border: 1px solid rgba(127, 190, 255, 0.28);
    color: #7FBEFF;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.ph-row--anchor {
    /* Filete à esquerda em vez de fundo inteiro: a linha já alterna cor e um realce cheio brigaria
       com o hover da tabela. */
    box-shadow: inset 3px 0 0 0 rgba(127, 190, 255, 0.55);
}

.ph-del-btn {
    border: 1px solid rgba(255, 122, 122, 0.28);
    background: rgba(255, 122, 122, 0.1);
    color: #ff7a7a;
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ph-del-btn:hover {
    background: rgba(255, 122, 122, 0.2);
    border-color: rgba(255, 122, 122, 0.5);
}

/*
 * Linha excluída (soft delete): sai do cálculo e CONTINUA visível, marcada — esconder seria
 * exclusão sem desfazer. Nada de `opacity` aqui: o texto secundário desta tabela já sai de
 * --gray05 (rgba .55) e a lição de 12/08/2026 é que empilhar opacity deixa a tela ilegível.
 */
.ph-row--deleted .ph-date-cell,
.ph-row--deleted .ph-hor-cell,
.ph-row--deleted .ph-step-badge,
.ph-row--deleted .ph-source {
    text-decoration: line-through;
    color: var(--gray05);
}

.ph-deleted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: rgba(255, 122, 122, 0.1);
    border: 1px solid rgba(255, 122, 122, 0.26);
    color: #ff7a7a;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    /* O selo não é o texto riscado — ele precisa continuar legível. */
    text-decoration: none;
}

.ph-restore-btn {
    border: 1px solid rgba(111, 224, 140, 0.28);
    background: rgba(111, 224, 140, 0.1);
    color: #6FE08C;
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ph-restore-btn:hover {
    background: rgba(111, 224, 140, 0.2);
    border-color: rgba(111, 224, 140, 0.5);
}
/*#endregion*/

.pd-field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray05);
    opacity: 0.75;
}

.pd-context-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--gray05);
}

.pd-context-chip i {
    width: 0.85rem;
    text-align: center;
    opacity: 0.6;
}

.pd-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    color: var(--gray05);
    opacity: 0.7;
}

.pd-empty-state i {
    font-size: 1.6rem;
    opacity: 0.6;
}
/*#endregion*/

/*#region Ciclos */
.ciclos-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--gray90);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
}

.ciclos-summary-bar .title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 500;
}

.ciclos-summary-bar .title i {
    color: var(--nm05);
    opacity: 0.85;
}

.ciclos-summary-bar .count {
    background: rgba(255, 161, 127, 0.12);
    border: 1px solid var(--nm05);
    color: var(--nm05);
    border-radius: 999px;
    padding: 0.1rem 0.7rem;
    font-weight: 600;
}

/* ---------------- Journey page — scroll igual Furos --------------------- */
@media (min-width: 992px) {
    .journey-page .pd-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: auto !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }
    .journey-page .pd-sidebar-backdrop { display: none !important; }
    .journey-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .journey-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
}
@media (max-width: 991.98px) {
    .journey-page #dropdowns-content { z-index: 1029 !important; }
    .journey-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}

/* Oculta o botão X da sidebar nas telas com sidebar sticky (desktop) */
@media (min-width: 992px) {
    .ciclo-page .pd-sidebar-close-btn,
    .journey-page .pd-sidebar-close-btn,
    .horimetro-page .pd-sidebar-close-btn,
    .checklist-page .pd-sidebar-close-btn,
    .apr-page .pd-sidebar-close-btn,
    .history-manutencao-page .pd-sidebar-close-btn,
    .maintenance-indicator-page .pd-sidebar-close-btn { display: none !important; }
}

/* maintenance-indicator-page — sidebar sticky, scroll pelo body (conteúdo longo) */
@media (min-width: 992px) {
    .maintenance-indicator-page .pd-sidebar { position: sticky !important; top: 0 !important; height: 100vh !important; max-height: 100vh !important; transform: none !important; z-index: auto !important; visibility: visible !important; overflow-y: auto !important; }
    .maintenance-indicator-page .pd-sidebar-backdrop { display: none !important; }
    .maintenance-indicator-page #dashboard-content { overflow-y: visible !important; overflow-x: hidden !important; padding: 0.6rem 0.85rem 2.5rem !important; }
    .maintenance-indicator-page#main-container { align-items: flex-start !important; }
}
@media (max-width: 991.98px) {
    .maintenance-indicator-page #dropdowns-content { z-index: 1029 !important; }
    .maintenance-indicator-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}

/* horimetro-page — scroll e hover */
@media (min-width: 992px) {
    .horimetro-page .pd-sidebar { position: sticky !important; top: 0 !important; height: 100vh !important; max-height: 100vh !important; transform: none !important; z-index: auto !important; visibility: visible !important; overflow-y: auto !important; }
    .horimetro-page .pd-sidebar-backdrop { display: none !important; }
    .horimetro-page #dashboard-content { overflow-y: auto !important; overflow-x: hidden !important; max-height: calc(100vh - 27px) !important; padding: 0.6rem 0.85rem 2.5rem !important; box-sizing: border-box; }
}
@media (max-width: 991.98px) {
    .horimetro-page #dashboard-content { padding: 0.5rem 0.35rem 2rem !important; max-height: calc(100vh - 28px) !important; overflow-y: auto !important; }
}
@media (max-width: 991.98px) {
    .horimetro-page #dropdowns-content { z-index: 1029 !important; }
    .horimetro-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}
.horimetro-page .stock-item-card:hover {
    border-left-color: var(--nm05);
    box-shadow: 0 18px 40px rgba(0,0,0,0.46), 0 0 20px rgba(255,161,127,0.14);
}
/* ---------------- Checklist page — scroll igual Ciclo ------------------- */
@media (min-width: 992px) {
    .checklist-page .pd-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: auto !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }
    .checklist-page .pd-sidebar-backdrop { display: none !important; }
    .checklist-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .checklist-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
}
@media (max-width: 991.98px) {
    .checklist-page #dropdowns-content { z-index: 1029 !important; }
    .checklist-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}

/* ---------------- APR page — scroll igual Ciclo ------------------------- */
@media (min-width: 992px) {
    .apr-page .pd-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: auto !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }
    .apr-page .pd-sidebar-backdrop { display: none !important; }
    .apr-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .apr-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
}
@media (max-width: 991.98px) {
    .apr-page #dropdowns-content { z-index: 1029 !important; }
    .apr-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}

/* hor-row — linha individual de horímetro expandido */
.hor-row {
    border-radius: 7px;
    border-left: 3px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    transition: background 0.15s, border-color 0.15s;
}
.hor-row:hover {
    background: rgba(255,255,255,0.045);
    border-left-color: var(--pd-accent);
}
.hor-toggle-icon { transition: transform 0.2s ease; }

.journey-page .stock-item-card:hover {
    border-left-color: var(--nm05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 161, 127, 0.14);
}

/* Abas de turma */
.journey-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(184, 198, 204, 0.08);
    color: var(--stock-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}
.journey-tab-btn:hover {
    background: rgba(184, 198, 204, 0.14);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.18);
}
.journey-tab-btn.active {
    background: var(--pd-accent-soft) !important;
    color: var(--pd-accent) !important;
    border-color: rgba(255, 161, 127, 0.4) !important;
}

/* pd-sticky-header — toolbar fixo no topo do scroll (todas as telas pd-modern) */
.pd-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    /* background: rgba(20, 18, 16, 0.92); */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.5rem;
}
/* Quando stock-tabs-wrap está dentro de pd-sticky-header, não deve ser sticky por conta própria */
.pd-sticky-header .pd-sticky-tabs {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    margin: 0;
    padding: 0.35rem 0 0;
}

/* Journey modal — skeleton + map */
@keyframes jm-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.75; }
}
.jm-skeleton {
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    animation: jm-pulse 1.6s ease-in-out infinite;
}
.jm-skeleton--chart {
    height: 300px;
}
.jm-skeleton--map {
    height: 300px;
}
.jm-map,
#map-parent {
    height: 300px;
}
.jm-map {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
/* Align modal header icon with badge row */
#journeyModal .modal-title {
    font-size: 0.9rem;
    gap: 0.5rem;
}
#journeyModal .pd-modal-icon {
    font-size: 1rem;
}
.jm-title-placeholder {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    font-weight: 400;
}

/* ---------------- Ciclo page — scroll igual Furos ----------------------- */
@media (min-width: 992px) {
    .ciclo-page .pd-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: auto !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }
    .ciclo-page .pd-sidebar-backdrop { display: none !important; }
    .ciclo-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .ciclo-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
}
@media (max-width: 991.98px) {
    .ciclo-page #dropdowns-content { z-index: 1029 !important; }
    .ciclo-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}

/* ---------------- Pilha page — mesmo padrão de scroll que ciclo-page ------- */
@media (min-width: 992px) {
    .pilha-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .pilha-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
}

/* ---------------- Abastecimento page — scroll + sidebar ------------------ */
@media (min-width: 992px) {
    .abastecimento-page .pd-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: auto !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }
    .abastecimento-page .pd-sidebar-backdrop { display: none !important; }
    .abastecimento-page .pd-sidebar-close-btn { display: none !important; }
    .abastecimento-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .abastecimento-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
    .abastecimento-page #dropdowns-content { z-index: 1029 !important; }
    .abastecimento-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}
.abastecimento-page .stock-item-card:hover {
    border-left-color: var(--nm05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 161, 127, 0.14);
}

/* ---------------- Saldo Estoque page — scroll + sidebar ----------------- */
@media (min-width: 992px) {
    .saldo-estoque-page .pd-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: auto !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }
    .saldo-estoque-page .pd-sidebar-backdrop { display: none !important; }
    .saldo-estoque-page .pd-sidebar-close-btn { display: none !important; }
    .saldo-estoque-page #dashboard-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 27px) !important;
        padding: 0.6rem 0.85rem 2.5rem !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991.98px) {
    .saldo-estoque-page #dashboard-content {
        padding: 0.5rem 0.35rem 2rem !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }
    .saldo-estoque-page #dropdowns-content { z-index: 1029 !important; }
    .saldo-estoque-page .pd-sidebar-backdrop { z-index: 1028 !important; }
}
.saldo-estoque-page .stock-item-card:hover {
    border-left-color: var(--nm05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 161, 127, 0.14);
}

/* ---------------- Ciclo page — overrides com acento --nm05 -------------- */
.ciclo-page .stock-item-card:hover {
    border-left-color: var(--nm05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 161, 127, 0.14);
}

.ciclo-page .stock-item-field__value {
    color: #d6dbdf;
}

.ciclo-page .stock-action {
    color: var(--nm05);
}

.ciclo-page .stock-action:hover {
    background: rgba(255, 161, 127, 0.14);
    color: var(--nm05);
    transform: translateY(-1px);
}

.ciclo-page .stock-btn-primary {
    background: linear-gradient(135deg, var(--nm05), #e8825f);
    color: #2a1206;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 161, 127, 0.26);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.ciclo-page .stock-btn-primary:hover {
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 161, 127, 0.42);
    color: #2a1206;
}

/* Abastecimento modals — mesmo padrão visual do ciclo-modal */
#modal .abastecimento-modal .modal-title {
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--nm05);
    font-size: 18px;
}
#modal .abastecimento-modal .modal-title i {
    filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.5));
}
#modal .abastecimento-modal .pd-modal-close {
    color: var(--nm05);
}
#modal .abastecimento-modal .pd-modal-close:hover,
#modal .abastecimento-modal .pd-modal-close:focus-visible {
    background: rgba(255, 161, 127, 0.16);
    color: var(--nm05);
}
#modal .abastecimento-modal .stock-btn-primary {
    background: linear-gradient(135deg, var(--nm05), #e8825f);
    color: #2a1206;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 161, 127, 0.26);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
#modal .abastecimento-modal .stock-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 161, 127, 0.42);
    color: #2a1206;
}
#modal .abastecimento-modal .stock-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #ECECEC;
    border-radius: 10px;
    font-weight: 500;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#modal .abastecimento-modal .stock-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--nm05);
    color: #fff;
}

/* Ciclo modals — título serif em --nm05, botões do guia */
#modal .ciclo-modal .modal-title {
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--nm05);
    font-size: 18px;
}

#modal .ciclo-modal .modal-title i {
    filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.5));
}

#modal .ciclo-modal .ciclo-modal-danger-title {
    color: var(--stock-danger);
}

#modal .ciclo-modal .ciclo-modal-danger-title i {
    filter: none;
}

#modal .ciclo-modal .pd-modal-close {
    color: var(--nm05);
}

#modal .ciclo-modal .pd-modal-close:hover,
#modal .ciclo-modal .pd-modal-close:focus-visible {
    background: rgba(255, 161, 127, 0.16);
    color: var(--nm05);
}

#modal .ciclo-modal .stock-btn-primary {
    background: linear-gradient(135deg, var(--nm05), #e8825f);
    color: #2a1206;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 161, 127, 0.26);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

#modal .ciclo-modal .stock-btn-primary:hover {
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 161, 127, 0.42);
    color: #2a1206;
}

#modal .ciclo-modal .stock-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #ECECEC;
    border-radius: 10px;
    font-weight: 500;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#modal .ciclo-modal .stock-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--nm05);
    color: #fff;
}

#modal .ciclo-modal .stock-btn-danger {
    background: var(--stock-danger-bg);
    border: 1px solid transparent;
    color: var(--stock-danger);
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
}

#modal .ciclo-modal .stock-btn-danger:hover {
    background: var(--stock-danger);
    color: #1a1a1a;
    transform: translateY(-1px);
}

/* ---------------- Ciclo modal — inputs dark glass ----------------------- */

/* Seções */
.cm-section {
    padding-bottom: 1rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cm-section--last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.cm-section__header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nm05);
    margin-bottom: 0.65rem;
}
.cm-section__icon { font-size: 0.68rem; opacity: 0.75; }
.cm-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(220, 220, 220, 0.5);
    margin-bottom: 0.3rem;
}

/* form-control / form-select globais no modal de ciclo e abastecimento */
#modal .ciclo-modal .form-control,
#modal .ciclo-modal .form-select,
#modal .abastecimento-modal .form-control,
#modal .abastecimento-modal .form-select {
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
#modal .ciclo-modal .form-control:focus,
#modal .ciclo-modal .form-select:focus,
#modal .abastecimento-modal .form-control:focus,
#modal .abastecimento-modal .form-select:focus {
    border-color: var(--nm05) !important;
    box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.18) !important;
}
#modal .ciclo-modal .form-control:disabled,
#modal .ciclo-modal .form-select:disabled,
#modal .abastecimento-modal .form-control:disabled,
#modal .abastecimento-modal .form-select:disabled {
    opacity: 0.55;
}

/* form-floating dentro do modal — label sempre pequena no topo */
#modal .ciclo-modal .form-floating > label,
#modal .abastecimento-modal .form-floating > label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 0.38rem 0.75rem 0 !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    color: rgba(220, 220, 220, 0.5) !important;
    transform: none !important;
    transition: color 0.18s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
}
#modal .ciclo-modal .form-floating > .form-control:focus ~ label,
#modal .ciclo-modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
#modal .abastecimento-modal .form-floating > .form-control:focus ~ label,
#modal .abastecimento-modal .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--nm05) !important;
    transform: none !important;
    opacity: 1 !important;
}
#modal .ciclo-modal .form-floating > .form-control,
#modal .ciclo-modal .form-floating > .form-select,
#modal .abastecimento-modal .form-floating > .form-control,
#modal .abastecimento-modal .form-floating > .form-select {
    height: 52px !important;
    min-height: 52px !important;
    padding: 1.4rem 0.75rem 0.35rem !important;
}

/* pd-sf dentro do modal — posicionamento do chevron */
#modal .ciclo-modal .pd-sf,
#modal .abastecimento-modal .pd-sf {
    position: relative;
    display: block;
}
#modal .ciclo-modal .pd-sf .form-floating > .form-control,
#modal .abastecimento-modal .pd-sf .form-floating > .form-control {
    padding-right: 2.2rem !important;
}
#modal .ciclo-modal .pd-sf .pd-sf-chev,
#modal .abastecimento-modal .pd-sf .pd-sf-chev {
    color: rgba(255, 161, 127, 0.38);
}
#modal .ciclo-modal .pd-sf:focus-within .pd-sf-chev,
#modal .abastecimento-modal .pd-sf:focus-within .pd-sf-chev {
    color: var(--nm05);
    transform: translateY(-50%) rotate(180deg);
}

/* Date pickers no modal */
#modal .ciclo-modal .cm-datepicker,
#modal .abastecimento-modal .cm-datepicker {
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}
#modal .ciclo-modal .cm-datepicker:focus-within,
#modal .abastecimento-modal .cm-datepicker:focus-within {
    border-color: var(--nm05) !important;
    box-shadow: 0 0 0 3px rgba(255, 161, 127, 0.18) !important;
}
#modal .ciclo-modal .cm-datepicker .form-control,
#modal .abastecimento-modal .cm-datepicker .form-control {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 1.4rem 0.75rem 0.35rem !important;
}
#modal .ciclo-modal .cm-datepicker .form-floating > label,
#modal .abastecimento-modal .cm-datepicker .form-floating > label {
    padding: 0.38rem 0.75rem 0 !important;
}
#modal .ciclo-modal .cm-datepicker .input-group-text,
#modal .ciclo-modal .input-group-text {
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--pd-accent) !important;
    padding: 0 0.85rem !important;
    min-height: 52px !important;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
}
#modal .ciclo-modal .cm-datepicker:focus-within .input-group-text,
#modal .ciclo-modal .input-group:focus-within .input-group-text {
    color: var(--nm05) !important;
    border-color: var(--nm05) !important;
    border-left: none !important;
}
#modal .ciclo-modal .input-group .form-control,
#modal .ciclo-modal .input-group .form-floating {
    border-radius: 8px 0 0 8px !important;
}
#modal .ciclo-modal .input-group .form-control {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
}
#modal .ciclo-modal .input-group:focus-within .form-control {
    border-color: var(--nm05) !important;
}

/* Abastecimento modal — datepicker no padrão perf-modal (furo) */
#modal .abastecimento-modal .input-group-text {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    color: var(--nm05) !important;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
#modal .abastecimento-modal .input-group .form-control {
    border-radius: 10px 0 0 10px !important;
}
#modal .abastecimento-modal .input-group:focus-within .form-control,
#modal .abastecimento-modal .input-group:focus-within .input-group-text {
    border-color: var(--nm05) !important;
}
#modal .abastecimento-modal .input-group:focus-within .form-control {
    box-shadow: 0 0 0 3px rgba(255,161,127,.14) !important;
}

/* ---------------- Tela de detalhes do ciclo ----------------------------- */
.ciclo-details-page {
    color: var(--gray05);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1.5rem 3rem;
    box-sizing: border-box;
}

/* Summary toolbar card */
.ciclo-summary {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0,0,0,.32);
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
}
.ciclo-summary-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 0.9rem;
}
.ciclo-summary-title i {
    color: var(--nm05);
    filter: drop-shadow(0 0 8px rgba(255,161,127,.5));
}
.ciclo-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
}
.ciclo-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 120px;
}
.ciclo-summary-item .label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--txt-dim, #9aa0a6);
    font-weight: 600;
}
.ciclo-summary-item .value {
    color: #d6dbdf;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Panels */
.ciclo-panel {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 3px solid transparent;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0,0,0,.32);
    height: 100%;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.ciclo-panel:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,.46);
}
.ciclo-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ciclo-panel-header.is-vazio { color: #8DD0FF; border-left: none; }
.ciclo-panel-header.is-vazio i { filter: drop-shadow(0 0 6px rgba(141,208,255,.4)); }
.ciclo-panel-header.is-cheio { color: var(--nm05); }
.ciclo-panel-header.is-cheio i { filter: drop-shadow(0 0 6px rgba(255,161,127,.5)); }
.ciclo-panel:has(.is-vazio) { border-left-color: #8DD0FF; }
.ciclo-panel:has(.is-cheio) { border-left-color: var(--nm05); }
.ciclo-panel-body { padding: 0.9rem 1rem; }

/* KV table */
.ciclo-kv { width: 100%; margin: 0; }
.ciclo-kv td {
    border-bottom: 1px solid rgba(255,255,255,.05);
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
}
.ciclo-kv tr:last-child td { border-bottom: 0; }
.ciclo-kv td:first-child { color: #9aa0a6; text-align: left; }
.ciclo-kv td:last-child { color: var(--nm05); text-align: right; font-weight: 500; }

/* Map and chart containers */
.ciclo-map, .ciclo-chart {
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,.2);
}
.ciclo-map { min-height: 380px; }

/* Tabs */
.ciclo-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    width: 100%;
}
.ciclo-tabs .btn {
    border-radius: 10px !important;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    transition: background .15s, color .15s, border-color .15s;
    border: 1px solid transparent !important;
    color: #9aa0a6;
    background: transparent;
}
.ciclo-tabs .btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.ciclo-tabs .btn.active {
    border-color: var(--nm05) !important;
    color: var(--nm05) !important;
    background: rgba(255,161,127,.10) !important;
}

/* Modern data tables */
.ciclo-details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}
.ciclo-details-table thead th {
    padding: 0.6rem 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa0a6;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    white-space: nowrap;
}
.ciclo-details-table tbody tr { transition: background .12s; }
.ciclo-details-table tbody tr:hover { background: rgba(255,255,255,.04); }
.ciclo-details-table tbody td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: #d6dbdf;
    vertical-align: middle;
}
.ciclo-details-table tbody tr:last-child td { border-bottom: 0; }
.ciclo-td-date { font-weight: 600; color: #b8c6cc; white-space: nowrap; }
.ciclo-td-operator { color: #e0e6ea; font-weight: 500; }
.ciclo-td-duration {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nm05);
    text-align: right;
}
.ciclo-td-mono {
    font-family: 'Consolas', monospace;
    font-size: 0.79rem;
    color: #b8c6cc;
}
.ciclo-td-speed {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Estado badges */
.ciclo-estado-badge {
    display: inline-block;
    padding: 0.22rem 0.65rem;
    border-radius: 30px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,.08);
    color: #d6dbdf;
    border: 1px solid rgba(255,255,255,.1);
    line-height: 1.4;
    transition: background .15s;
}
.ciclo-estado-badge.is-moving  { background: rgba(141,208,255,.12); color: #8dd0ff; border-color: rgba(141,208,255,.25); }
.ciclo-estado-badge.is-loading { background: rgba(76,175,142,.12);  color: #4caf8e; border-color: rgba(76,175,142,.25); }
.ciclo-estado-badge.is-waiting { background: rgba(244,200,66,.10);  color: #f4c842; border-color: rgba(244,200,66,.22); }
.ciclo-estado-badge.is-stopped { background: rgba(244,111,111,.10); color: #f46f6f; border-color: rgba(244,111,111,.22); }

/* Coordinate info grid */
.ciclo-coord-grid {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.15);
    margin-bottom: 1rem;
}
.ciclo-coord-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    gap: 1rem;
}
.ciclo-coord-row:last-child { border-bottom: 0; }
.ciclo-coord-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9aa0a6;
    white-space: nowrap;
}
.ciclo-coord-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #d6dbdf;
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-family: 'Consolas', monospace;
}
.ciclo-coord-diff { font-weight: 700; }
.ciclo-coord-diff.is-ok   { color: #4caf8e; }
.ciclo-coord-diff.is-warn { color: #f4c842; }
.ciclo-coord-diff.is-bad  { color: #f46f6f; }

@media (max-width: 575px) {
    .ciclo-coord-row { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
    .ciclo-coord-value { text-align: left; }
    .ciclo-details-table thead th,
    .ciclo-details-table tbody td { padding: 0.5rem 0.65rem; }
}

/* Cycle time KPI cards */
.ciclo-time-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ciclo-time-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    flex: 1;
    min-width: 110px;
    text-align: center;
    transition: background .15s;
}
.ciclo-time-card:hover { background: rgba(255,255,255,.07); }
.ciclo-time-card i { font-size: 0.9rem; margin-bottom: 0.1rem; color: #9aa0a6; }
.ciclo-time-card.is-vazio  { border-color: rgba(141,208,255,.22); background: rgba(141,208,255,.06); }
.ciclo-time-card.is-vazio i  { color: #8DD0FF; }
.ciclo-time-card.is-cheio  { border-color: rgba(255,161,127,.22); background: rgba(255,161,127,.06); }
.ciclo-time-card.is-cheio i  { color: #FFA17F; }
.ciclo-time-card.is-green  { border-color: rgba(76,175,142,.22);  background: rgba(76,175,142,.06); }
.ciclo-time-card.is-green i  { color: #4caf8e; }
.ciclo-time-card.is-neutral{ border-color: rgba(244,200,66,.22);  background: rgba(244,200,66,.06); }
.ciclo-time-card.is-neutral i{ color: #f4c842; }
.ciclo-time-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9aa0a6;
}
.ciclo-time-value {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #d6dbdf;
    letter-spacing: 0.02em;
}
@media (max-width: 575px) {
    .ciclo-time-card { min-width: calc(50% - 0.25rem); flex: none; }
}

/* Speed stats above chart */
.ciclo-speed-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.ciclo-speed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.76rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #9aa0a6;
}
.ciclo-speed-badge strong { color: #d6dbdf; font-variant-numeric: tabular-nums; }
.ciclo-speed-badge.is-alert {
    background: rgba(244,111,111,.1);
    border-color: rgba(244,111,111,.25);
    color: #f46f6f;
}
.ciclo-speed-badge.is-alert strong { color: #f46f6f; }

/* Map legend */
.ciclo-map-legend {
    background: rgba(10, 14, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    color: #d6dbdf;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    backdrop-filter: blur(8px);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.ciclo-map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.legend-line {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}
/*#endregion*/

.gp-periodo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #b8c6cc;
    border-bottom: 1px dashed rgba(87,94,102,0.35);
    padding: 4px 0;
}

.gp-periodo-toggle:last-child {
    border-bottom: none;
}

.gp-periodo-toggle .switch-toggle {
    height: 30px;
}

.gp-section {
    margin-bottom: 8px;
}

/* Dashboard Operacional: cards de outro tipo de equipamento escondidos pelo filtro
   (DashboardFilterScope, Riomar 15/10/2026). */
.gp-hidden-by-filter {
    display: none !important;
}

.gp-filter-scope-notice,
.gp-modern .gp-no-data-state.gp-filter-scope-notice {
    margin-bottom: 12px;
    color: #8DD0FF;
    background: rgba(141, 208, 255, 0.07);
    border-color: rgba(141, 208, 255, 0.4) !important;
    text-align: left;
}

.gp-loaded-empty {
    margin: 4px 0 10px;
    text-align: left;
}

.gp-section-header {
    color: var(--yellow-light);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 0 6px 2px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,179,0.35);
}

.gp-card {
    border: 1px solid #252525;
    border-radius: 8px;
    padding: 8px 10px;
    background: #1e1e1e;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    height: 100%;
}

/* Seletor de períodos do card "Produção por Suborigem" (turno atual / ontem / 7d / mês).
   Cada aba mostra o rótulo, o total (t) e o subtítulo da janela. */
.gp-period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
}

.gp-period-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 96px;
    padding: 6px 10px;
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    background: #1a1a1a;
    color: var(--gp-text-muted, rgba(220,220,220,0.55));
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    text-align: left;
}

.gp-period-tab:hover {
    border-color: rgba(255,161,127,0.45);
    color: var(--gp-text, #f1f1f1);
}

.gp-period-tab.active {
    border-color: var(--gp-accent, #FFA17F);
    background: rgba(255,161,127,0.12);
    color: var(--gp-text, #f1f1f1);
}

.gp-period-tab-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gp-period-tab-total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gp-accent, #FFA17F);
}

.gp-period-tab .gp-period-tab-sub {
    font-size: 0.6rem;
    color: var(--gp-text-muted, rgba(220,220,220,0.55));
    letter-spacing: 0.02em;
}

.gp-suborigem-loading {
    padding: 18px 4px;
    color: var(--gp-text-muted, rgba(220,220,220,0.55));
    font-size: 0.8rem;
}

/* Card "Produção por Equipamento": as duas frotas ficam abertas lado a lado — transporte na
   coluna da esquerda, escavadeira na da direita — no lugar das abas que obrigavam a clicar.
   Abaixo de 1200px empilha: em meia largura de tela pequena as 5 colunas da tabela do
   transporte (equipamento, cava, viagens, comparativo, produção) não caberiam. */
.gp-fleet-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

@media (min-width: 1200px) {
    .gp-fleet-split.gp-fleet-split--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* min-width 0 é obrigatório: sem ele o item do grid nunca encolhe abaixo do conteúdo e a
   tabela interna estoura a largura do card em vez de comprimir as colunas. */
.gp-fleet-col {
    min-width: 0;
}

.gp-fleet-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,161,127,0.22);
}

.gp-fleet-col-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gp-text, #f1f1f1);
}

.gp-fleet-col-total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gp-accent, #FFA17F);
    white-space: nowrap;
}

/* Em meia largura as colunas da tabela precisam de mínimos menores que os do card inteiro,
   senão a barra comparativa some espremida entre os textos. */
.gp-fleet-split .gp-operator-head.has-extra,
.gp-fleet-split .gp-operator-row.has-extra {
    grid-template-columns: minmax(80px, 1.6fr) minmax(48px, 0.7fr) minmax(70px, 1.6fr) minmax(62px, auto);
}

.gp-fleet-split .gp-operator-head.has-secondary.has-extra,
.gp-fleet-split .gp-operator-row.has-secondary.has-extra {
    grid-template-columns: minmax(70px, 1.1fr) minmax(62px, 1fr) minmax(48px, 0.7fr) minmax(62px, 1.3fr) minmax(62px, auto);
}

.gp-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b8c6cc;
    margin-bottom: 6px;
}

.gp-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--yellow-light);
}

/* Faixa de referencia do card "Pareto de Atividades Improdutivas" (Dashboard Operacional).
   O Pareto sozinho diz qual improdutivo e o maior, nao se ele e grave: 19 min de fila com 92%
   acumulado sao 4% de um turno de 8 h. A faixa poe o PRODUTIVO do periodo ao lado do improdutivo,
   e e ela que da sentido ao "% do apurado" que aparece em cima de cada barra.
   Preenchida por gpRenderParetoReferencia (_DashboardScripts.cshtml); nasce com [hidden] e so
   aparece quando ha tempo apurado no periodo. */
.gp-pareto-ref {
    margin: 0 0 8px;
}

.gp-pareto-ref__bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #272727;
}

.gp-pareto-ref__seg {
    display: block;
    height: 100%;
}

/* Verde = operando, vermelho = a mesma cor das barras do Pareto logo abaixo. */
.gp-pareto-ref__seg--prod {
    background: #AEFFA4;
}

.gp-pareto-ref__seg--improd {
    background: rgb(179,84,71);
}

.gp-pareto-ref__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 5px;
    font-size: 0.7rem;
    color: #b8c6cc;
}

.gp-pareto-ref__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.gp-pareto-ref__item strong {
    font-weight: 700;
    color: #f1f1f1;
}

.gp-pareto-ref__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.gp-pareto-ref__dot--prod {
    background: #AEFFA4;
}

.gp-pareto-ref__dot--improd {
    background: rgb(179,84,71);
}

.gp-pareto-ref__base {
    color: #575e66;
    white-space: nowrap;
}

.gp-kpi-label {
    font-size: 0.76rem;
    color: #575e66;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gp-kpi-card {
    border: 1px solid #252525;
    border-radius: 8px;
    padding: 9px 8px;
    text-align: center;
    background: #272727;
    height: 100%;
}

.gp-card > .gp-kpi-value,
.gp-kpi-card .gp-kpi-value,
.gp-kpi-mini .gp-kpi-value {
    color: var(--yellow-light) !important;
}

.gp-kpi-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid #252525;
    border-radius: 7px;
    background: #1e1e1e;
    margin-bottom: 6px;
}

.gp-kpi-mini:last-child {
    margin-bottom: 0;
}

.gp-kpi-mini .gp-kpi-label {
    margin: 0;
}

.gp-kpi-mini .gp-kpi-value {
    font-size: 1rem;
}

.gp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.gp-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #575e66;
    font-size: 0.62rem;
    border-bottom: 1px solid #252525;
    padding: 0 0 5px 0;
}

.gp-table tbody td {
    color: #b8c6cc;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(87,94,102,0.35);
}

.gp-table tbody tr:last-child td {
    border-bottom: none;
    font-weight: 700;
}

.gp-table td:last-child,
.gp-table th:last-child {
    text-align: right;
}

.gp-operator-head {
    display: grid;
    grid-template-columns: minmax(110px, 1.25fr) minmax(140px, 2fr) minmax(72px, auto);
    gap: 8px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #575e66;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #252525;
}

.gp-operator-head.has-secondary {
    grid-template-columns: minmax(92px, 1.1fr) minmax(86px, 1fr) minmax(120px, 1.8fr) minmax(72px, auto);
}

.gp-operator-head.has-pre-label {
    grid-template-columns: minmax(80px, 1fr) minmax(80px, 1.1fr) minmax(120px, 1.8fr) minmax(72px, auto);
}

.gp-operator-head.has-pre-label.has-secondary {
    grid-template-columns: minmax(72px, 0.9fr) minmax(72px, 0.9fr) minmax(68px, 0.85fr) minmax(110px, 1.5fr) minmax(72px, auto);
}

.gp-operator-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.25fr) minmax(140px, 2fr) minmax(72px, auto);
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(87,94,102,0.35);
}

.gp-operator-row.has-secondary {
    grid-template-columns: minmax(92px, 1.1fr) minmax(86px, 1fr) minmax(120px, 1.8fr) minmax(72px, auto);
}

.gp-operator-row.has-pre-label {
    grid-template-columns: minmax(80px, 1fr) minmax(80px, 1.1fr) minmax(120px, 1.8fr) minmax(72px, auto);
}

.gp-operator-row.has-pre-label.has-secondary {
    grid-template-columns: minmax(72px, 0.9fr) minmax(72px, 0.9fr) minmax(68px, 0.85fr) minmax(110px, 1.5fr) minmax(72px, auto);
}

/* Variantes com coluna numérica extra (ex.: "Viagens" em "Produção por Equipamento").
   A coluna extra entra entre o secundário (ou o nome) e a barra comparativa. */
.gp-operator-head.has-extra,
.gp-operator-row.has-extra {
    grid-template-columns: minmax(110px, 1.6fr) minmax(60px, 0.7fr) minmax(110px, 1.7fr) minmax(72px, auto);
}

.gp-operator-head.has-secondary.has-extra,
.gp-operator-row.has-secondary.has-extra {
    grid-template-columns: minmax(92px, 1.1fr) minmax(80px, 1fr) minmax(60px, 0.7fr) minmax(100px, 1.5fr) minmax(72px, auto);
}

/* "DMT por Cava x Destino" — 6 colunas:
   Cava . Destino . Material . Viagens . barra comparativa . DMT */
.gp-operator-head.has-pre-label.has-secondary.has-extra,
.gp-operator-row.has-pre-label.has-secondary.has-extra {
    grid-template-columns: minmax(72px, 1fr) minmax(72px, 1fr) minmax(68px, 0.9fr) minmax(56px, 0.65fr) minmax(90px, 1.4fr) minmax(66px, auto);
}

.gp-operator-extra,
.gp-operator-extra-head {
    text-align: right;
    white-space: nowrap;
}

.gp-operator-extra {
    color: #b8c6cc;
    font-size: 0.9rem;
}

/* Tempo de Carregamento por Caminhão — 6 colunas:
   Caminhão · Escavadeira · Fila · Carregamento · barra comparativa · Total */
.gp-operator-head.gp-loadtime,
.gp-operator-row.gp-loadtime {
    grid-template-columns: minmax(72px, 1fr) minmax(72px, 1fr) minmax(54px, 0.7fr) minmax(72px, 0.9fr) minmax(90px, 1.4fr) minmax(62px, auto);
}

/* Colunas numéricas de quebra (fila/carregamento) e seus cabeçalhos: alinhados à direita */
.gp-operator-row.gp-loadtime .gp-loadtime-sub {
    color: #9aa7ad;
    font-size: 0.86rem;
    text-align: right;
    white-space: nowrap;
}

.gp-operator-head.gp-loadtime .gp-loadtime-sub-head {
    text-align: right;
}

.gp-operator-pre-label {
    color: #b8c6cc;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-operator-row:last-child {
    border-bottom: none;
}

.gp-operator-name {
    color: #b8c6cc;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-operator-secondary {
    color: #b8c6cc;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-operator-bar-track {
    width: 60%;
    height: 9px;
    border-radius: 999px;
    background: #383838;
    overflow: hidden;
}

.gp-operator-bar-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 3px;
}

.gp-operator-value {
    color: var(--yellow-light);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    white-space: nowrap;
}

/* Comparison table (Em Estrada vs Fora de Estrada) */
.gp-comp-head {
    display: grid;
    grid-template-columns: minmax(110px, 1.25fr) minmax(160px, 2fr) minmax(160px, 2fr);
    gap: 8px;
    align-items: center;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(87,94,102,0.5);
    color: #575e66;
    font-size: 0.8rem;
    font-weight: 600;
}

.gp-comp-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.25fr) minmax(160px, 2fr) minmax(160px, 2fr);
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(87,94,102,0.35);
}

.gp-comp-row:last-child {
    border-bottom: none;
}

.gp-comp-col {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gp-comp-col .gp-operator-bar-track {
    flex: 1;
    min-width: 40px;
}

.gp-comp-col .gp-operator-value {
    flex-shrink: 0;
    min-width: 52px;
}

.gp-comp-name-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.gp-comp-sublabel {
    color: #575e66;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-dual-side-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(87,94,102,0.4);
}

/* Produtividade por Equipamento (por turno) */
.gp-prod-equip-turno {
    margin-bottom: 14px;
}

.gp-prod-equip-turno:last-child {
    margin-bottom: 0;
}

.gp-prod-equip-head,
.gp-prod-equip-row {
    display: grid;
    grid-template-columns: minmax(80px, 1.1fr) minmax(80px, 1.1fr) minmax(70px, 0.9fr) minmax(80px, 1.1fr) minmax(60px, 1.4fr) minmax(64px, auto);
    gap: 8px;
    align-items: center;
}

.gp-prod-equip-head {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #575e66;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #252525;
}

.gp-prod-equip-row {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(87,94,102,0.35);
}

.gp-prod-equip-row:last-child {
    border-bottom: none;
}

.gp-prod-equip-cell {
    color: #b8c6cc;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-prod-equip-value {
    color: var(--yellow-light);
    font-weight: 600;
    font-size: 0.82rem;
    text-align: right;
    white-space: nowrap;
}

.gp-chart-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid #575e66;
    color: #b8c6cc;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.7rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
    max-width: 260px;
}

.gp-chart-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    #gp-main-container {
        display: block !important;
    }

    #gp-dropdowns-content {
        max-width: none;
        min-width: 0;
        width: 100%;
        margin-bottom: 8px;
    }
}
/*#endregion*/

/*#region New Home*/
/* ============================================================================
 * Tela Home — apenas estilos NOVOS, compartilhados e responsivos.
 * Os refinamentos que só sobrescreviam regras existentes foram fundidos
 * diretamente nas regras originais (regiões "Tela Home" acima neste arquivo
 * e .hr-custum no newSite.css).
 * Aqui permanecem: tokens (--home-*); elementos sem equivalente original
 * (cabeçalhos h8, badges de contagem, badge das abas, contador de omissões,
 * pílulas de status, cantos da mensagem de erro); os controles do Leaflet,
 * que são COMPARTILHADOS com outras telas de mapa — por isso mantêm o escopo
 * body[data-module-active="home"]; e o ajuste responsivo de tablet.
 * O atributo data-module-active="home" é renderizado server-side no <body>.
 * ========================================================================= */

:root {
    --home-success: #6FE08C;
    --home-success-bg: rgba(111, 224, 140, 0.14);
    --home-warning: #FFD27F;
    --home-warning-bg: rgba(255, 210, 127, 0.14);
    --home-danger: #FF8A7A;
    --home-danger-bg: rgba(255, 138, 122, 0.14);
    --home-info: #8DD0FF;
    --home-info-bg: rgba(141, 208, 255, 0.14);
    --home-muted: rgba(184, 198, 204, 0.55);
    --home-glass: linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(22, 22, 22, 0.92));
    --home-glass-strong: linear-gradient(180deg, rgba(24, 24, 24, 0.96), rgba(18, 18, 18, 0.96));
    --home-border: 1px solid rgba(255, 255, 255, 0.06);
    --home-border-subtle: rgba(255, 255, 255, 0.04);
    --home-elevation-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    --home-elevation-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 34px -12px rgba(0, 0, 0, 0.75);
    --home-radius: 12px;
    --home-radius-sm: 8px;
    --home-transition: 160ms cubic-bezier(.2, .8, .2, 1);
}

/* ---------------- Migração do acento: amarelo legado -> --nm05 -------------
 * Guia de Linguagem Visual (guia-visual-metalar.html): o acento legado
 * --yellow-light (#FFFFB3) está sendo substituído pelo acento de marca
 * --nm05 (#FFA17F) em todas as telas novas. Como o <body> da Home carrega
 * data-module-active="home", redefinir o token aqui faz TODA referência a
 * var(--yellow-light) da página (nomes de equipamento, abas ativas, alças,
 * ícones de ação, badges) resolver para o coral da marca — sem tocar nas
 * outras telas. As cores semânticas (success/warning/danger/info) seguem
 * intactas, conforme a regra de uso de cores do guia. */
body[data-module-active="home"] {
    --yellow-light: var(--nm05);
}

/* ---------------- Cabeçalhos das listas (h8) ------------------------------ */
body[data-module-active="home"] #EquipStatusFora h8,
body[data-module-active="home"] #EquipStatusManutencao h8,
body[data-module-active="home"] #EquipStatusOutrosMotivos h8 {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(20, 20, 20, 0));
    backdrop-filter: blur(4px);
}

/* ---------------- Badges de contagem (pílulas) ---------------------------- */
body[data-module-active="home"] #badge-fora,
body[data-module-active="home"] #badge-manu,
body[data-module-active="home"] #badge-otherReasons,
body[data-module-active="home"] #badge-operando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(255, 161, 127, 0.14);
    color: var(--yellow-light);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

/* ---------------- Abas: contador vira badge em pílula --------------------- */
body[data-module-active="home"] .navbar-equipment-item .equipment-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: clamp(0.72rem, 1.4vmin, 0.95rem);
}

body[data-module-active="home"] .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.2rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gray05);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    transition: background var(--home-transition), color var(--home-transition);
}

body[data-module-active="home"] .navbar-equipment-item:hover .tab-badge,
body[data-module-active="home"] .navbar-equipment-item.active .tab-badge {
    background: rgba(255, 161, 127, 0.20);
    color: var(--yellow-light);
}

/* ---------------- Contador de omissões (badge vermelho) ------------------- */
body[data-module-active="home"] #om-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    margin-left: 2px;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--home-danger);
    color: #1a1a1a;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

/* ---------------- Mensagem de erro ---------------------------------------- */
body[data-module-active="home"] #mensagem-erro:not(:empty) {
    border-radius: var(--home-radius-sm);
}

/* ---------------- Controles do Leaflet (compartilhado: manter o escopo) --- */
body[data-module-active="home"] .leaflet-bar a,
body[data-module-active="home"] .leaflet-control-layers,
body[data-module-active="home"] .leaflet-control-zoom a {
    background: var(--home-glass-strong);
    color: var(--gray05);
    border-color: rgba(255, 255, 255, 0.06);
}

body[data-module-active="home"] .leaflet-bar a:hover,
body[data-module-active="home"] .leaflet-control-zoom a:hover {
    background: linear-gradient(180deg, rgba(40, 40, 40, 0.96), rgba(28, 28, 28, 0.96));
    color: var(--yellow-light);
}

/* ---------------- Pílulas de status (cor por estado) ---------------------- */
body[data-module-active="home"] .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: clamp(0.64rem, 1.25vmin, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    /* Quebra linha em vez de forçar a largura do card (escondia os botões). */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

body[data-module-active="home"] .status-pill::before {
    content: "";
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

body[data-module-active="home"] .status-pill--success {
    background: var(--home-success-bg);
    color: var(--home-success);
}

body[data-module-active="home"] .status-pill--warning {
    background: var(--home-warning-bg);
    color: var(--home-warning);
}

body[data-module-active="home"] .status-pill--danger {
    background: var(--home-danger-bg);
    color: var(--home-danger);
}

body[data-module-active="home"] .status-pill--info {
    background: var(--home-info-bg);
    color: var(--home-info);
}

/* ---------------- Tablet: barras laterais x barra de operação -------------
 * Antes, no tablet, as laterais usavam height: calc(99% - 193px) e a barra de
 * operação ficava com width:100vw — então ela passava POR BAIXO/atrás das
 * laterais, gerando sobreposição (pior ao recolher/reabrir).
 *
 * Agora o tablet espelha o desktop: as laterais ocupam a altura TOTAL abaixo
 * da navbar (cada uma com 20vw) e a barra de operação fica ENTRE elas. O JS
 * (adjustBottomBar) reajusta left/width da barra inferior conforme cada
 * lateral é recolhida/expandida. O breakpoint casa com o do JS (1290px). */
@media (max-width: 1290px) {
    body[data-module-active="home"] #left-menu-bar,
    body[data-module-active="home"] #right-menu-bar {
        top: 51px;
        bottom: auto;
        margin-top: 0;
        height: calc(100vh - 51px);
        max-height: calc(100vh - 51px);
        width: 20vw;
        min-width: 20vw;
        max-width: 20vw;
    }

    /* As alças de recolher precisam acompanhar a largura da lateral neste
       breakpoint (20vw). Sem isto, no 1º render elas herdam o 12vw do desktop e
       ficam "dentro" da barra, sobre o conteúdo, até o usuário clicar (quando o
       JS reescreve o estilo inline). O JS usa o mesmo 20vw (getBarWidthVw). */
    body[data-module-active="home"] #toggle-left-menu-button {
        left: 20vw;
    }

    body[data-module-active="home"] #toggle-right-menu-button {
        right: 20vw;
    }

    /* Estado inicial: as duas laterais abertas (20vw cada) → barra no meio.
       O JS recalcula isto ao recolher/expandir cada lateral.
       Altura dirigida pelo conteúdo, igual ao desktop (min-height aqui, e
       max-height herdado da regra base): cresce pra cima em vez de cortar. */
    #bottom-menu-bar {
        height: auto;
        min-height: 240px;
    }
}

/* ---------------- Celular: drawers em overlay + bottom sheet --------------
 * Em telas estreitas (≤768px) tratar como tablet (20vw fixos por lateral)
 * deixava ~40% da largura tomada por faixas ilegíveis sobre o mapa. Aqui as
 * laterais viram DRAWERS que deslizam por cima do mapa (85vw, controlados
 * pelo JS via largura inline) e começam recolhidas. A barra inferior vira um
 * "bottom sheet" de largura total e as abas viram uma faixa rolável na
 * horizontal. As cores seguem os mesmos tokens --home-* / paleta nimo. */
@media (max-width: 768px) {

    /* Laterais como overlay acima do mapa. Largura efetiva vem do inline do JS
       (0vw recolhido / 85vw aberto); aqui só liberamos os limites e o z-index.
       width:0 evita o "flash" das barras abertas antes do JS inicializar. */
    body[data-module-active="home"] #left-menu-bar,
    body[data-module-active="home"] #right-menu-bar {
        top: 51px;
        bottom: auto;
        margin-top: 0;
        height: calc(100vh - 51px);
        max-height: calc(100vh - 51px);
        width: 0;
        min-width: 0;
        max-width: 90vw;
        z-index: 1200;
    }

    /* Apenas a alça da direita sobe (a da esquerda mantém o valor base): assim
       ela fica acima do bottom sheet (46vh de baixo) e não colide com a alça da
       esquerda (30vh) quando um drawer está aberto. */
    body[data-module-active="home"] #toggle-right-menu-button {
        margin-top: 16vh;
    }

    /* Barra inferior: bottom sheet de largura total, mais alta para caber a
       lista de equipamentos confortavelmente. */
    body[data-module-active="home"] #bottom-menu-bar {
        left: 0;
        width: 100vw;
        height: 46vh;
        z-index: 1100;
    }

    /* Abas: faixa rolável na horizontal (antes empilhavam verticalmente,
       consumindo o bottom sheet). Sobrepõe o comportamento do .d-md-flex. */
    body[data-module-active="home"] #navbar-equipment-types {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        height: auto;
        min-height: 40px;
        max-height: none;
        margin-bottom: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body[data-module-active="home"] #navbar-equipment-types::-webkit-scrollbar {
        display: none;
    }

    body[data-module-active="home"] .navbar-equipment-item {
        flex: 0 0 auto;
        white-space: nowrap;
        height: auto;
        padding: 8px 14px;
        margin-bottom: 0 !important;
        border-bottom: none;
    }

    /* Lista de equipamentos em operação: empilhada na vertical e rolável,
       preenchendo o bottom sheet (sobrepõe o legado height:15vh). */
    body[data-module-active="home"] #equipments-on-operation {
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body[data-module-active="home"] .status-operacao-equip-container {
        width: 100%;
        max-width: none;
        height: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Nome do equipamento legível no celular (sobrepõe o legado 9px). */
    body[data-module-active="home"] .status-operacao-equip .status-operacao-header .text {
        font-size: 0.9rem !important;
    }

    /* Ícone de notificação e tabela de omissões fixos (o JS não os desloca
       mais por vw no celular). */
    body[data-module-active="home"] #notification-icon {
        top: 64px;
        right: 0.6rem;
    }

    body[data-module-active="home"] #conteudo-home .leaflet-right {
        right: 0 !important;
    }

    body[data-module-active="home"] #omissao-table {
        top: 104px;
        right: 0.6rem;
        left: auto;
        width: 92vw;
        max-width: 360px;
    }
}
/*#endregion*/

/* Balão da Home: superfície e hierarquia de campos do Guia Visual / nm-card.
   Sem blur por marcador: existe apenas um popup, criado sob demanda. */
#map-home .home-map-popup {
    pointer-events: none;
}
#map-home .home-map-popup .leaflet-popup-content-wrapper {
    background: var(--home-glass-strong);
    color: var(--gray05);
    border: var(--home-border);
    border-top: 3px solid var(--nm05);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .30);
}
#map-home .home-map-popup .leaflet-popup-tip {
    background: var(--gray100);
    box-shadow: none;
}
#map-home .home-map-popup .leaflet-popup-content {
    margin: 0;
    width: clamp(220px, 14vw, 280px) !important;
    max-width: calc(100vw - 40px);
}
#map-home .home-map-popup__details {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
#map-home .home-map-popup .nm-field-label {
    font-size: clamp(10px, .65vw, 11px);
}
#map-home .home-map-popup .nm-field-value {
    font-size: clamp(13px, .8vw, 16px);
    white-space: normal;
    overflow-wrap: anywhere;
}
#map-home .home-map-popup .nm-field-value--strong {
    font-size: clamp(17px, 1vw, 20px);
    color: var(--nm05);
}
@media (min-width: 1291px) {
    #map-home .home-map-popup .nm-card-row { padding: 8px 12px; }
    #map-home .home-map-popup__details { gap: 8px; }
}

/* Home: marcadores em pixels de tela, independentes da escala geográfica. */
#map-home .home-equipment-marker .my-div-span {
    font-size: clamp(14px, 0.65vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 6px;
    color: var(--gray05) !important;
    background: var(--home-glass-strong) !important;
    border: var(--home-border);
    box-shadow: var(--home-elevation-1);
    -webkit-text-stroke: 0 !important;
}

/* O piso evita laterais estreitas no Full HD; o teto preserva o mapa no 4K.
   getBarWidthPx na Home usa os mesmos limites ao recolher e redimensionar. */
@media (min-width: 1291px) {
    body[data-module-active="home"] { --home-sidebar-width: clamp(220px, 12vw, 400px); }

    body[data-module-active="home"] #left-menu-bar,
    body[data-module-active="home"] #right-menu-bar {
        top: 51px;
        margin-top: 0;
        height: calc(100dvh - 51px);
        width: var(--home-sidebar-width);
        min-width: var(--home-sidebar-width);
        max-width: var(--home-sidebar-width);
    }

    body[data-module-active="home"] #toggle-left-menu-button { left: var(--home-sidebar-width); }
    body[data-module-active="home"] #toggle-right-menu-button { right: var(--home-sidebar-width); }
    body[data-module-active="home"] #conteudo-home .leaflet-right { right: var(--home-sidebar-width) !important; }
    body[data-module-active="home"] #notification-icon { right: calc(var(--home-sidebar-width) + 0.5vw); }
    body[data-module-active="home"] #bottom-menu-bar {
        left: var(--home-sidebar-width);
        width: calc(100% - 2 * var(--home-sidebar-width));
        min-height: 0;
        max-height: 38vh;
    }

    body[data-module-active="home"] .status-operacao-equip-container {
        width: clamp(260px, 13vw, 360px);
        min-width: 260px;
        max-width: 360px;
        padding: 6px 8px 6px 10px;
        gap: 6px;
    }

    /* Mesmo motivo do ajuste acima nos cards de operação: vw sozinho escala com
       a largura da tela INTEIRA, não com a da lateral (12vw) — em tela grande
       o nome, a foto e os botões destes cards (Fora / Manutenção / Outros
       Motivos, todos usando .status-fora-*) inflavam bem além do que cabe
       numa coluna estreita. Troca para vmin com teto bem menor, no mesmo
       espírito do que já foi feito em .status-operacao-*. */
    body[data-module-active="home"] .status-fora-equip-container {
        padding: 8px 10px 8px 12px;
        gap: 4px;
    }

    body[data-module-active="home"] .status-fora-equip {
        gap: 3px;
    }

    body[data-module-active="home"] .status-fora-equip img {
        height: clamp(16px, 2.2vh, 32px);
    }

    body[data-module-active="home"] .status-fora-equip .status-fora-header {
        font-size: clamp(13px, 1.4vmin, 18px);
    }

    body[data-module-active="home"] .status-fora-equip .status-fora-footer,
    body[data-module-active="home"] .status-fora-equip .status-pill {
        font-size: clamp(11px, 1.15vmin, 15px);
    }

    body[data-module-active="home"] .status-fora-actions a {
        width: clamp(24px, 2.2vmin, 30px);
        height: clamp(24px, 2.2vmin, 30px);
        font-size: clamp(12px, 1.2vmin, 16px);
    }

    /* Ultrawide tem muita largura, mas pouca altura: vw sozinho inflava o rodapé.
       Mantém campos legíveis e usa rolagem interna quando há dados extras. */
    body[data-module-active="home"] .status-operacao-equip { gap: 3px; }
    body[data-module-active="home"] .status-operacao-equip .status-operacao-header .text {
        font-size: clamp(15px, 1.8vmin, 24px);
    }
    body[data-module-active="home"] .status-operacao-equip .status-operacao-footer,
    body[data-module-active="home"] .status-operacao-equip .status-pill {
        font-size: clamp(12px, 1.25vmin, 17px);
        line-height: 1.25;
    }
    body[data-module-active="home"] .status-operacao-equip img {
        height: clamp(18px, 2.4vh, 36px);
    }
    body[data-module-active="home"] .status-operacao-equip .status-operacao-body .signal-icon {
        height: clamp(10px, 1.4vh, 18px);
    }
    body[data-module-active="home"] .status-operacao-actions .first-block { gap: 3px; }
    body[data-module-active="home"] .status-operacao-actions a {
        width: clamp(26px, 2.7vmin, 34px);
        height: clamp(26px, 2.7vmin, 34px);
        font-size: clamp(13px, 1.6vmin, 18px);
    }
    body[data-module-active="home"] #toggle-bottom-menu-button { height: 28px; }

    body[data-module-active="home"] #navbar-equipment-types {
        height: auto;
        min-height: 32px;
        max-height: none;
        flex: 0 0 auto;
        flex-wrap: wrap;
    }

    body[data-module-active="home"] .navbar-equipment-item {
        height: auto;
        min-height: 32px;
        padding: 4px 8px;
        font-size: clamp(12px, 1.4vmin, 18px);
    }
}

/*#region Stock Tabs por tipo (Partes Diárias) */
.stock-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(20, 20, 20, 0.75));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin: 0 0.25rem 0.5rem;
    padding: 0.45rem 0.25rem;
    border-radius: var(--stock-radius);
}

.stock-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stock-tab {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    color: var(--stock-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.45rem;
    line-height: 1;
    padding: 0.45rem 0.85rem;
    transition: background var(--stock-transition),
                border-color var(--stock-transition),
                color var(--stock-transition),
                transform var(--stock-transition);
    white-space: nowrap;
}

.stock-tab:hover {
    background: rgba(255, 255, 179, 0.06);
    border-color: rgba(255, 255, 179, 0.25);
    color: var(--yellow-light);
    transform: translateY(-1px);
}

.stock-tab.active {
    background: linear-gradient(180deg, rgba(255, 255, 179, 0.18), rgba(255, 255, 179, 0.08));
    border-color: var(--yellow-light);
    color: var(--yellow-light);
    box-shadow: 0 0 0 1px rgba(255, 255, 179, 0.15) inset,
                0 4px 12px rgba(0, 0, 0, 0.35);
}

.stock-tab__icon {
    font-size: 0.95rem;
    opacity: 0.95;
}

.stock-tab__label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16ch;
}

.stock-tab__count {
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.1rem 0.45rem;
}

.stock-tab.active .stock-tab__count {
    background: var(--yellow-light);
    color: #1a1a1a;
}

@media (max-width: 575.98px) {
    .stock-tab {
        flex: 1 1 calc(50% - 0.4rem);
        justify-content: center;
    }

    .stock-tab__label {
        max-width: none;
    }
}
/*#endregion*/

/*#region Partes Diárias - Modern UI (refresh 2026)
   Escopo: somente containers com a classe .pd-modern.
   Demais telas que usam .stock-* (ex.: Estoque) permanecem inalteradas. */
.pd-modern {
    --pd-accent: #FFA17F;
    --pd-accent-strong: #ff7d56;
    --pd-accent-soft: rgba(255, 161, 127, 0.14);
    --pd-accent-soft-2: rgba(255, 161, 127, 0.22);
    --pd-accent-glow: rgba(255, 161, 127, 0.38);
    --pd-surface: linear-gradient(180deg, rgba(36, 36, 36, 0.92) 0%, rgba(26, 26, 26, 0.96) 100%);
    --pd-surface-hover: linear-gradient(180deg, rgba(42, 42, 42, 0.96) 0%, rgba(30, 30, 30, 0.98) 100%);
    --pd-border: rgba(255, 255, 255, 0.06);
    --pd-border-hover: rgba(255, 161, 127, 0.45);
    --pd-text: #f1f1f1;
    --pd-text-muted: rgba(220, 220, 220, 0.55);
    --pd-radius-lg: 16px;
    --pd-radius: 12px;
    --pd-radius-sm: 8px;
    --pd-shadow-1: 0 6px 22px -10px rgba(0, 0, 0, 0.55);
    --pd-shadow-2: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 161, 127, 0.15);
}

/* Sidebar (filtros) — sticky ocupando a altura da viewport */
.pd-modern #dropdowns-content {
    align-self: flex-start;
    position: sticky;
    top: 51px; /* navbar fixed-top */
    height: calc(100vh - 51px);
    max-height: calc(100vh - 51px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pd-modern #dropdowns-content.hidden-side-bar {
    height: calc(100vh - 51px);
    max-height: calc(100vh - 51px);
}

.pd-modern #navigation {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.35) transparent;
}

.pd-modern #navigation::-webkit-scrollbar {
    width: 6px;
}

.pd-modern #navigation::-webkit-scrollbar-track {
    background: transparent;
}

.pd-modern #navigation::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.3);
    border-radius: 3px;
}

.pd-modern #navigation::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.5);
}

/* Sidebar: título e divisor */
.pd-modern #navigation h3 {
    background: linear-gradient(90deg, var(--pd-accent), var(--pd-accent-strong));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.01em;
    font-size: 1.15rem !important;
    font-weight: 700;
    margin: 0 !important;
}

.pd-modern #navigation .hr {
    background: linear-gradient(90deg, transparent, var(--pd-accent-soft-2), transparent);
    border: 0;
    height: 1px;
    opacity: 0.8;
    margin: 0.5rem 0 !important;
}

/* Form interno: flex column ocupa toda a altura da sidebar */
.pd-modern #navigation > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
    padding: 0.35rem !important;
    overflow: visible !important;
}

/* O segundo <hr> separa filtros das exportações — puxa o bloco de exportação
   pro rodapé da sidebar, aproveitando o espaço vertical em telas grandes. */
.pd-modern #navigation > form > hr.hr + hr.hr,
.pd-modern #navigation > form > hr.hr:nth-of-type(2) {
    margin-top: auto !important;
    margin-bottom: 0.5rem !important;
}

/* Espaçamento entre campos mais compacto */
.pd-modern #navigation .mb-2 {
    margin-bottom: 0.45rem !important;
}

/* Datetimepickers — input-group unificado com label estática no topo (sem
   animação do form-floating, que estava conflitando com a máscara do input). */
.pd-modern #navigation #datetimepickerI,
.pd-modern #navigation #datetimepickerF {
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    border-radius: var(--pd-radius-sm) !important;
    min-height: 52px !important;
    overflow: hidden;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern #navigation #datetimepickerI:focus-within,
.pd-modern #navigation #datetimepickerF:focus-within {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
}

.pd-modern #navigation .form-floating {
    display: block !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Input: 50px de altura, padding-top reserva espaço pra label fixa em cima */
.pd-modern #navigation .form-floating > .form-control {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
    padding: 1.35rem 0.75rem 0.3rem !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    background: #00000000 !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Label sempre fixa no topo, pequena/uppercase — sem transform */
.pd-modern #navigation .form-floating > label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 0.4rem 0.75rem 0 !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    color: rgba(220, 220, 220, 0.5) !important;
    transform: none !important;
    transition: color 0.18s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Foco/preenchido — label coral, sem transform */
.pd-modern #navigation .form-floating > .form-control:focus ~ label,
.pd-modern #navigation .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--pd-accent) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Ícone do calendário no lado direito */
.pd-modern #navigation .input-group .input-group-text {
    padding: 0 0.85rem !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgb(55 50 49) !important;
    color: rgba(220, 220, 220, 0.5) !important;
    border-radius: 0 !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    transition: background 0.18s ease, color 0.18s ease;
    cursor: pointer;
}

.pd-modern #navigation .input-group .input-group-text:hover {
    background: var(--pd-accent-soft) !important;
    color: var(--pd-accent) !important;
}

.pd-modern #navigation .input-group:focus-within .input-group-text {
    color: var(--pd-accent) !important;
}

/* Labels acima dos multi-selects (Operador, Equipamento, etc.) — escopadas
   pra .mb-2 > label direto, evitando pegar a label dentro do .form-floating. */
.pd-modern #navigation .mb-2 > label.form-label {
    font-size: 0.7rem !important;
    margin-bottom: 0.18rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(220, 220, 220, 0.55);
    opacity: 1 !important;
    font-weight: 600;
}

/* Select2 multi-select mais compacto dentro da sidebar */
/* pd-sf-multi — wrapper para multi-selects Select2 com label coral */
.pd-modern #navigation .pd-sf-multi {
    margin-bottom: 0.45rem;
}
.pd-modern #navigation .pd-sf-multi > label {
    display: block;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--pd-accent) !important;
    margin-bottom: 0.3rem;
}

.pd-modern #navigation .select2-container--default .select2-selection--multiple {
    min-height: 50px !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: var(--pd-radius-sm) !important;
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern #navigation .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-size: 0.82rem !important;
    padding: 0.1rem 0 !important;
    min-height: 28px;
    color: #e8e0d8 !important;
    background: transparent !important;
}

.pd-modern #navigation .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--pd-accent-soft) !important;
    border: 1px solid rgba(255, 161, 127, 0.3) !important;
    color: var(--pd-accent) !important;
    font-size: 0.74rem !important;
    padding: 0.08rem 0.5rem !important;
    margin: 2px 2px 0 0 !important;
    border-radius: 999px !important;
}

.pd-modern #navigation .select2-selection__choice__display {
    color: var(--pd-accent) !important;
    padding-left: 1.1rem !important;
}

.pd-modern #navigation .select2-selection__choice__remove {
    color: var(--pd-accent) !important;
}

.pd-modern #navigation .select2-selection__choice__remove:hover {
    background-color: rgba(255, 161, 127, 0.25) !important;
    color: #fff !important;
}

/* Foco nos selects abre com borda coral */
.pd-modern #navigation .select2-container--default.select2-container--focus .select2-selection--multiple,
.pd-modern #navigation .select2-container--default .select2-selection--multiple:focus-within {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
}

/* Botões da sidebar (Visualizar / Exportar) mais compactos */
.pd-modern #navigation #visualizar,
.pd-modern #navigation #export,
.pd-modern #navigation #exportDetailedId {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.82rem;
    border-radius: var(--pd-radius-sm);
}

/* ── pd-sf: campo de busca autocomplete estilizado como cs-fixed select ── */
.pd-modern #navigation .pd-sf {
    position: relative;
    display: block;
}

/* Padding à direita reserva espaço para o chevron */
.pd-modern #navigation .pd-sf .form-floating > .form-control {
    padding-right: 2.2rem !important;
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
}

/* Borda coral + glow quando em foco */
.pd-modern #navigation .pd-sf .form-floating > .form-control:focus {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
}

/* Label sempre coral — visível como "título" do campo ao estilo cs-fixed */
.pd-modern #navigation .pd-sf .form-floating > label {
    color: var(--pd-accent) !important;
    opacity: 1 !important;
}

/* Chevron: seta fina no lado direito do campo */
.pd-sf-chev {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 161, 127, 0.38);
    font-size: 9px;
    pointer-events: none;
    transition: transform 0.22s ease, color 0.18s ease;
    z-index: 3;
}

/* Quando o campo recebe foco: chevron vira e fica coral */
.pd-modern #navigation .pd-sf:focus-within .pd-sf-chev {
    color: var(--pd-accent);
    transform: translateY(-50%) rotate(180deg);
}

/* Borda coral no container quando em foco (reforça foco no campo inteiro) */
.pd-modern #navigation .pd-sf:focus-within .form-floating > .form-control {
    border-color: var(--pd-accent) !important;
}

/* Mensagem de erro abaixo do campo */
.pd-sf-error {
    display: block;
    font-size: 0.72rem;
    margin-top: 0.2rem;
    padding-left: 0.25rem;
}

/* form-select dentro de pd-sf — mesma aparência dos inputs autocomplete */
.pd-modern #navigation .pd-sf .form-floating > .form-select {
    height: 50px !important;
    min-height: 50px !important;
    padding: 1.35rem 2.2rem 0.3rem 0.75rem !important;
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    border-radius: var(--pd-radius-sm) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}

.pd-modern #navigation .pd-sf .form-floating > .form-select:focus {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
}

.pd-modern #navigation .pd-sf .form-floating > .form-select option {
    background: #1e1b18;
    color: #e8e0d8;
}

/* Toolbar superior do dashboard */
.pd-modern .stock-items-toolbar {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.65) 0%, rgba(24, 24, 24, 0.45) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-1);
    padding: 0.85rem 1.1rem;
    margin: 0.25rem 0.35rem 0.85rem;
    flex-wrap: wrap;
    align-items: center;
}

.pd-modern .stock-items-toolbar__title {
    color: #fff;
    font-weight: 700;
    position: relative;
    padding-left: 0.95rem;
}

.pd-modern .stock-items-toolbar__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 72%;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pd-accent), var(--pd-accent-strong));
    box-shadow: 0 0 14px var(--pd-accent-glow);
}

.pd-modern .stock-items-toolbar .stock-badge--muted {
    background: var(--pd-accent-soft);
    color: var(--pd-accent);
    border: 1px solid rgba(255, 161, 127, 0.25);
}

/* Tabs por tipo de equipamento */
.pd-modern .stock-tabs-wrap {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.85) 0%, rgba(22, 22, 22, 0.55) 100%);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: 0.55rem 0.6rem;
    margin: 0 0.35rem 0.85rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pd-modern .stock-tab {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--pd-border);
    color: var(--pd-text-muted);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-modern .stock-tab:hover {
    background: var(--pd-accent-soft);
    border-color: rgba(255, 161, 127, 0.4);
    color: var(--pd-accent);
    transform: translateY(-1px);
}

.pd-modern .stock-tab.active {
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%) !important;
    border-color: transparent;
    color: #1a1a1a !important;
    box-shadow: 0 8px 22px -6px var(--pd-accent-glow), 0 0 0 1px rgba(255, 161, 127, 0.25) inset;
}

.pd-modern .stock-tab__count {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-weight: 700;
}

.pd-modern .stock-tab.active .stock-tab__count {
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
}

/* Cards de Parte Diária */
.pd-modern .stock-item-card {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-left: none;
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow-1);
    margin: 0 0.35rem 0.75rem;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

/* Faixa de acento no topo */
.pd-modern .stock-item-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--pd-accent) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease, height 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.pd-modern .stock-item-card:hover {
    background: var(--pd-surface-hover);
    border-color: var(--pd-border-hover);
    box-shadow: var(--pd-shadow-2);
    transform: translateY(-2px);
}

.pd-modern .stock-item-card:hover::before {
    opacity: 1;
    height: 3px;
}

/* Status: editada/adicionada usam a faixa superior colorida */
.pd-modern .stock-item-card--edited::before {
    background: linear-gradient(90deg, transparent 0%, var(--stock-warning) 50%, transparent 100%);
    opacity: 0.95;
    height: 3px;
}

.pd-modern .stock-item-card--added::before {
    background: linear-gradient(90deg, transparent 0%, var(--stock-info) 50%, transparent 100%);
    opacity: 0.95;
    height: 3px;
}

.pd-modern .stock-item-card--edited {
    border-top: 0;
}

.pd-modern .stock-item-card--alert::before {
    background: linear-gradient(90deg, transparent 0%, var(--stock-danger) 50%, transparent 100%);
    opacity: 0.95;
    height: 3px;
}

/* Header (linha principal com equipamento + dados) */
.pd-modern .stock-item-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: rgba(255, 255, 255, 0.018);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.95rem 1.1rem;
    gap: 0.65rem 1.3rem;
}

.pd-modern .stock-item-card__grid {
    padding: 0.85rem 1.1rem;
    gap: 0.65rem 1.3rem;
}

.pd-modern .stock-item-field {
    flex: 1 1 130px;
    min-width: 0;
    text-align: center;
}

/* Hero (imagem + nome + operador) */
.pd-modern .stock-item-field--primary {
    flex: 2 1 180px;
    text-align: left;
}

.pd-modern .stock-item-field--actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .pd-modern .stock-item-field {
        flex: 1 1 calc(50% - 0.65rem);
    }
    .pd-modern .stock-item-field--primary {
        flex: 1 1 100%;
    }
    .pd-modern .stock-item-field--actions {
        flex: 1 1 100%;
        justify-content: flex-start !important;
        margin-left: 0;
    }
}

/* Rodapé de ações dos cards — fora do grid para nunca cortar botões */
.pd-modern .stock-item-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.3rem 1.1rem 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

@media (max-width: 575.98px) {
    .pd-modern .stock-item-card__footer {
        justify-content: flex-start;
    }
}

.pd-modern .pd-hero {
    align-items: center;
    text-align: left;
}

.pd-modern .pd-hero__media {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.pd-modern .stock-item-card:hover .pd-hero__media {
    transform: scale(1.04);
}

.pd-modern .pd-hero__media .vehicle-image {
    max-height: 48px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    transition: filter 0.25s ease;
}

.pd-modern .stock-item-card:hover .pd-hero__media .vehicle-image {
    filter: drop-shadow(0 6px 14px rgba(255, 161, 127, 0.35));
}

.pd-modern .pd-hero__info {
    min-width: 0;
    flex: 1 1 auto;
}

.pd-modern .pd-hero__meta {
    color: var(--pd-text-muted);
    font-size: 0.82rem;
}

.pd-modern .pd-hero__sep {
    color: var(--pd-accent);
    opacity: 0.7;
    margin: 0 0.2rem;
}

.pd-modern .pd-hero__check .pd-select.form-check-input {
    width: 18px;
    height: 18px;
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pd-modern .pd-select.form-check-input:checked {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
}

.pd-modern .pd-select.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
    border-color: var(--pd-accent);
}

/* Labels e valores */
.pd-modern .stock-item-field {
    align-items: flex-start;
    text-align: left;
}

.pd-modern .stock-item-field__label {
    color: var(--pd-text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pd-modern .stock-item-field__value {
    color: var(--pd-text);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
}

.pd-modern .stock-item-field__value--strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.2;
}

/* Índices: campos de métrica do topo do card centralizados (o hero
   imagem+nome continua alinhado à esquerda). */
.pd-modern .stock-item-card--indice .stock-item-card__header .stock-item-field:not(.stock-item-field--primary),
.pd-modern .stock-item-card--indice .stock-item-card__grid .stock-item-field,
.pd-modern .indice-turno .stock-item-card__grid .stock-item-field {
    align-items: center;
    text-align: center;
}

/* Índices: layout responsivo do card — o nome (que pode ser longo) ocupa
   uma faixa de título própria e as métricas fluem numa grade auto-fit
   uniforme, sem disputar espaço horizontal. Vale para Equipamentos e
   Operadores; escopo isolado em .stock-item-card--indice. */
.pd-modern .stock-item-card--indice .stock-item-card__header {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 0.7rem 1rem;
    align-items: center;
}

.pd-modern .stock-item-card--indice .stock-item-card__header .stock-item-field--primary {
    grid-column: 1 / -1;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--pd-border);
}

.pd-modern .stock-item-card--indice .pd-hero__info {
    min-width: 0;
}

.pd-modern .stock-item-card--indice .pd-hero__info .stock-item-field__value--strong {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.18;
}

/* Métricas do card e do turno: largura mínima menor em telas estreitas */
@media (max-width: 575.98px) {
    .pd-modern .stock-item-card--indice .stock-item-card__header,
    .pd-modern .stock-item-card--indice .stock-item-card__grid,
    .pd-modern .indice-turno .stock-item-card__grid {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 0.55rem 0.6rem;
    }

    .pd-modern .stock-item-card--indice .stock-item-field__value,
    .pd-modern .indice-turno .stock-item-field__value {
        font-size: 0.86rem;
    }

    .pd-modern .stock-item-card--indice .stock-item-field__label,
    .pd-modern .indice-turno .stock-item-field__label {
        font-size: 0.6rem;
    }
}

/* ============================================================
   Família pd-modern — alinhamento ao Guia Visual MetalAr/NIMO.
   Assinatura editorial: títulos em Georgia serif + ícone-acento
   com glow coral (--nm05), exatamente como já fazem .matricula-page
   e .equipamento-page (matricula-ui.css / equipamento-ui.css).
   Vale para toda a família pd-modern (Partes Diárias, APR, Índices,
   Viagens, Qualidade, etc.). Paleta preservada (coral + cinzas).
   ============================================================ */

/* Título da sidebar em serif, mantendo o gradiente coral */
.pd-modern #navigation h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Título da toolbar em serif #fff com ícone em acento + glow */
.pd-modern .stock-items-toolbar__title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.01em;
}

.pd-modern .stock-items-toolbar__title i {
    color: var(--pd-accent);
    filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.5));
    opacity: 1;
}

/* ---- Refinamentos específicos da tela de Índices (.indice-page) ---- */

/* Faixa de cabeçalho das tabelas: ícone também em acento com glow */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) > .border-bottom i {
    color: var(--pd-accent) !important;
    filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.45));
    opacity: 1 !important;
}

/* Hover de linha da tabela em acento (mais presente, conforme o guia) */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) .table tbody tr:hover > * {
    background-color: rgba(255, 161, 127, 0.14) !important;
    color: #fff !important;
}

/* Faixa de KPIs ganha um leve título serif na borda-acento do ícone */
.pd-modern.indice-page .indice-kpi__icon {
    box-shadow: 0 0 14px rgba(255, 161, 127, 0.18);
}

/* ============================================================
   Índices — MODO TABELA refinado conforme o Guia Visual.
   Chevron de expandir e ícones de ação em acento coral; tabelas
   de detalhe (linhas-filhas do DataTables) viram sub-painéis
   escuros com valores neutros (sem o amarelo legado); setas de
   ordenação ativas em --nm05. Escopo .indice-page.
   ============================================================ */

/* Coluna de expandir: chevron em acento + célula clicável com hover */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td.details-control,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td.employee-indice {
    cursor: pointer;
    width: 44px;
    text-align: center;
    transition: background-color 0.15s ease;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td.details-control:hover,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td.employee-indice:hover {
    background-color: var(--pd-accent-soft) !important;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td.details-control i,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td.employee-indice i {
    color: var(--pd-accent) !important;
    opacity: 1 !important;
}

/* Tabela de detalhe (linha-filha) — sub-painel escuro do guia */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    overflow: hidden;
    margin: 0.4rem 0;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table thead th {
    background: rgba(28, 28, 28, 0.96) !important;
    color: #ececec !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pd-border) !important;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table tbody td {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Valores das células de detalhe: neutros (substitui o amarelo legado) */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table .yellow-light,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table tbody td {
    color: rgba(220, 220, 220, 0.85) !important;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table tbody tr:hover > * {
    background-color: var(--pd-accent-soft) !important;
    color: #fff !important;
}

/* Tabelas pds/tempos (table-bordered): bordas suaves no lugar das duras */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table.table-bordered,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table.table-bordered > :not(caption) > * > * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Ícones de ação dentro do detalhe → acento coral com hover */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table a i,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) .btn-expand-pds i,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) .btn-expand-status i {
    color: var(--pd-text-muted) !important;
    opacity: 1 !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) td table a:hover i,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) .btn-expand-pds:hover i,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) .btn-expand-status:hover i {
    color: var(--pd-accent) !important;
    transform: translateY(-1px);
}

/* Setas de ordenação do DataTables ativas em acento coral */
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) table.dataTable thead th.sorting_asc,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) table.dataTable thead th.sorting_desc {
    color: #fff;
}

.pd-modern.indice-page :is(#tableView, #tableViewEmployee) table.dataTable thead th.sorting_asc::before,
.pd-modern.indice-page :is(#tableView, #tableViewEmployee) table.dataTable thead th.sorting_desc::after {
    opacity: 1 !important;
    color: var(--pd-accent) !important;
}

/* ============================================================
   Índices — MODAIS (cronologia / tempos) conforme o Guia Visual.
   Vidro escuro translúcido (raio 16, sombra forte), título serif
   coral com ícone + glow, botão fechar coral, tabela interna no
   tema do guia. Escopo .indice-modal (no .modal-content).
   ============================================================ */
.indice-modal {
    background: rgba(18, 18, 18, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
}

.indice-modal .modal-header {
    align-items: center;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.indice-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.18rem;
    color: #ffa17f;
}

.indice-modal .modal-title .pd-modal-icon {
    color: #ffa17f;
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 161, 127, 0.5));
}

.indice-modal .pd-modal-close {
    color: #ffa17f;
}

.indice-modal .pd-modal-close:hover,
.indice-modal .pd-modal-close:focus-visible {
    background: rgba(255, 161, 127, 0.16);
    color: #ffa17f;
}

.indice-modal .modal-body {
    padding: 0.9rem 1.2rem 1.2rem;
}

/* Tabela interna do modal — cabeçalho coral, zebra discreta, hover acento */
.indice-modal table.pd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.indice-modal table.pd-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(20, 20, 20, 0.98);
    color: rgba(255, 161, 127, 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.indice-modal table.pd-table tbody td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(235, 235, 235, 0.82);
    font-size: 0.85rem;
}

.indice-modal table.pd-table tbody td.pd-table__cell-strong {
    color: #fff;
    font-weight: 600;
}

.indice-modal table.pd-table tbody td.pd-table__cell-muted {
    color: rgba(220, 220, 220, 0.6);
    font-variant-numeric: tabular-nums;
}

.indice-modal table.pd-table tbody td.pd-table__cell-num {
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.indice-modal table.pd-table tbody tr:nth-of-type(odd) td {
    background: rgba(255, 255, 255, 0.025);
}

.indice-modal table.pd-table tbody tr:hover td {
    background: rgba(255, 161, 127, 0.14);
    color: #fff;
}

.indice-modal table.pd-table tbody tr:last-child td {
    border-bottom: none;
}

/* Estado vazio do modal */
.indice-modal-empty {
    text-align: center;
    color: rgba(220, 220, 220, 0.55);
    padding: 2.2rem 1rem;
}

.indice-modal-empty i {
    display: block;
    font-size: 2.2rem;
    color: #ffa17f;
    filter: drop-shadow(0 0 14px rgba(255, 161, 127, 0.5));
    margin-bottom: 0.6rem;
}

/* Índices: faixa de KPIs (resumo do tipo selecionado) */
.pd-modern .indice-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    margin: 0.25rem 0.35rem 0.75rem;
}

.pd-modern .indice-kpi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: 0.7rem 0.9rem;
    box-shadow: var(--pd-shadow-1);
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.pd-modern .indice-kpi:hover {
    border-color: var(--pd-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--pd-shadow-2);
}

.pd-modern .indice-kpi__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--pd-accent-soft);
    color: var(--pd-accent);
    font-size: 1.05rem;
}

.pd-modern .indice-kpi__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.pd-modern .indice-kpi__label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pd-text-muted);
}

.pd-modern .indice-kpi__value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.pd-modern .indice-kpi__value small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pd-text-muted);
    margin-left: 0.12rem;
}

/* Índices: alternância Cards/Tabela combinando com a sidebar escura */
.pd-modern .custom-toggle-wrapper {
    width: 62px;
    height: 32px;
}

.pd-modern .custom-toggle-label {
    background-color: rgba(15, 15, 15, 0.55);
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.pd-modern .custom-toggle-label .toggle-thumb {
    width: 24px;
    height: 24px;
    top: 3px;
    left: 4px;
    font-size: 13px;
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%) !important;
    color: #1a1a1a;
    box-shadow: 0 3px 8px -2px var(--pd-accent-glow);
}

.pd-modern .custom-toggle-checkbox:checked + .custom-toggle-label .toggle-thumb {
    left: 34px;
}

/* Índices: sub-card de turno (conteúdo expandido do card) */
.pd-modern .indice-turno {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    margin: 0 0 0.6rem;
    overflow: hidden;
}

.pd-modern .indice-turno__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.55rem 0.85rem;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--pd-border);
}

/* Índices: painéis aninhados (apontamentos / tempos) no turno do operador */
.pd-modern .indice-subpanel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    margin: 0 0 0.6rem;
}

.pd-modern .indice-subpanel table {
    margin-bottom: 0;
}

/* Índices: avatar do operador no card (substitui a imagem do equipamento) */
.pd-modern .indice-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pd-accent-soft);
    color: var(--pd-accent);
    font-size: 1.15rem;
    border: 1px solid rgba(255, 161, 127, 0.25);
}

/* ============================================================
   Índices — RESPONSIVIDADE MOBILE (completa).
   No celular tudo empilha e a PÁGINA rola naturalmente: o
   scroll interno do #body (max-height: calc(100vh - N)) era o
   que cortava a lista. Sem overflow horizontal, sem truncar.
   Tema escuro e identidade coral preservados.
   ============================================================ */

/* Rótulos das métricas podem quebrar em 2 linhas (evita overflow
   horizontal em colunas estreitas — antes eram nowrap). */
.pd-modern.indice-page .stock-item-card--indice .stock-item-field__label,
.pd-modern.indice-page .indice-turno .stock-item-field__label {
    white-space: normal;
}

/* ---- Tablet / phone grande (drawer já ativo em <=991) ---- */
@media (max-width: 767.98px) {
    /* O #dashboard-content vira o ÚNICO container de scroll do mobile:
       abas + KPIs + toolbar + lista rolam juntos (o body do app é
       overflow:hidden, então é aqui que o scroll precisa existir). */
    .pd-modern.indice-page #dashboard-content {
        height: calc(100vh - 62px) !important;
        max-height: calc(100vh - 62px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    /* A lista não tem mais scroll próprio — flui dentro do dashboard */
    .pd-modern.indice-page #dashboard-content #body {
        max-height: none !important;
        overflow: visible !important;
    }
    /* Trava rolagem horizontal acidental do conteúdo */
    .pd-modern.indice-page .tabela-content {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* ---- Smartphones ---- */
@media (max-width: 575.98px) {
    /* Abas: botão Filtros em linha própria; abas como chips que quebram */
    .pd-modern.indice-page .stock-tabs-wrap {
        position: static;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.5rem 0.45rem;
    }
    .pd-modern.indice-page .stock-tabs-wrap > .pd-filters-toggle {
        order: -1;
        flex: 1 1 100%;
        justify-content: center;
    }
    .pd-modern.indice-page .stock-tabs-wrap > .stock-tabs {
        flex: 1 1 100%;
        width: 100%;
    }
    .pd-modern.indice-page .stock-tab {
        flex: 0 1 auto;
        justify-content: flex-start;
        min-width: 0;
    }
    .pd-modern.indice-page .stock-tab__label {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    /* KPIs: 2 por linha, compactos */
    .pd-modern.indice-page .indice-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin: 0.25rem 0.25rem 0.6rem;
    }
    .pd-modern.indice-page .indice-kpi {
        padding: 0.6rem 0.65rem;
        gap: 0.5rem;
    }
    .pd-modern.indice-page .indice-kpi__icon {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
        border-radius: 9px;
    }
    .pd-modern.indice-page .indice-kpi__value {
        font-size: 1.08rem;
    }
    .pd-modern.indice-page .indice-kpi__label {
        font-size: 0.6rem;
    }

    /* Toolbar empilha: título / controle / busca em linhas próprias */
    .pd-modern.indice-page .stock-items-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.7rem 0.8rem;
        margin: 0.25rem 0.25rem 0.6rem;
    }
    .pd-modern.indice-page .stock-items-toolbar > .ms-auto {
        margin-left: 0 !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.6rem;
    }
    .pd-modern.indice-page .stock-items-toolbar__search {
        flex: 1 1 100%;
        width: 100%;
    }
    .pd-modern.indice-page .stock-items-toolbar__search .stock-search {
        width: 100%;
        min-width: 0;
    }

    /* Cards e faixas usam a largura quase total */
    .pd-modern.indice-page .stock-item-card {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    /* Métricas do card/turno: colunas mínimas menores para caber sempre */
    .pd-modern.indice-page .stock-item-card--indice .stock-item-card__header,
    .pd-modern.indice-page .indice-turno .stock-item-card__grid {
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
        gap: 0.5rem;
    }

    /* Sub-card de turno: cabeçalho empilha (rótulo + botões) */
    .pd-modern.indice-page .indice-turno__header {
        gap: 0.45rem 0.6rem;
    }
}

/* ---- Smartphones muito estreitos (<=360px) ---- */
@media (max-width: 359.98px) {
    .pd-modern.indice-page .indice-kpis {
        grid-template-columns: 1fr;
    }
    .pd-modern.indice-page .stock-tab {
        flex: 1 1 100%;
    }
}

/* Badges de status */
.pd-modern .stock-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    padding: 0.22rem 0.65rem;
    line-height: 1;
}

.pd-modern .stock-badge--warning {
    background: rgba(255, 210, 127, 0.12);
    border-color: rgba(255, 210, 127, 0.32);
    color: var(--stock-warning);
}

.pd-modern .stock-badge--info {
    background: rgba(141, 208, 255, 0.12);
    border-color: rgba(141, 208, 255, 0.32);
    color: var(--stock-info);
}

/* Botões de ação (ícones) */
.pd-modern .stock-item-field--actions {
    align-items: center !important;
    justify-content: flex-end !important;
}

.pd-modern .stock-action {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(220, 220, 220, 0.7);
    width: 34px;
    height: 34px;
    border-radius: 9px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern .stock-action:hover {
    background: var(--pd-accent-soft);
    border-color: var(--pd-accent);
    color: var(--pd-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px var(--pd-accent-glow);
}

.pd-modern .stock-action--info:hover {
    background: rgba(141, 208, 255, 0.16);
    border-color: var(--stock-info);
    color: var(--stock-info);
    box-shadow: 0 6px 16px -4px rgba(141, 208, 255, 0.4);
}

/* Perigo e sucesso precisam de regra PRÓPRIA aqui: ".pd-modern .stock-action" acima já define
   color, e vence o ".stock-action--danger" solto por especificidade — sem isto o botão de
   excluir sai cinza igual aos outros (é o que acontecia com o "Excluir Ciclo" da tela de
   Ciclos, que usa o mesmo skin). */
.pd-modern .stock-action--danger {
    color: var(--stock-danger);
}

.pd-modern .stock-action--danger:hover {
    background: rgba(255, 138, 122, 0.16);
    border-color: var(--stock-danger);
    color: var(--stock-danger);
    box-shadow: 0 6px 16px -4px rgba(255, 138, 122, 0.4);
}

.pd-modern .stock-action--success {
    color: var(--stock-success);
}

.pd-modern .stock-action--success:hover {
    background: var(--stock-success-bg);
    border-color: var(--stock-success);
    color: var(--stock-success);
    box-shadow: 0 6px 16px -4px rgba(126, 217, 154, 0.4);
}

/* Botões principais do toolbar (Editar selecionados / Limpar) */
.pd-modern .stock-btn-primary {
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%) !important;
    border: none;
    color: #1a1a1a !important;
    font-weight: 700;
    padding: 0.5rem 1.1rem;
    border-radius: var(--pd-radius-sm);
    box-shadow: 0 6px 18px -5px var(--pd-accent-glow);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern .stock-btn-primary:hover:not(:disabled):not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -5px var(--pd-accent-glow);
    filter: brightness(1.06);
}

.pd-modern .stock-btn-primary:disabled,
.pd-modern .stock-btn-primary[disabled] {
    background: rgba(255, 161, 127, 0.18) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none;
}

.pd-modern .stock-btn-secondary {
    background: transparent;
    border: 1px solid var(--pd-border);
    color: var(--pd-text);
    border-radius: var(--pd-radius-sm);
    padding: 0.5rem 0.95rem;
    font-weight: 500;
}

.pd-modern .stock-btn-secondary:hover {
    background: var(--pd-accent-soft);
    border-color: var(--pd-accent);
    color: var(--pd-accent);
}

/* Sidebar: botão Visualizar com gradiente coral */
.pd-modern #navigation #visualizar.stock-btn-primary {
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.85rem;
    border-radius: var(--pd-radius-sm);
    box-shadow: 0 6px 18px -5px var(--pd-accent-glow);
}

.pd-modern #navigation #visualizar.stock-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Campo de busca */
.pd-modern .stock-search {
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    color: #fff;
    padding: 0.55rem 0.85rem 0.55rem 2.1rem;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern .stock-search:focus {
    background: rgba(15, 15, 15, 0.88);
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
    outline: none;
}

.pd-modern .stock-search-wrap:focus-within .stock-search-icon {
    color: var(--pd-accent);
}

/* Sidebar: labels e inputs ganham foco coral */
.pd-modern #navigation .form-control:focus,
.pd-modern #navigation .form-select:focus {
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 0.2rem var(--pd-accent-soft);
}

.pd-modern #navigation .form-floating > label {
    color: rgba(220, 220, 220, 0.65);
}

/* Hint de seleção */
.pd-modern #pd-selected-type-hint {
    color: var(--pd-accent);
    font-weight: 600;
}

/* ===== Tabela (visualização tabela) - tema coral moderno =====
   Sobrescreve as regras globais (.table th/td, th/td borders, .yellow-light-c)
   apenas dentro de .pd-modern :is(#tableView, #tableViewEmployee). */
.pd-modern :is(#tableView, #tableViewEmployee).pd-table-view {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.92) 0%, rgba(22, 22, 22, 0.96) 100%);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    overflow: hidden;
    padding: 0;
    margin: 0.5rem 0.35rem;
    box-shadow: var(--pd-shadow-1);
}

/* DataTable wrapper */
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_wrapper {
    color: var(--pd-text);
    padding: 0.85rem 1rem 0.65rem;
    font-size: 0.85rem;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_length,
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_filter {
    color: rgba(220, 220, 220, 0.6);
    font-size: 0.82rem;
    margin-bottom: 0.55rem;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_length label,
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_filter label {
    color: rgba(220, 220, 220, 0.6) !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_length select {
    background: rgba(15, 15, 15, 0.6) !important;
    border: 1px solid var(--pd-border) !important;
    color: #fff !important;
    border-radius: var(--pd-radius-sm) !important;
    padding: 0.3rem 0.55rem !important;
    cursor: pointer;
    font-size: 0.82rem;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_length select:focus {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
    outline: none;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_filter input {
    background: rgba(15, 15, 15, 0.6) !important;
    border: 1px solid var(--pd-border) !important;
    color: #fff !important;
    border-radius: var(--pd-radius-sm) !important;
    padding: 0.4rem 0.7rem !important;
    margin-left: 0.45rem !important;
    font-size: 0.84rem;
    min-width: 220px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_filter input:focus {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
    outline: none;
}

/* Tabela */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: transparent !important;
    color: var(--pd-text) !important;
}

/* Cabeçalho */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th {
    background: rgba(20, 20, 20, 0.96) !important;
    color: rgba(255, 161, 127, 0.85) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.7rem 0.7rem !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 161, 127, 0.25) !important;
    text-align: left !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 3;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.text-center {
    text-align: center !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.text-end {
    text-align: right !important;
}

/* Células */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody td {
    background: transparent !important;
    color: rgba(235, 235, 235, 0.78) !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    padding: 0.55rem 0.7rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody td.text-center {
    text-align: center !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody td.text-end {
    text-align: right !important;
}

/* Campos primários (matrícula, equipamento) com destaque */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody td.pd-table__cell-strong {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Data e similares mais discretos */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody td.pd-table__cell-muted {
    color: rgba(220, 220, 220, 0.6) !important;
    font-variant-numeric: tabular-nums;
}

/* Linha de parte diária EXCLUÍDA. Mesma leitura do .is-deleted-card dos cards (apagada + faixa
   vermelha), mas sem "opacity": a listra do table-striped já clareia a linha e o texto sumia.
   A faixa é box-shadow porque a borda do td é "none !important" na regra de célula acima; e o
   seletor repete tr.classe > td para vencer o "color !important" das células. */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr.pd-table__row--deleted > td {
    color: rgba(235, 235, 235, 0.42) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(220, 76, 76, 0.55);
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr.pd-table__row--deleted > td:first-child {
    box-shadow: inset 3px 0 0 0 rgba(220, 76, 76, 0.85);
}

/* Badges e botões da linha excluída não riscam (o traço atravessaria o ícone). */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr.pd-table__row--deleted > td .stock-badge,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr.pd-table__row--deleted > td .pd-tag,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr.pd-table__row--deleted > td .pd-table__action {
    text-decoration: none;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody td.pd-table__cell-num {
    color: #fff !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600 !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__dash {
    color: rgba(255, 255, 255, 0.18);
    font-size: 0.85rem;
}

/* Hover na linha */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr {
    transition: background 0.15s ease;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr:hover td {
    background: rgba(255, 161, 127, 0.07) !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr:hover .pd-table__cell-strong,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr:hover .pd-table__cell-num {
    color: #fff !important;
}

/* Zebrado mais discreto que o table-striped padrão do Bootstrap */
.pd-modern :is(#tableView, #tableViewEmployee) table.table-striped.pd-table > tbody > tr:nth-of-type(odd) > td {
    background: rgba(255, 255, 255, 0.012) !important;
    --bs-table-bg-type: transparent !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table-striped.pd-table > tbody > tr:nth-of-type(odd):hover > td {
    background: rgba(255, 161, 127, 0.07) !important;
}

/* Última linha sem borda */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Checkbox */
.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__col-check {
    width: 36px;
    padding-left: 0.9rem !important;
    padding-right: 0.4rem !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .form-check-input.pd-select {
    width: 17px;
    height: 17px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.pd-modern :is(#tableView, #tableViewEmployee) .form-check-input.pd-select:checked {
    background-color: var(--pd-accent) !important;
    border-color: var(--pd-accent) !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .form-check-input.pd-select:focus {
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
    border-color: var(--pd-accent);
}

/* Tags pequenas para Adicionado / Editado / Ciclo */
.pd-modern :is(#tableView, #tableViewEmployee) .pd-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-tag--info {
    background: rgba(141, 208, 255, 0.14);
    border-color: rgba(141, 208, 255, 0.32);
    color: var(--stock-info);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-tag--warning {
    background: rgba(255, 210, 127, 0.14);
    border-color: rgba(255, 210, 127, 0.32);
    color: var(--stock-warning);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-tag--success {
    background: rgba(111, 224, 140, 0.14);
    border-color: rgba(111, 224, 140, 0.32);
    color: var(--stock-success);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-tag--muted {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(220, 220, 220, 0.55);
}

/* Botões de ação na última coluna */
.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__col-actions {
    width: 1%;
    white-space: nowrap;
    padding-right: 0.9rem !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(220, 220, 220, 0.7) !important;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__action:hover {
    background: var(--pd-accent-soft) !important;
    border-color: var(--pd-accent) !important;
    color: var(--pd-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px var(--pd-accent-glow);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__action--info:hover {
    background: rgba(141, 208, 255, 0.16) !important;
    border-color: var(--stock-info) !important;
    color: var(--stock-info) !important;
    box-shadow: 0 4px 10px -3px rgba(141, 208, 255, 0.4);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__action--danger:hover {
    background: rgba(255, 138, 122, 0.16) !important;
    border-color: var(--stock-danger) !important;
    color: var(--stock-danger) !important;
    box-shadow: 0 4px 10px -3px rgba(255, 138, 122, 0.4);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__action--success:hover {
    background: var(--stock-success-bg) !important;
    border-color: var(--stock-success) !important;
    color: var(--stock-success) !important;
    box-shadow: 0 4px 10px -3px rgba(126, 217, 154, 0.4);
}

.pd-modern :is(#tableView, #tableViewEmployee) .pd-table__action i {
    font-size: 0.85rem !important;
    color: inherit !important;
    opacity: 1 !important;
}

/* Info + paginação */
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_info {
    color: rgba(220, 220, 220, 0.55) !important;
    font-size: 0.78rem !important;
    padding: 0.75rem 0 0 !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_paginate {
    padding: 0.75rem 0 0 !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_paginate .pagination {
    margin: 0;
    gap: 0.25rem;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_paginate .page-item .page-link {
    background: rgba(15, 15, 15, 0.55) !important;
    color: rgba(220, 220, 220, 0.7) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 7px !important;
    font-size: 0.82rem !important;
    padding: 0.35rem 0.7rem !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_paginate .page-item .page-link:hover {
    background: var(--pd-accent-soft) !important;
    color: var(--pd-accent) !important;
    border-color: var(--pd-accent) !important;
    box-shadow: none !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_paginate .page-item.active .page-link {
    background: linear-gradient(135deg, var(--pd-accent), var(--pd-accent-strong)) !important;
    color: #1a1a1a !important;
    border-color: transparent !important;
    font-weight: 700;
    box-shadow: 0 4px 12px -3px var(--pd-accent-glow) !important;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_paginate .page-item.disabled .page-link {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

/* Sort indicators no header */
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_asc,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_desc {
    cursor: pointer;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting::before,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting::after,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_asc::before,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_asc::after,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_desc::before,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_desc::after {
    color: rgba(255, 161, 127, 0.4) !important;
    opacity: 0.65;
}

.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_asc::before,
.pd-modern :is(#tableView, #tableViewEmployee) table.table.pd-table thead th.sorting_desc::after {
    color: var(--pd-accent) !important;
    opacity: 1;
}

/* Scroll body coral */
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollBody {
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.35) transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollBody::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.32);
    border-radius: 4px;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.55);
}

/* Header com scroll separado (DataTable em modo scrollY) */
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollHead,
.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollHeadInner {
    background: transparent;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollHead table {
    border-bottom: 2px solid rgba(255, 161, 127, 0.25);
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_scrollHead table.table.pd-table thead th {
    border-bottom: none !important;
}

/* Botão Filtros (toolbar) — visível só em tablet/mobile */
.pd-modern .pd-filters-toggle {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: var(--pd-accent-soft);
    border: 1px solid rgba(255, 161, 127, 0.35);
    border-radius: var(--pd-radius-sm);
    color: var(--pd-accent);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pd-modern .pd-filters-toggle:hover {
    background: rgba(255, 161, 127, 0.22);
    border-color: var(--pd-accent);
    transform: translateY(-1px);
}

.pd-modern .pd-filters-toggle__label {
    line-height: 1;
}

/* Backdrop do drawer (tablet) */
.pd-modern .pd-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 51px 0 0 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1028;
    opacity: 1;
    transition: opacity 0.28s ease;
    cursor: pointer;
}

/* Responsivo: cards em telas médias */
@media (max-width: 991.98px) {
    .pd-modern .stock-item-card__header {
        grid-template-columns: 1fr 1fr;
    }

    /* Sidebar vira drawer overlay no tablet */
    .pd-modern #dropdowns-content {
        position: fixed !important;
        top: 51px !important;
        left: 0 !important;
        width: min(320px, 88vw) !important;
        max-width: 88vw !important;
        height: calc(100vh - 51px) !important;
        max-height: calc(100vh - 51px) !important;
        z-index: 1029 !important;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 12px 0 36px -10px rgba(0, 0, 0, 0.6);
        margin: 0 !important;
        align-self: auto !important;
    }

    .pd-modern.pd-sidebar-closed #dropdowns-content {
        transform: translateX(-105%);
    }

    /* Backdrop só aparece em tablet */
    .pd-modern .pd-sidebar-backdrop {
        display: block;
    }

    .pd-modern.pd-sidebar-closed .pd-sidebar-backdrop {
        opacity: 0;
        pointer-events: none;
    }

    /* Dashboard ocupa a tela toda (sidebar é overlay) */
    .pd-modern #dashboard-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Container principal não precisa mais ser flex row */
    .pd-modern.main-content-side-menu {
        display: block !important;
    }

    /* Botão Filtros aparece */
    .pd-modern .pd-filters-toggle {
        display: inline-flex;
    }

    /* Toolbar mais compacta */
    .pd-modern .stock-items-toolbar {
        padding: 0.7rem 0.85rem;
    }

    .pd-modern .stock-items-toolbar__title {
        font-size: clamp(1rem, 1.1vw + 0.6rem, 1.3rem);
    }

    /* DataTable: respeita altura do viewport e ganha rolagem horizontal */
    .pd-modern :is(#tableView, #tableViewEmployee) {
        margin: 0 0.25rem;
    }

    .pd-modern .dataTables_wrapper {
        overflow-x: auto;
    }

    .pd-modern .dataTables_scrollBody table {
        min-width: 900px;
    }
}

/* Mobile (≤575.98px) — refinamentos extras */
@media (max-width: 575.98px) {
    .pd-modern .stock-items-toolbar {
        padding: 0.65rem 0.75rem;
        border-radius: var(--pd-radius);
    }

    .pd-modern .stock-items-toolbar__title {
        font-size: 1rem;
    }

    .pd-modern .pd-hero {
        flex-wrap: wrap;
    }

    .pd-modern .pd-hero__media .vehicle-image {
        max-height: 38px;
    }

    .pd-modern .stock-item-field--actions {
        justify-content: flex-start !important;
    }

    /* Toggle Card/Tabela: usa só ícones, sem ficar gigante */
    .pd-modern .pd-view-toggle__label {
        height: 34px;
    }

    .pd-modern .pd-view-toggle__option {
        width: 32px;
        height: 26px;
    }

    .pd-modern .pd-view-toggle__thumb {
        width: 32px;
    }

    .pd-modern .pd-view-toggle__checkbox:checked ~ .pd-view-toggle__label .pd-view-toggle__thumb {
        transform: translateX(32px);
    }

    /* DataTable wrapper tem rolagem horizontal em mobile */
    .pd-modern .dataTables_wrapper {
        overflow-x: auto;
    }
}

/* DataTable: limita a altura do scroll body via CSS também (camada extra
   além do scrollY do DataTable, que pode ser sobrescrito ao redimensionar). */
.pd-modern .dataTables_wrapper .dataTables_scrollBody {
    max-height: calc(100vh - 330px) !important;
}

/* Tableview ocupa só o espaço disponível e nunca passa do viewport */
.pd-modern :is(#tableView, #tableViewEmployee).pd-table-view {
    max-height: calc(100vh - 50px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pd-modern :is(#tableView, #tableViewEmployee) .dataTables_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Toggle compacto Card/Tabela na toolbar (ao lado da busca) */
.pd-modern .pd-view-toggle {
    position: relative;
    flex: 0 0 auto;
}

.pd-modern .pd-view-toggle__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pd-modern .pd-view-toggle__label {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 15, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 3px;
    margin: 0;
    height: 38px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.18s ease;
}

.pd-modern .pd-view-toggle__label:hover {
    border-color: rgba(255, 161, 127, 0.35);
}

.pd-modern .pd-view-toggle__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    border-radius: 999px;
    color: rgba(220, 220, 220, 0.55);
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
    transition: color 0.2s ease;
}

.pd-modern .pd-view-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 36px;
    height: calc(100% - 6px);
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%);
    border-radius: 999px;
    box-shadow: 0 4px 12px -3px var(--pd-accent-glow);
    transition: transform 0.22s cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
}

/* Estado padrão (não marcado) — cards selecionado, thumb à esquerda */
.pd-modern .pd-view-toggle__checkbox:not(:checked) ~ .pd-view-toggle__label .pd-view-toggle__option--cards {
    color: #1a1a1a;
}

/* Marcado — tabela selecionada, thumb desliza pra direita */
.pd-modern .pd-view-toggle__checkbox:checked ~ .pd-view-toggle__label .pd-view-toggle__thumb {
    transform: translateX(36px);
}

.pd-modern .pd-view-toggle__checkbox:checked ~ .pd-view-toggle__label .pd-view-toggle__option--table {
    color: #1a1a1a;
}

/* Foco visível pra acessibilidade (teclado) */
.pd-modern .pd-view-toggle__checkbox:focus-visible ~ .pd-view-toggle__label {
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
    border-color: var(--pd-accent);
}

/* Tempus Dominus — calendário com tema coral moderno.
   Sem escopo .pd-modern porque o widget é renderizado em outro nó do DOM
   pela própria biblioteca; o estilo passa a valer em todos os pickers do app. */
.tempus-dominus-widget {
    background: linear-gradient(180deg, rgba(35, 35, 35, 0.98) 0%, rgba(22, 22, 22, 0.98) 100%) !important;
    border: 1px solid rgba(255, 161, 127, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 50px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.7rem !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000 !important;
}

/* Cabeçalho (setas + título clicável que muda de view) */
.tempus-dominus-widget .calendar-header {
    color: #fff !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0.1rem !important;
}

.tempus-dominus-widget .calendar-header .picker-switch {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-radius: 8px;
    padding: 0.35rem 0.5rem !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.tempus-dominus-widget .calendar-header .picker-switch:hover {
    background: rgba(255, 161, 127, 0.12);
    color: #FFA17F !important;
}

.tempus-dominus-widget .calendar-header .previous,
.tempus-dominus-widget .calendar-header .next {
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: 8px;
    padding: 0.35rem !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.tempus-dominus-widget .calendar-header .previous:hover,
.tempus-dominus-widget .calendar-header .next:hover {
    background: rgba(255, 161, 127, 0.15);
    color: #FFA17F !important;
}

/* Cabeçalho dos dias da semana (Dom Seg Ter…) */
.tempus-dominus-widget .date-container-days .dow {
    color: rgba(255, 161, 127, 0.75) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Células de dia/mês/ano/hora/minuto/segundo */
.tempus-dominus-widget .date-container-days div:not(.no-highlight),
.tempus-dominus-widget .date-container-months div:not(.no-highlight),
.tempus-dominus-widget .date-container-years div:not(.no-highlight),
.tempus-dominus-widget .date-container-decades div:not(.no-highlight),
.tempus-dominus-widget .time-container-clock div:not(.no-highlight),
.tempus-dominus-widget .time-container-hour div:not(.no-highlight),
.tempus-dominus-widget .time-container-minute div:not(.no-highlight),
.tempus-dominus-widget .time-container-second div:not(.no-highlight) {
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Hover em qualquer célula clicável */
.tempus-dominus-widget .date-container-days div:not(.no-highlight):not(.disabled):not(.dow):not(.cw):hover,
.tempus-dominus-widget .date-container-months div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget .date-container-years div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget .date-container-decades div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget .time-container-clock div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget .time-container-hour div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget .time-container-minute div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget .time-container-second div:not(.no-highlight):not(.disabled):hover {
    background: rgba(255, 161, 127, 0.18) !important;
    color: #FFA17F !important;
    cursor: pointer;
}

/* Dias de outro mês (anterior/seguinte) */
.tempus-dominus-widget .date-container-days div.old:not(.active),
.tempus-dominus-widget .date-container-days div.new:not(.active) {
    color: rgba(255, 255, 255, 0.22) !important;
}

/* Hoje */
.tempus-dominus-widget .date-container-days div.today:not(.active),
.tempus-dominus-widget .date-container-months div.today:not(.active),
.tempus-dominus-widget .date-container-years div.today:not(.active) {
    position: relative;
    color: #FFA17F !important;
    font-weight: 700;
}

.tempus-dominus-widget .date-container-days div.today:before {
    border-top-color: #FFA17F !important;
    border-right-color: #FFA17F !important;
    border-bottom-color: #FFA17F !important;
    border-left-color: #FFA17F !important;
}

/* Selecionado (active) — sobrescreve o amarelo existente do tema dark */
.tempus-dominus-widget .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-months div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-years div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-decades div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-clock div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-hour div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-minute div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-second div:not(.no-highlight).active,
.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget.dark .date-container-months div.active,
.tempus-dominus-widget.dark .date-container-years div.active,
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-months div.active,
.tempus-dominus-widget.light .date-container-years div.active {
    background: linear-gradient(135deg, #FFA17F 0%, #ff7d56 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px -3px rgba(255, 161, 127, 0.55) !important;
}

/* Range (seleção de intervalo, quando o picker é configurado pra isso) */
.tempus-dominus-widget .date-container-days .range-in {
    background-color: rgba(255, 161, 127, 0.14) !important;
    color: #FFA17F !important;
    box-shadow: -5px 0 0 rgba(255, 161, 127, 0.14), 5px 0 0 rgba(255, 161, 127, 0.14) !important;
}

/* Disabled */
.tempus-dominus-widget .date-container-days div.disabled,
.tempus-dominus-widget .date-container-months div.disabled,
.tempus-dominus-widget .date-container-years div.disabled,
.tempus-dominus-widget .time-container-hour div.disabled,
.tempus-dominus-widget .time-container-minute div.disabled,
.tempus-dominus-widget .time-container-second div.disabled {
    color: rgba(255, 255, 255, 0.18) !important;
    cursor: not-allowed !important;
    background: transparent !important;
}

/* Toolbar inferior (Hoje / Fechar) */
.tempus-dominus-widget .toolbar {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(255, 161, 127, 0.12) !important;
}

.tempus-dominus-widget .toolbar div {
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.tempus-dominus-widget .toolbar div:hover {
    background: rgba(255, 161, 127, 0.15) !important;
    color: #FFA17F !important;
    cursor: pointer;
}

/* Timepicker: dígitos grandes HH:MM:SS */
.tempus-dominus-widget .timepicker-hour,
.tempus-dominus-widget .timepicker-minute,
.tempus-dominus-widget .timepicker-second {
    color: #fff !important;
    border-radius: 8px !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.tempus-dominus-widget .timepicker-hour:hover,
.tempus-dominus-widget .timepicker-minute:hover,
.tempus-dominus-widget .timepicker-second:hover {
    background: rgba(255, 161, 127, 0.15) !important;
    color: #FFA17F !important;
}

.tempus-dominus-widget .separator {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Botões com setinhas de up/down nos dígitos do timepicker */
.tempus-dominus-widget button[data-action] {
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: 8px !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.tempus-dominus-widget button[data-action]:hover {
    background: rgba(255, 161, 127, 0.15) !important;
    color: #FFA17F !important;
}

/* Toggle AM/PM (se aplicável) */
.tempus-dominus-widget .toggleMeridiem {
    border-radius: 999px !important;
    color: #FFA17F !important;
    background: rgba(255, 161, 127, 0.1) !important;
}

/*#endregion*/

/*#region Dashboard Operacional - Modern UI (refresh 2026)
   Aplica o mesmo tema coral das Partes Diárias na tela de Dashboard Operacional.
   Escopo: somente containers com a classe .gp-modern. */
.gp-modern {
    --gp-accent: #FFA17F;
    --gp-accent-strong: #ff7d56;
    --gp-accent-soft: rgba(255, 161, 127, 0.14);
    --gp-accent-soft-2: rgba(255, 161, 127, 0.22);
    --gp-accent-glow: rgba(255, 161, 127, 0.38);
    --gp-surface: linear-gradient(180deg, rgba(36, 36, 36, 0.92) 0%, rgba(26, 26, 26, 0.96) 100%);
    --gp-surface-hover: linear-gradient(180deg, rgba(42, 42, 42, 0.96) 0%, rgba(30, 30, 30, 0.98) 100%);
    --gp-border: rgba(255, 255, 255, 0.06);
    --gp-border-hover: rgba(255, 161, 127, 0.45);
    --gp-text: #f1f1f1;
    --gp-text-muted: rgba(220, 220, 220, 0.55);
    --gp-radius-lg: 16px;
    --gp-radius: 12px;
    --gp-radius-sm: 8px;
    --gp-shadow-1: 0 6px 22px -10px rgba(0, 0, 0, 0.55);
    --gp-shadow-2: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 161, 127, 0.15);
}

/* Sidebar (filtros) — sticky ocupando a altura da viewport */
.gp-modern #gp-dropdowns-content {
    align-self: flex-start;
    position: sticky;
    top: 51px; /* navbar fixed-top */
    height: calc(100vh - 51px);
    max-height: calc(100vh - 51px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 300px;
    max-width: 330px;
}

.gp-modern #gp-dropdowns-content #navigation {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.35) transparent;
}

.gp-modern #gp-dropdowns-content #navigation::-webkit-scrollbar {
    width: 6px;
}

.gp-modern #gp-dropdowns-content #navigation::-webkit-scrollbar-track {
    background: transparent;
}

.gp-modern #gp-dropdowns-content #navigation::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.3);
    border-radius: 3px;
}

.gp-modern #gp-dropdowns-content #navigation::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.5);
}

/* Sidebar: título com gradiente coral */
.gp-modern #gp-dropdowns-content #navigation h3 {
    background: linear-gradient(90deg, var(--gp-accent), var(--gp-accent-strong));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.01em;
    font-size: 1.15rem !important;
    font-weight: 700;
    margin: 0 !important;
}

.gp-modern #gp-dropdowns-content #navigation .hr {
    background: linear-gradient(90deg, transparent, var(--gp-accent-soft-2), transparent);
    border: 0;
    height: 1px;
    opacity: 0.8;
    margin: 0.5rem 0 !important;
}

/* Form interno: flex column ocupa toda a altura da sidebar */
.gp-modern #gp-dropdowns-content #navigation > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
    padding: 0.35rem !important;
    overflow: visible !important;
}

/* O segundo <hr> separa filtros da exportação — puxa para o rodapé */
.gp-modern #gp-dropdowns-content #navigation > form > hr.hr + hr.hr,
.gp-modern #gp-dropdowns-content #navigation > form > hr.hr:nth-of-type(2) {
    margin-top: auto !important;
    margin-bottom: 0.5rem !important;
}

.gp-modern #gp-dropdowns-content #navigation .mb-2 {
    margin-bottom: 0.45rem !important;
}

/* Datetimepickers — input-group com label estática no topo */
.gp-modern #gp-dropdowns-content #navigation #gp-datepicker-inicio,
.gp-modern #gp-dropdowns-content #navigation #gp-datepicker-fim {
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    background: rgba(15, 15, 15, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--gp-radius-sm) !important;
    min-height: 52px !important;
    overflow: hidden;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gp-modern #gp-dropdowns-content #navigation #gp-datepicker-inicio:focus-within,
.gp-modern #gp-dropdowns-content #navigation #gp-datepicker-fim:focus-within {
    border-color: var(--gp-accent) !important;
    box-shadow: 0 0 0 3px var(--gp-accent-soft) !important;
}

.gp-modern #gp-dropdowns-content #navigation .form-floating {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative !important;
}

.gp-modern #gp-dropdowns-content #navigation .form-floating > .form-control {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
    padding: 1.35rem 0.75rem 0.3rem !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.gp-modern #gp-dropdowns-content #navigation .form-floating > label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 0.4rem 0.75rem 0 !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    color: rgba(220, 220, 220, 0.5) !important;
    transform: none !important;
    transition: color 0.18s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.gp-modern #gp-dropdowns-content #navigation .form-floating > .form-control:focus ~ label,
.gp-modern #gp-dropdowns-content #navigation .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--gp-accent) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Ícone do calendário */
.gp-modern #gp-dropdowns-content #navigation .input-group .input-group-text {
    padding: 0 0.85rem !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(220, 220, 220, 0.5) !important;
    border-radius: 0 !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    transition: background 0.18s ease, color 0.18s ease;
    cursor: pointer;
}

.gp-modern #gp-dropdowns-content #navigation .input-group .input-group-text:hover {
    background: var(--gp-accent-soft) !important;
    color: var(--gp-accent) !important;
}

.gp-modern #gp-dropdowns-content #navigation .input-group:focus-within .input-group-text {
    color: var(--gp-accent) !important;
}

/* Labels acima dos multi-selects */
.gp-modern #gp-dropdowns-content #navigation .mb-2 > label.form-label {
    font-size: 0.7rem !important;
    margin-bottom: 0.18rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(220, 220, 220, 0.55) !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* Lista de toggles dos turnos (Dia/Noite/Madrugada) */
.gp-modern .gp-periodo-toggle-list {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gp-radius-sm);
    background: rgba(15, 15, 15, 0.55);
    padding: 6px 10px;
    transition: border-color 0.18s ease;
}

.gp-modern .gp-periodo-toggle-list:hover {
    border-color: rgba(255, 161, 127, 0.2);
}

.gp-modern .gp-periodo-toggle {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    color: var(--gp-text);
}

.gp-modern .gp-periodo-toggle:last-child {
    border-bottom: none;
}

.gp-modern #gp-dropdowns-content .form-check-input {
    border-color: rgba(255, 255, 255, 0.25);
    background-color: rgba(0, 0, 0, 0.3);
}

.gp-modern #gp-dropdowns-content .form-check-input:checked {
    background-color: var(--gp-accent) !important;
    border-color: var(--gp-accent) !important;
}

.gp-modern #gp-dropdowns-content .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--gp-accent-soft);
    border-color: var(--gp-accent);
}

/* Select2 multi-select com tema coral */
.gp-modern #gp-dropdowns-content .select2-container {
    width: 100% !important;
}

.gp-modern #gp-dropdowns-content .select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    padding: 0.1rem 0.5rem !important;
    border-radius: var(--gp-radius-sm) !important;
    background: rgba(15, 15, 15, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.gp-modern #gp-dropdowns-content .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-size: 0.82rem !important;
    padding: 0.1rem 0 !important;
    min-height: 28px;
    color: var(--gp-text);
}

.gp-modern #gp-dropdowns-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--gp-accent-soft) !important;
    border: 1px solid rgba(255, 161, 127, 0.3) !important;
    color: var(--gp-accent) !important;
    font-size: 0.74rem !important;
    padding: 0.08rem 0.5rem !important;
    margin: 2px 2px 0 0 !important;
    border-radius: 999px !important;
}

.gp-modern #gp-dropdowns-content .select2-selection__choice__display {
    color: var(--gp-accent) !important;
    padding-left: 1.1rem !important;
}

.gp-modern #gp-dropdowns-content .select2-selection__choice__remove {
    color: var(--gp-accent) !important;
}

.gp-modern #gp-dropdowns-content .select2-selection__choice__remove:hover {
    background-color: rgba(255, 161, 127, 0.25) !important;
    color: #fff !important;
}

.gp-modern #gp-dropdowns-content .select2-container--default.select2-container--focus .select2-selection--multiple,
.gp-modern #gp-dropdowns-content .select2-container--default .select2-selection--multiple:focus-within {
    border-color: var(--gp-accent) !important;
    box-shadow: 0 0 0 3px var(--gp-accent-soft) !important;
}

/* Botão Visualizar com gradiente coral */
.gp-modern #gp-btn-visualizar.stock-btn-primary {
    background: linear-gradient(135deg, var(--gp-accent) 0%, var(--gp-accent-strong) 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.85rem;
    border: none;
    border-radius: var(--gp-radius-sm);
    box-shadow: 0 6px 18px -5px var(--gp-accent-glow);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.gp-modern #gp-btn-visualizar.stock-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -5px var(--gp-accent-glow);
}

.gp-modern #gp-btn-exportar-pdf.stock-btn-secondary {
    background: transparent;
    border: 1px solid var(--gp-border);
    color: var(--gp-text);
    border-radius: var(--gp-radius-sm);
    padding: 0.55rem 0.85rem !important;
    font-weight: 500;
    font-size: 0.85rem;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.gp-modern #gp-btn-exportar-pdf.stock-btn-secondary:hover {
    background: var(--gp-accent-soft);
    border-color: var(--gp-accent);
    color: var(--gp-accent);
}

/* Dashboard content area */
.gp-modern #gp-dashboard-content {
    padding: 0;
}

/* Toolbar superior do dashboard (glassmorphism + coral accent) */
.gp-modern #gp-toolbar.stock-items-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.65) 0%, rgba(24, 24, 24, 0.45) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius-lg);
    box-shadow: var(--gp-shadow-1);
    padding: 0.85rem 1.1rem;
    margin: 0.25rem 0.35rem 0.85rem;
}

.gp-modern .stock-items-toolbar__title {
    color: #fff;
    font-weight: 700;
    position: relative;
    padding-left: 0.95rem;
    font-size: 1.1rem;
}

.gp-modern .stock-items-toolbar__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 72%;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gp-accent), var(--gp-accent-strong));
    box-shadow: 0 0 14px var(--gp-accent-glow);
}

.gp-modern .stock-items-toolbar .stock-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    line-height: 1;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--gp-text);
}

.gp-modern .stock-items-toolbar .stock-badge--muted {
    background: var(--gp-accent-soft);
    color: var(--gp-accent);
    border: 1px solid rgba(255, 161, 127, 0.25);
}

.gp-modern .gp-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Painel do Gestor: filtros rápidos de período no header (pílulas que substituem a sidebar) */
.gp-modern .gp-quick-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gp-modern .gp-quick-range__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--gp-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--gp-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.gp-modern .gp-quick-range__btn:hover {
    border-color: var(--gp-border-hover);
    color: var(--gp-text);
    transform: translateY(-1px);
}

.gp-modern .gp-quick-range__btn.active {
    background: var(--gp-accent-soft-2);
    border-color: var(--gp-accent);
    color: var(--gp-accent);
    box-shadow: 0 0 0 1px rgba(255, 161, 127, 0.25), 0 6px 16px -9px var(--gp-accent-glow);
}

/* Painel do Gestor sem sidebar: o conteúdo ocupa a largura toda; um respiro lateral
   evita que toolbar e cards fiquem colados na borda da viewport. */
.gp-modern.gp-modern--no-sidebar #gp-dashboard-content {
    padding: 0 0.4rem;
}

/* Botão Filtros (visível só em tablet/mobile) */
.gp-modern .pd-filters-toggle {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: var(--gp-accent-soft);
    border: 1px solid rgba(255, 161, 127, 0.35);
    border-radius: var(--gp-radius-sm);
    color: var(--gp-accent);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.gp-modern .pd-filters-toggle:hover {
    background: rgba(255, 161, 127, 0.22);
    border-color: var(--gp-accent);
    transform: translateY(-1px);
}

.gp-modern .pd-filters-toggle__label {
    line-height: 1;
}

/* Backdrop do drawer (tablet) */
.gp-modern .pd-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 51px 0 0 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 1;
    transition: opacity 0.28s ease;
    cursor: pointer;
}

/* Empty state — gradiente sutil com ícone coral */
.gp-modern .gp-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem 1rem;
    margin: 0.25rem 0.35rem;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.6) 0%, rgba(22, 22, 22, 0.4) 100%);
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: var(--gp-radius-lg);
}

.gp-modern .gp-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gp-accent-soft);
    border: 1px solid rgba(255, 161, 127, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--gp-accent);
    font-size: 2rem;
    box-shadow: 0 8px 28px -10px var(--gp-accent-glow);
}

.gp-modern .gp-empty-title {
    color: var(--gp-text);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

.gp-modern .gp-empty-text {
    color: var(--gp-text-muted);
    font-size: 0.88rem;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.55;
}

.gp-modern .gp-empty-text strong {
    color: var(--gp-accent);
    font-weight: 600;
}

/* Loading state — spinner coral centralizado */
.gp-modern .gp-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 2rem;
    margin: 0.25rem 0.35rem;
}

.gp-modern .gp-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 161, 127, 0.18);
    border-top-color: var(--gp-accent);
    border-radius: 50%;
    animation: gpSpin 0.75s linear infinite;
    margin-bottom: 1rem;
}

@keyframes gpSpin {
    to { transform: rotate(360deg); }
}

.gp-modern .gp-loading-text {
    color: var(--gp-text-muted);
    font-size: 0.88rem;
    margin: 0;
    letter-spacing: 0.04em;
}

/* No-data state — alerta amarelo discreto, com ícone */
.gp-modern .gp-no-data-state {
    background: rgba(255, 210, 127, 0.08);
    border: 1px solid rgba(255, 210, 127, 0.25);
    color: var(--stock-warning, #ffd27f);
    border-radius: var(--gp-radius);
    padding: 0.85rem 1.1rem;
    margin: 0.25rem 0.35rem;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
}

/* Sections — header com gradiente coral e linha sutil */
.gp-modern .gp-section {
    margin: 0 0.35rem 0.85rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.7) 0%, rgba(22, 22, 22, 0.55) 100%);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius-lg);
    box-shadow: var(--gp-shadow-1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gp-modern .gp-section-header {
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0 0 0.6rem 0.95rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 161, 127, 0.25);
}

.gp-modern .gp-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    height: 14px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gp-accent), var(--gp-accent-strong));
    box-shadow: 0 0 10px var(--gp-accent-glow);
}

/* Cards — surface modern, hover sutil */
.gp-modern .gp-card {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius);
    padding: 0.85rem 0.95rem;
    box-shadow: var(--gp-shadow-1);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.gp-modern .gp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gp-accent) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease, height 0.25s ease;
    pointer-events: none;
}

.gp-modern .gp-card:hover {
    background: var(--gp-surface-hover);
    border-color: var(--gp-border-hover);
    box-shadow: var(--gp-shadow-2);
    transform: translateY(-2px);
}

.gp-modern .gp-card:hover::before {
    opacity: 1;
    height: 3px;
}

/* Card com scroll horizontal — usado em "Produção por Cava" quando há muitas
   cavas. O scroll ocorre dentro do card, sem empurrar os cards vizinhos. */
.gp-modern .gp-card--scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.4) transparent;
}

.gp-modern .gp-card--scroll-x::-webkit-scrollbar {
    height: 8px;
}

.gp-modern .gp-card--scroll-x::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 8px;
}

.gp-modern .gp-card--scroll-x::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.35);
    border-radius: 4px;
}

.gp-modern .gp-card--scroll-x::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.6);
}

/* Título do card permanece visível ao scrollar horizontalmente */
.gp-modern .gp-card--scroll-x .gp-card-title {
    position: sticky;
    left: 0;
    background: linear-gradient(90deg, rgba(30, 30, 30, 0.98) 0%, rgba(30, 30, 30, 0.92) 70%, rgba(30, 30, 30, 0) 100%);
    z-index: 1;
    padding-right: 1.5rem;
    margin-right: -0.5rem;
    width: fit-content;
    max-width: 100%;
}

.gp-modern .gp-card-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gp-text-muted);
    margin-bottom: 0.55rem;
}

/* KPIs com cor coral por padrão */
.gp-modern .gp-kpi-value {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--gp-accent) 0%, var(--gp-accent-strong) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-modern .gp-card > .gp-kpi-value,
.gp-modern .gp-kpi-card .gp-kpi-value,
.gp-modern .gp-kpi-mini .gp-kpi-value {
    color: transparent !important;
}

/* KPIs com semântica (variantes de cor) ainda aparecem em sua cor original
   quando o backend marca com text-info/warning/success/danger/primary. */
.gp-modern .gp-kpi-value.text-info,
.gp-modern .gp-card > .gp-kpi-value.text-info {
    background: none;
    color: #8dd0ff !important;
    -webkit-text-fill-color: #8dd0ff !important;
}

.gp-modern .gp-kpi-value.text-warning,
.gp-modern .gp-card > .gp-kpi-value.text-warning {
    background: none;
    color: #ffd27f !important;
    -webkit-text-fill-color: #ffd27f !important;
}

.gp-modern .gp-kpi-value.text-success,
.gp-modern .gp-card > .gp-kpi-value.text-success {
    background: none;
    color: #6fe08c !important;
    -webkit-text-fill-color: #6fe08c !important;
}

.gp-modern .gp-kpi-value.text-danger,
.gp-modern .gp-card > .gp-kpi-value.text-danger {
    background: none;
    color: #ff8a73 !important;
    -webkit-text-fill-color: #ff8a73 !important;
}

.gp-modern .gp-kpi-value.text-primary,
.gp-modern .gp-card > .gp-kpi-value.text-primary {
    background: none;
    color: #a4b8ff !important;
    -webkit-text-fill-color: #a4b8ff !important;
}

.gp-modern .gp-kpi-label {
    font-size: 0.7rem;
    color: var(--gp-text-muted);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tabelas internas (.gp-table) */
.gp-modern .gp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.gp-modern .gp-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 161, 127, 0.78);
    font-size: 0.65rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 161, 127, 0.22);
    padding: 0 0 6px 0;
}

.gp-modern .gp-table tbody td {
    color: rgba(235, 235, 235, 0.78);
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.gp-modern .gp-table tbody tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: #fff;
}

.gp-modern .gp-table tbody tr:hover td {
    color: #fff;
}

.gp-modern .gp-table td:last-child,
.gp-modern .gp-table th:last-child {
    text-align: right;
}

/* Wrapper com scroll horizontal + custom scrollbar */
.gp-modern .gp-table-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.35) transparent;
}

.gp-modern .gp-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.gp-modern .gp-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.32);
    border-radius: 4px;
}

.gp-modern .gp-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.55);
}

/* ============================================================
   Indicadores por Equipamento de Carga (.gp-load-table)
   Tabela com header destacado, cells com semântica, % colorida
   ============================================================ */
.gp-modern .gp-load-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    min-width: 640px;
}

.gp-modern .gp-load-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(35, 35, 38, 0.95) 0%, rgba(24, 24, 26, 0.95) 100%);
    color: rgba(255, 161, 127, 0.92);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.65rem 0.7rem;
    border: none;
    border-bottom: 2px solid rgba(255, 161, 127, 0.32);
    white-space: nowrap;
    text-align: left;
}

.gp-modern .gp-load-table thead th.text-end { text-align: right; }
.gp-modern .gp-load-table thead th.gp-load-table__col-equip { padding-left: 0.95rem; }

.gp-modern .gp-load-table tbody td {
    padding: 0.6rem 0.7rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(235, 235, 235, 0.85);
    vertical-align: middle;
    white-space: nowrap;
    font-weight: 500;
}

.gp-modern .gp-load-table tbody tr {
    transition: background 0.15s ease;
}

.gp-modern .gp-load-table tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.012);
}

.gp-modern .gp-load-table tbody tr:hover td {
    background: rgba(255, 161, 127, 0.07) !important;
    color: #fff;
}

.gp-modern .gp-load-table tbody tr:last-child td {
    border-bottom: none;
    font-weight: 500;
}

/* Coluna Equipamento — nome forte com bolinha coral */
.gp-modern .gp-load-table__cell-equip {
    padding-left: 0.95rem !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.86rem;
}

.gp-modern .gp-load-table__cell-equip .gp-load-equip-dot,
.gp-modern .gp-load-table__cell-equip .gp-load-equip-name {
    vertical-align: middle;
}

.gp-modern .gp-load-table__cell-equip .gp-load-equip-dot {
    display: inline-block;
    margin-right: 0.55rem;
}

.gp-modern .gp-load-equip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFA17F 0%, #ff7d56 100%);
    box-shadow: 0 0 0 2px rgba(255, 161, 127, 0.15), 0 0 8px rgba(255, 161, 127, 0.45);
}

.gp-modern .gp-load-equip-name {
    display: inline;
    vertical-align: middle;
}

/* Números tabulares à direita */
.gp-modern .gp-num {
    font-variant-numeric: tabular-nums;
    color: #fff !important;
    font-weight: 600;
}

.gp-modern .gp-num--muted {
    color: rgba(220, 220, 220, 0.55) !important;
    font-weight: 500;
}

/* % com pill coloridos por faixa */
.gp-modern .gp-pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    line-height: 1;
}

.gp-modern .gp-pct--high {
    background: rgba(111, 224, 140, 0.16);
    border-color: rgba(111, 224, 140, 0.36);
    color: #6fe08c;
}

.gp-modern .gp-pct--mid {
    background: rgba(255, 210, 127, 0.16);
    border-color: rgba(255, 210, 127, 0.36);
    color: #ffd27f;
}

.gp-modern .gp-pct--low {
    background: rgba(255, 138, 115, 0.16);
    border-color: rgba(255, 138, 115, 0.36);
    color: #ff8a73;
}

.gp-modern .gp-pct--muted {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(220, 220, 220, 0.55);
}

/* Células compostas (Carregando/Britador) com valor principal + unidade + subinfo */
.gp-modern .gp-load-table__cell-compound {
    font-variant-numeric: tabular-nums;
}

.gp-modern .gp-load-cell__main {
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
}

.gp-modern .gp-load-cell__unit {
    color: rgba(255, 161, 127, 0.85);
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.15rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.gp-modern .gp-load-cell__sub {
    color: rgba(220, 220, 220, 0.45);
    font-size: 0.72rem;
    font-weight: 500;
}

/* Empty state */
.gp-modern .gp-load-table__empty {
    text-align: center;
    color: rgba(220, 220, 220, 0.5);
    padding: 1.5rem 0.75rem !important;
    font-style: italic;
    font-size: 0.86rem;
}

/* ============================================================
   Viagens por Hora por Equipamento (.gp-vh-table) — heatmap
   Linhas = equipamento, colunas = faixas de 1h, célula = nº de
   viagens com intensidade coral. 1ª coluna fixa (sticky) para
   janelas largas com scroll horizontal.
   ============================================================ */
.gp-modern .gp-card-subtitle {
    color: rgba(220, 220, 220, 0.55);
    font-size: 0.74rem;
    margin: -0.15rem 0 0.6rem 0;
}

.gp-modern .gp-vh-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
    min-width: 100%;
}

.gp-modern .gp-vh-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(35, 35, 38, 0.97) 0%, rgba(24, 24, 26, 0.97) 100%);
    color: rgba(255, 161, 127, 0.92);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.55rem 0.5rem;
    border-bottom: 2px solid rgba(255, 161, 127, 0.32);
    white-space: nowrap;
}

.gp-modern .gp-vh-table thead th.gp-vh-hour { min-width: 66px; }

.gp-modern .gp-vh-corner {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    padding-left: 0.85rem !important;
}

.gp-modern .gp-vh-total-col { color: #fff; }

.gp-modern .gp-vh-table tbody td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gp-modern .gp-vh-equip {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #14171f;
    color: #fff;
    font-weight: 600;
    padding-left: 0.85rem !important;
    box-shadow: 1px 0 0 rgba(255, 161, 127, 0.12);
}

.gp-modern .gp-vh-table tbody tr:hover .gp-vh-equip { background: #1b1f29; }

.gp-modern .gp-vh-equip .gp-load-equip-dot { margin-right: 0.5rem; vertical-align: middle; }
.gp-modern .gp-vh-equip .gp-load-equip-name { vertical-align: middle; }

.gp-modern .gp-vh-cell {
    color: rgba(235, 235, 235, 0.85);
    border-radius: 3px;
}

/* Célula: nº de viagens | tempo médio de ciclo (min) */
.gp-modern .gp-vh-sep {
    margin: 0 0.18rem;
    opacity: 0.4;
    font-weight: 400;
}

.gp-modern .gp-vh-tempo {
    font-size: 0.82em;
    font-weight: 500;
    opacity: 0.82;
}

.gp-modern .gp-vh-total {
    color: #fff;
    font-weight: 700;
    background: rgba(255, 161, 127, 0.10);
}

.gp-modern .gp-vh-table tfoot td {
    padding: 0.5rem 0.5rem;
    border-top: 2px solid rgba(255, 161, 127, 0.30);
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.02);
}

.gp-modern .gp-vh-table tfoot .gp-vh-equip {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #14171f;
}

.gp-modern .gp-vh-foot-grand {
    background: rgba(255, 161, 127, 0.18);
    color: #fff;
}

/* Operator hybrid tables */
.gp-modern .gp-operator-head {
    color: rgba(255, 161, 127, 0.78);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 161, 127, 0.22);
}

.gp-modern .gp-operator-row {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}

.gp-modern .gp-operator-row:hover {
    background: rgba(255, 161, 127, 0.05);
}

.gp-modern .gp-operator-name,
.gp-modern .gp-operator-secondary,
.gp-modern .gp-operator-pre-label,
.gp-modern .gp-operator-extra {
    color: var(--gp-text);
    font-size: 0.86rem;
}

.gp-modern .gp-operator-bar-track {
    background: rgba(255, 255, 255, 0.06);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.gp-modern .gp-operator-bar-fill {
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(255, 161, 127, 0.25);
    transition: width 0.4s cubic-bezier(.4, 0, .2, 1);
}

.gp-modern .gp-operator-value {
    color: var(--gp-accent);
    font-weight: 700;
    font-size: 0.88rem;
}

/* Tabela híbrida com altura limitada e scroll interno — usada em "Produção por
   Equipamento" para o card não crescer demais em períodos longos. O cabeçalho
   (.gp-operator-head) fica fixo no topo enquanto as linhas rolam. */
.gp-modern .gp-operator-table--capped {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.4) transparent;
}

.gp-modern .gp-operator-table--capped::-webkit-scrollbar {
    width: 8px;
}

.gp-modern .gp-operator-table--capped::-webkit-scrollbar-track {
    background: transparent;
}

.gp-modern .gp-operator-table--capped::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.35);
    border-radius: 4px;
}

.gp-modern .gp-operator-table--capped::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.6);
}

.gp-modern .gp-operator-table--capped .gp-operator-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #242424;
    margin-bottom: 0;
    padding-top: 2px;
}

/* Tempo de Refeição/Alimentação por Equipamento/Operador — régua com a média de minutos por
   turno (marcador colorido) + selo de status (abaixo/dentro/acima da franquia). */
.gp-modern .gp-meal-head {
    display: grid;
    grid-template-columns: minmax(110px, 1.3fr) minmax(120px, 2fr) minmax(150px, auto);
    gap: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 161, 127, 0.78);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 161, 127, 0.22);
}

.gp-modern .gp-meal-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.3fr) minmax(120px, 2fr) minmax(150px, auto);
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}

.gp-modern .gp-meal-row:last-child {
    border-bottom: none;
}

.gp-modern .gp-meal-row:hover {
    background: rgba(255, 161, 127, 0.05);
}

.gp-modern .gp-meal-name {
    color: var(--gp-text);
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-modern .gp-meal-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.gp-modern .gp-meal-track-ok {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 999px 0 0 999px;
    background: rgba(111, 224, 140, 0.16);
}

.gp-modern .gp-meal-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    transform: translateX(-50%);
}

.gp-modern .gp-meal-marker--abaixo { background: #8dd0ff; box-shadow: 0 0 6px rgba(141, 208, 255, 0.6); }
.gp-modern .gp-meal-marker--dentro { background: #6fe08c; box-shadow: 0 0 6px rgba(111, 224, 140, 0.6); }
.gp-modern .gp-meal-marker--acima  { background: #ff8a73; box-shadow: 0 0 6px rgba(255, 138, 115, 0.6); }

.gp-modern .gp-meal-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: end;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gp-modern .gp-meal-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.gp-modern .gp-meal-pill--abaixo { background: rgba(141, 208, 255, 0.14); color: #8dd0ff; }
.gp-modern .gp-meal-pill--dentro { background: rgba(111, 224, 140, 0.14); color: #6fe08c; }
.gp-modern .gp-meal-pill--acima  { background: rgba(255, 138, 115, 0.14); color: #ff8a73; }

.gp-modern .gp-meal-note {
    font-size: 0.68rem;
    color: var(--gp-text-muted);
    margin-top: 6px;
}

/* Produtividade por Equipamento — turnos */
.gp-modern .gp-prod-equip-head {
    color: rgba(255, 161, 127, 0.78);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255, 161, 127, 0.22);
}

.gp-modern .gp-prod-equip-row {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}

.gp-modern .gp-prod-equip-row:hover {
    background: rgba(255, 161, 127, 0.05);
}

.gp-modern .gp-prod-equip-cell {
    color: var(--gp-text);
    font-size: 0.82rem;
}

.gp-modern .gp-prod-equip-value {
    color: var(--gp-accent);
    font-weight: 700;
}

/* Select de turno (Produtividade por equipamento) */
.gp-modern select.form-select-sm {
    background: rgba(15, 15, 15, 0.6) !important;
    border: 1px solid var(--gp-border) !important;
    color: var(--gp-text) !important;
    border-radius: var(--gp-radius-sm) !important;
    padding: 0.3rem 0.55rem !important;
    cursor: pointer;
    font-size: 0.82rem;
}

.gp-modern select.form-select-sm:focus {
    border-color: var(--gp-accent) !important;
    box-shadow: 0 0 0 3px var(--gp-accent-soft) !important;
    outline: none;
}

/* Tooltip dos charts — cores em literal porque o tooltip é injetado em
   document.body (fora de .gp-modern), então variáveis CSS não resolvem. */
body .gp-chart-tooltip {
    background: linear-gradient(180deg, rgba(28, 28, 30, 0.98) 0%, rgba(18, 18, 20, 0.98) 100%) !important;
    border: 1px solid rgba(255, 161, 127, 0.55) !important;
    color: #f5f5f5 !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 500;
    line-height: 1.45 !important;
    max-width: 280px !important;
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 161, 127, 0.18), 0 0 24px -6px rgba(255, 161, 127, 0.35) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body .gp-chart-tooltip strong {
    color: #FFA17F !important;
    font-weight: 700;
    font-size: 0.84rem;
    display: inline-block;
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}

/* Dual side title (Em estrada vs Fora de estrada) */
.gp-modern .gp-dual-side-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.gp-modern .gp-dual-side-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    opacity: 0.85;
}

/* Modal de notificação (alerts) */
.gp-modern + .modal .gp-notify-modal,
.gp-notify-modal {
    background: var(--gp-surface, linear-gradient(180deg, rgba(36, 36, 36, 0.96) 0%, rgba(26, 26, 26, 0.98) 100%));
    border: 1px solid rgba(255, 161, 127, 0.18);
    border-radius: 14px;
    color: var(--gp-text, #f1f1f1);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 161, 127, 0.15);
}

.gp-notify-modal .gp-notify-title {
    color: #FFA17F;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.gp-notify-modal .modal-body p {
    color: #f1f1f1;
    font-size: 0.9rem;
}

.gp-notify-modal .gp-notify-ok.stock-btn-primary {
    background: linear-gradient(135deg, #FFA17F 0%, #ff7d56 100%) !important;
    color: #1a1a1a !important;
    border: none;
    font-weight: 700;
    padding: 0.45rem 1.2rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px -5px rgba(255, 161, 127, 0.38);
    transition: filter 0.18s ease, transform 0.18s ease;
}

.gp-notify-modal .gp-notify-ok.stock-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Ajuste do scrollbar do dashboard-content */
.gp-modern #gp-dashboard-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.gp-modern #gp-dashboard-content::-webkit-scrollbar-track {
    background: transparent;
}

.gp-modern #gp-dashboard-content::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.3);
    border-radius: 4px;
}

.gp-modern #gp-dashboard-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.5);
}

/* Responsivo: tablet/mobile — sidebar vira drawer overlay */
@media (max-width: 991.98px) {
    .gp-modern.main-content-side-menu {
        display: block !important;
    }

    .gp-modern #gp-dropdowns-content {
        position: fixed !important;
        top: 51px !important;
        left: 0 !important;
        width: min(320px, 88vw) !important;
        max-width: 88vw !important;
        height: calc(100vh - 51px) !important;
        max-height: calc(100vh - 51px) !important;
        z-index: 1050 !important;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 12px 0 36px -10px rgba(0, 0, 0, 0.6);
        margin: 0 !important;
        align-self: auto !important;
    }

    .gp-modern.gp-sidebar-closed #gp-dropdowns-content {
        transform: translateX(-105%);
    }

    .gp-modern .pd-sidebar-backdrop {
        display: block;
    }

    .gp-modern.gp-sidebar-closed .pd-sidebar-backdrop {
        opacity: 0;
        pointer-events: none;
    }

    .gp-modern #gp-dashboard-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .gp-modern .pd-filters-toggle {
        display: inline-flex;
    }

    .gp-modern #gp-toolbar.stock-items-toolbar {
        padding: 0.7rem 0.85rem;
    }

    .gp-modern .stock-items-toolbar__title {
        font-size: 1rem;
    }

    .gp-modern .gp-section {
        padding: 0.7rem 0.75rem;
    }

    .gp-modern .gp-kpi-value {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .gp-modern #gp-toolbar.stock-items-toolbar {
        padding: 0.6rem 0.7rem;
        border-radius: var(--gp-radius);
    }

    .gp-modern .stock-items-toolbar__title {
        font-size: 0.95rem;
    }

    .gp-modern .gp-empty-state {
        min-height: 280px;
    }

    .gp-modern .gp-empty-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .gp-modern .gp-empty-title {
        font-size: 0.95rem;
    }

    .gp-modern .gp-kpi-value {
        font-size: 1.15rem;
    }

    .gp-modern .gp-card {
        padding: 0.7rem 0.75rem;
    }
}

/* Estado "exportando" para PDF: oculta hovers e transitions */
.gp-modern.gp-exporting .gp-card:hover,
.gp-modern .gp-exporting .gp-card:hover {
    transform: none;
    box-shadow: var(--gp-shadow-1);
}

.gp-modern.gp-exporting .gp-card::before,
.gp-modern .gp-exporting .gp-card::before {
    display: none;
}

/*#endregion*/

/*#region Daily Part Validation — tela de Validação de Origem/Destino
   Estilos da tela /DailyPartValidation e do modal de detalhe com mapa.
   Migrado dos blocos <style> inline em Views/DailyPartValidation/Index.cshtml. */

/* ---------- Layout da página (header + filtros + toolbar fixos; lista rola) ---------- */
.validation-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    padding: 0.75rem 1rem 0.5rem;
    overflow: hidden;
}

.validation-fixed-top {
    flex: 0 0 auto;
}

.validation-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0.25rem 1rem;
    margin-top: 0.4rem;
}

.validation-scroll::-webkit-scrollbar {
    width: 8px;
}

.validation-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.validation-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.validation-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ---------- Painel de filtros ---------- */
.validation-filters {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(35, 35, 35, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--stock-radius);
    box-shadow: var(--stock-elevation-1);
}

.validation-filters .stock-field-label {
    margin-bottom: 0.2rem;
}

/* Date picker (Tempus Dominus) com tema escuro */
.validation-date-picker .form-control {
    background-color: rgba(18, 18, 18, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.validation-date-picker .form-control:focus {
    background-color: rgba(18, 18, 18, 0.85);
    border-color: var(--yellow-light);
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 179, 0.18);
    color: #fff;
}

.validation-date-picker .input-group-text {
    background-color: rgba(18, 18, 18, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--yellow-light);
}

/* ---------- Toolbar de seleção (Selecionar todos / ações em lote) ---------- */
.validation-toolbar {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(6px);
    border-radius: var(--stock-radius-sm);
    padding: 0.4rem 0.6rem;
}

/* ---------- Card de cada validação (estende .stock-card) ---------- */
.validation-card .validation-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.validation-card .validation-section-title {
    color: var(--stock-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.validation-card .validation-arrow {
    color: var(--stock-muted);
    font-size: 0.75rem;
    opacity: 0.6;
    padding: 0 0.25rem;
}

.validation-card .validation-pointed {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 138, 122, 0.45);
    text-decoration-thickness: 1.5px;
}

.validation-card .validation-suggested {
    color: var(--yellow-light);
    font-size: 0.95rem;
    font-weight: 600;
}

.validation-card .validation-meta {
    color: var(--stock-muted);
    font-size: 0.72rem;
}

.validation-card .validation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.validation-card .validation-actions .btn {
    font-size: 0.78rem;
}

.validation-card .form-check-input {
    cursor: pointer;
}

.vrow-check:checked + .validation-card-body {
    box-shadow: 0 0 0 1px var(--yellow-light) inset;
}

@media (max-width: 768px) {
    .validation-card .validation-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

/* ---------- Zona clicável dentro do card (origem ou destino) ---------- */
.validation-zone {
    border-radius: var(--stock-radius-sm);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    position: relative;
    transition: background var(--stock-transition);
}

.validation-zone:hover {
    background: rgba(141, 208, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(141, 208, 255, 0.25) inset;
}

/* Ícone "olho" no canto sup. direito da zona — só aparece no hover.
   Usa "Font Awesome 6 Pro" (família linkada pelo _newLayout). */
.validation-zone::after {
    content: "\f06e"; /* fa-eye */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    font-size: 0.78rem;
    color: rgba(141, 208, 255, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--stock-transition);
}

.validation-zone:hover::after {
    opacity: 1;
}

/* ---------- Modal de detalhe com mapa ---------- */
/* Modal maior que o modal-xl padrão — ~95vw. Sem overflow externo:
   só o painel interno de info pode rolar, se necessário. */
.modal-vmm .modal-dialog {
    max-width: 95vw;
    width: 1500px;
    margin: 1rem auto;
}

.modal-vmm .modal-content {
    max-height: 95vh;
    overflow: hidden;
}

.modal-vmm .modal-body {
    overflow: hidden;
    padding: 0.75rem 1rem;
}

/* Mapa e painel lateral ocupam mesma altura — sem scrollbar externa */
#validation-map {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--stock-radius-sm);
    height: calc(55vh - 45px);
    width: 100%;
}

/* Painel direito acompanha a altura do mapa; só ele rola internamente */
#vmm-info {
    height: calc(95vh - 180px);
    min-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

#vmm-info::-webkit-scrollbar {
    width: 6px;
}

#vmm-info::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Legenda abaixo do mapa */
.vmm-legend {
    color: var(--stock-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.72rem;
    gap: 0.5rem 0.9rem;
}

.vmm-legend-item {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.vmm-swatch {
    border: 2px solid;
    border-radius: 3px;
    display: inline-block;
    height: 12px;
    width: 16px;
}

.vmm-dot {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

/* Blocos de informação textual à direita do mapa */
.vmm-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--stock-radius-sm);
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
}

.vmm-block h6 {
    color: var(--yellow-light);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.vmm-field {
    align-items: baseline;
    display: flex;
    font-size: 0.82rem;
    gap: 0.4rem;
    justify-content: space-between;
    padding: 0.15rem 0;
}

.vmm-field-label {
    color: var(--stock-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vmm-field-value {
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
}

.vmm-field-value--pointed {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 138, 122, 0.4);
}

.vmm-field-value--suggested {
    color: var(--yellow-light);
    font-weight: 600;
}

/* ---------- Overrides do Leaflet pra tema escuro ---------- */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #2a2a2a;
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.7);
}

.leaflet-popup-content {
    margin: 0.6rem 0.75rem;
    font-size: 0.85rem;
}

.leaflet-container a.leaflet-popup-close-button {
    color: #fff;
    opacity: 0.7;
}

.vmm-popup-title {
    color: var(--yellow-light);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.vmm-popup-meta {
    color: var(--stock-muted);
    font-size: 0.78rem;
}

/* Label permanente no centro das geocercas apontada/sugerida — distingue
   delas das "outras" no mapa de satélite. */
.leaflet-tooltip.vmm-tooltip-label {
    background: rgba(0, 0, 0, 0.65);
    border: none;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.leaflet-tooltip.vmm-tooltip-label::before {
    display: none;
}

/* ---------- Refresh visual coral (alinhado à DailyPart): escopo .pd-modern ----------
   Aplica o tema coral/glassmorphism em cima dos estilos base. Sem efeito
   em outras telas — só onde .pd-modern estiver presente no wrapper. */

/* Cabeçalho com barra coral lateral */
.pd-modern .stock-list-header {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.65) 0%, rgba(24, 24, 24, 0.45) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-1);
    padding: 0.75rem 1rem;
    margin: 0.25rem 0.35rem 0.6rem;
    align-items: center;
}

/* Wrapper título + subtítulo. A barra coral lateral envolve os dois,
   pra o subtítulo ficar visualmente atrelado ao título (não solto). */
.pd-modern .stock-list-header .validation-title {
    position: relative;
    padding-left: 0.95rem;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pd-modern .stock-list-header .validation-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 78%;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pd-accent), var(--pd-accent-strong));
    box-shadow: 0 0 14px var(--pd-accent-glow);
}

.pd-modern .stock-list-header .validation-title h4 {
    color: #fff;
    font-weight: 700;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* Subtítulo discreto abaixo do título — fonte menor, color muted */
.pd-modern .stock-list-header .validation-subtitle {
    color: var(--stock-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    opacity: 0.85;
}

/* Chip "pendentes" em coral */
.pd-modern #pending-chip {
    background: var(--pd-accent-soft);
    color: var(--pd-accent);
    border: 1px solid rgba(255, 161, 127, 0.25);
}

/* Painel de filtros com glassmorphism */
.pd-modern .validation-filters {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.7) 0%, rgba(24, 24, 24, 0.55) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow-1);
}

/* Date pickers no escopo coral */
.pd-modern .validation-date-picker {
    background-color: rgba(15, 15, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--pd-radius-sm);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern .validation-date-picker:focus-within {
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
}

.pd-modern .validation-date-picker .form-control {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
}

.pd-modern .validation-date-picker .form-control:focus {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #fff;
}

.pd-modern .validation-date-picker .input-group-text {
    background-color: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--pd-accent);
}

/* Foco coral nos selects/inputs do filtro */
.pd-modern .validation-filters .form-select:focus,
.pd-modern .validation-filters .form-control:focus {
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 0.2rem var(--pd-accent-soft);
}

.pd-modern .validation-filters .form-check-input:checked {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
}

.pd-modern .validation-filters .form-check-input:focus {
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 0.2rem var(--pd-accent-soft);
}

/* Toolbar de seleção: glassmorphism */
.pd-modern .validation-toolbar {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.65) 0%, rgba(24, 24, 24, 0.45) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    padding: 0.55rem 0.75rem;
}

.pd-modern .validation-toolbar .form-check-input:checked {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
}

/* Cards: surface escura, faixa coral no topo (no hover), elevação ao passar mouse */
.pd-modern .validation-card.stock-card {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-left: none;
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow-1);
    margin: 0 0.35rem 0.65rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pd-modern .validation-card.stock-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--pd-accent) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.pd-modern .validation-card.stock-card:hover {
    border-color: var(--pd-border-hover);
    box-shadow: var(--pd-shadow-2);
    transform: translateY(-1px);
}

.pd-modern .validation-card.stock-card:hover::before {
    opacity: 1;
}

/* Severidade (alert/danger/success) preservada na borda esquerda */
.pd-modern .validation-card.stock-card--alert {
    border-left: 3px solid var(--stock-warning);
}

.pd-modern .validation-card.stock-card--danger {
    border-left: 3px solid var(--stock-danger);
}

.pd-modern .validation-card.stock-card--success {
    border-left: 3px solid var(--stock-success);
}

/* Card selecionado (checkbox marcado) com contorno coral */
.pd-modern .vrow-check:checked + .validation-card-body,
.pd-modern .validation-card:has(.vrow-check:checked) {
    box-shadow: 0 0 0 1px var(--pd-accent) inset, var(--pd-shadow-2);
}

/* Sugestão em coral */
.pd-modern .validation-card .validation-suggested {
    color: var(--pd-accent);
}

/* Hover na zona clicável (origem/destino) em coral */
.pd-modern .validation-zone:hover {
    background: var(--pd-accent-soft);
    box-shadow: 0 0 0 1px rgba(255, 161, 127, 0.35) inset;
}

.pd-modern .validation-zone::after {
    color: var(--pd-accent);
}

/* Botão "Filtrar" como primário coral (substitui o btn-warning amarelo) */
.pd-modern .validation-filters .btn-warning {
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%);
    border: none;
    color: #1a1a1a;
    box-shadow: 0 6px 18px -5px var(--pd-accent-glow);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern .validation-filters .btn-warning:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -5px var(--pd-accent-glow);
    color: #1a1a1a;
}

/* btn-outline-light no header/filtros recebe hover coral discreto */
.pd-modern .btn-outline-light:hover {
    background: var(--pd-accent-soft);
    border-color: var(--pd-accent);
    color: var(--pd-accent);
}

/* Modais: títulos em coral, modal-content reforçado e botão OK coral */
.pd-modern .modal-title.yellow-light {
    color: var(--pd-accent);
}

.pd-modern .modal-content.stock-modal {
    border: 1px solid var(--pd-border);
    box-shadow: var(--pd-shadow-2);
}

.pd-modern .modal-footer .btn-warning {
    background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-strong) 100%);
    border: none;
    color: #1a1a1a;
    box-shadow: 0 6px 18px -5px var(--pd-accent-glow);
}

.pd-modern .modal-footer .btn-warning:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #1a1a1a;
}

/* Modal de detalhe (mapa): títulos dos blocos em coral */
.pd-modern .vmm-block h6 {
    color: var(--pd-accent);
}

.pd-modern .vmm-field-value--suggested {
    color: var(--pd-accent);
}

/* Scrollbar coral na lista de validações */
.pd-modern .validation-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.3);
}

.pd-modern .validation-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 161, 127, 0.5);
}

/* ===== Input de data/hora nos modais — espelha os filtros DataInicio/DataFim da sidebar ===== */
.pd-modern .pd-datetime {
    padding: 0 !important;
    background: rgba(15, 15, 15, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--pd-radius-sm) !important;
    min-height: 52px !important;
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern .pd-datetime:focus-within {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
}

.pd-modern .pd-datetime .form-floating {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative !important;
}

.pd-modern .pd-datetime .form-floating > .form-control {
    height: 50px !important;
    min-height: 50px !important;
    padding: 1.35rem 0.75rem 0.3rem !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.pd-modern .pd-datetime .form-floating > label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 0.4rem 0.75rem 0 !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    color: rgba(220, 220, 220, 0.5) !important;
    transform: none !important;
    transition: color 0.18s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.pd-modern .pd-datetime .form-floating > .form-control:focus ~ label,
.pd-modern .pd-datetime .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--pd-accent) !important;
    transform: none !important;
    opacity: 1 !important;
}

.pd-modern .pd-datetime .input-group-text {
    padding: 0 0.85rem !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(220, 220, 220, 0.5) !important;
    border-radius: 0 !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.pd-modern .pd-datetime .input-group-text:hover,
.pd-modern .pd-datetime:focus-within .input-group-text {
    background: var(--pd-accent-soft) !important;
    color: var(--pd-accent) !important;
}

/* Select2 (single) nos modais: herda o tema global de select2 (caixa/dropdown
   escuros + realce coral suave), garantindo consistência com os demais selects
   do app. Aqui só reforçamos o anel de foco coral, pra casar com o input de
   data (.pd-datetime) e os filtros da sidebar. */
.pd-modern .select2-container--default.select2-container--open .select2-selection--single,
.pd-modern .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft) !important;
}

/*#endregion*/

/*#region Dual range slider (faixa de DMT) — slider custom (dois thumbs em div) */
/* Posições calculadas via --pmin / --pmax (0..1), setadas pelo JS.
   O thumb tem 20px; o trajeto do centro é inset de 10px (raio) em cada lado,
   garantindo que as duas alças fiquem sempre inteiras e visíveis. */
.dmt-slider {
    position: relative;
    height: 24px;
    margin: 4px 0 2px;
    touch-action: none;
    --pmin: 0;
    --pmax: 1;
}

.dmt-slider__rail,
.dmt-slider__fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 999px;
}

.dmt-slider__rail {
    left: 10px;
    right: 10px;
    background: rgba(184, 198, 204, 0.22);
}

.dmt-slider__fill {
    left: calc(10px + var(--pmin) * (100% - 20px));
    right: calc(100% - 10px - var(--pmax) * (100% - 20px));
    background: var(--yellow-light);
}

.dmt-slider__thumb {
    position: absolute;
    top: 50%;
    left: calc(10px + var(--p) * (100% - 20px));
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--yellow-light);
    border: 2px solid #1e1e1e;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    cursor: grab;
    touch-action: none;
    transition: box-shadow 120ms ease;
}

.dmt-slider__thumb--min { --p: var(--pmin); }
.dmt-slider__thumb--max { --p: var(--pmax); }

.dmt-slider__thumb:hover {
    box-shadow: 0 0 0 5px rgba(255, 255, 179, 0.15), 0 1px 4px rgba(0, 0, 0, 0.6);
}

.dmt-slider__thumb.is-dragging,
.dmt-slider__thumb:focus-visible {
    outline: none;
    cursor: grabbing;
    box-shadow: 0 0 0 6px rgba(255, 255, 179, 0.22), 0 1px 4px rgba(0, 0, 0, 0.6);
}

.dmt-slider__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
    font-size: 0.72rem;
    color: rgba(184, 198, 204, 0.6);
}

.dmt-slider__readout {
    font-size: 0.8rem;
    font-weight: 600;
}
/*#endregion*/

/*#region Editar em lote — campos no mesmo padrão dos filtros */
/* select2 sempre 100% mesmo inicializado com o collapse escondido */
#editarLoteCollapse .select2-container {
    width: 100% !important;
}

/* iguala a altura dos inputs de distância à caixa do select2 single */
#editarLoteCollapse .lote-field-input {
    min-height: 57.99px;
}
/*#endregion*/

/*#region AcompanhaUso – au-modern design system
   Mesma linguagem visual do pd-modern, adaptada ao dashboard de uso.
   Escopo: containers com a classe .au-modern.
   ======================================================= */

.au-modern {
    --au-accent:      #FFFFB3;
    --au-green:       #A3FF33;
    --au-coral:       #FFA17F;
    --au-text:        rgba(235, 235, 235, 0.82);
    --au-muted:       rgba(235, 235, 235, 0.44);
    --au-border:      rgba(255, 255, 255, 0.08);
    --au-card-bg:     rgba(28, 28, 28, 0.94);
    --au-radius:      12px;
    --au-transition:  0.2s ease;
}

/* ---- KPI Row ---- */
.au-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.au-kpi-card {
    background: var(--au-card-bg);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    transition: border-color var(--au-transition), transform var(--au-transition), box-shadow var(--au-transition);
    cursor: default;
    user-select: none;
}

.au-kpi-card:hover {
    border-color: rgba(255, 255, 179, 0.22);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

.au-kpi-icon {
    align-items: center;
    background: rgba(255, 255, 179, 0.1);
    border-radius: 10px;
    color: var(--au-accent);
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 42px;
    justify-content: center;
    width: 42px;
    transition: background var(--au-transition);
}

.au-kpi-card:hover .au-kpi-icon {
    background: rgba(255, 255, 179, 0.16);
}

.au-kpi-icon--green {
    background: rgba(163, 255, 51, 0.12);
    color: var(--au-green);
}

.au-kpi-card:hover .au-kpi-icon--green {
    background: rgba(163, 255, 51, 0.2);
}

.au-kpi-icon--coral {
    background: rgba(255, 161, 127, 0.12);
    color: var(--au-coral);
}

.au-kpi-card:hover .au-kpi-icon--coral {
    background: rgba(255, 161, 127, 0.2);
}

.au-kpi-icon--muted {
    background: rgba(255, 255, 255, 0.05);
    color: var(--au-muted);
}

.au-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.au-kpi-value {
    color: var(--au-accent);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.au-kpi-label {
    color: var(--au-muted);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Chart Card ---- */
.au-chart-card {
    background: var(--au-card-bg);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.au-chart-header {
    align-items: center;
    border-bottom: 1px solid var(--au-border);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.75rem 1.2rem;
    flex-shrink: 0;
}

.au-chart-title {
    color: var(--au-text);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* Badge de contagem de dias */
.au-chart-badge {
    background: rgba(255, 161, 127, 0.1);
    border: 1px solid rgba(255, 161, 127, 0.22);
    border-radius: 999px;
    color: var(--au-coral);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.65rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Indicador de média no header do gráfico */
.au-chart-avg-label {
    align-items: center;
    color: var(--au-muted);
    display: flex;
    font-size: 0.75rem;
    gap: 0.4rem;
    white-space: nowrap;
}

.au-chart-avg-label strong {
    color: var(--au-accent);
    font-weight: 700;
}

.au-chart-avg-dash {
    background: repeating-linear-gradient(
        to right,
        rgba(255, 255, 179, 0.5) 0px,
        rgba(255, 255, 179, 0.5) 5px,
        transparent 5px,
        transparent 10px
    );
    border-radius: 2px;
    display: inline-block;
    height: 2px;
    width: 18px;
}

/* Chart body — container do ApexCharts */
.au-chart-body {
    flex: 1 1 auto;
    height: calc(100vh - 340px);
    min-height: 260px;
    overflow: hidden;
    padding: 0.5rem 0.25rem 0 0.25rem;
    position: relative;
}

/* ApexCharts: ocupa 100% do container */
.au-chart-body > div,
.au-chart-body .apexcharts-canvas {
    height: 100% !important;
    width:  100% !important;
}

/* ---- Toolbar ---- */
.au-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.au-toolbar__title {
    color: var(--au-text);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.au-toolbar__spacer { flex: 1; }

/* ---- Table view ---- */
.au-modern #tableView {
    background: var(--au-card-bg);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    overflow: hidden;
    margin-top: 0;
}

.au-modern #tableView.d-none { display: none !important; }

.au-modern #tableView .au-table-header {
    align-items: center;
    border-bottom: 1px solid var(--au-border);
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem 1.2rem;
}

.au-modern #tableView .au-table-title {
    color: var(--au-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.au-modern #tableView table thead th {
    background: rgba(18, 18, 18, 0.85);
    border-bottom: 1px solid var(--au-border) !important;
    color: var(--au-muted);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 0.8rem 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.au-modern #tableView table tbody td {
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--au-text);
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
}

.au-modern #tableView table tbody td:first-child {
    color: var(--au-muted);
    font-size: 0.82rem;
}

.au-modern #tableView table tbody td:last-child {
    color: var(--au-accent);
    font-weight: 600;
}

.au-modern #tableView table tbody tr:hover td {
    background: rgba(255, 255, 179, 0.04);
}

.au-modern #tableView table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.025);
    color: inherit;
}

/* ---- Empty state ---- */
.au-empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 2rem;
}

.au-empty-icon {
    color: var(--au-muted);
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    opacity: 0.45;
}

.au-empty-title {
    color: var(--au-text);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.au-empty-sub {
    color: var(--au-muted);
    font-size: 0.82rem;
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .au-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .au-chart-body {
        height: calc(100vh - 400px);
    }
}

@media (max-width: 575.98px) {
    .au-kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .au-kpi-value {
        font-size: 1.25rem;
    }

    .au-kpi-label {
        font-size: 0.62rem;
    }

    .au-chart-body {
        height: calc(100vh - 460px);
        min-height: 220px;
        padding: 0.25rem 0;
    }
}

/* ================================================================
   ApexCharts – overrides escopados em .au-modern
   Garante que o gráfico siga a identidade visual do projeto sem
   afetar outros gráficos ApexCharts na aplicação.
   ================================================================ */

/* Fundo transparente no canvas */
.au-modern .apexcharts-canvas,
.au-modern .apexcharts-canvas svg {
    background: transparent !important;
}

/* Tooltip customizado */
.au-modern .apexcharts-tooltip {
    background    : rgba(18, 18, 18, 0.97) !important;
    border        : 1px solid rgba(255, 161, 127, 0.20) !important;
    border-radius : 10px !important;
    box-shadow    : 0 8px 28px rgba(0, 0, 0, 0.55) !important;
    color         : rgba(235, 235, 235, 0.88) !important;
}

.au-modern .apexcharts-tooltip-title {
    background   : rgba(255, 161, 127, 0.07) !important;
    border-bottom: 1px solid rgba(255, 161, 127, 0.14) !important;
    color        : #FFA17F !important;
    font-size    : 0.78rem !important;
    font-weight  : 700 !important;
    padding      : 7px 12px !important;
    margin-bottom: 0 !important;
}

.au-modern .apexcharts-tooltip-series-group {
    padding: 6px 12px !important;
}

.au-modern .apexcharts-tooltip-text-y-value {
    color      : rgba(235, 235, 235, 0.90) !important;
    font-weight: 600 !important;
}

.au-modern .apexcharts-tooltip-marker {
    border-radius: 3px !important;
    height       : 10px !important;
    margin-right : 6px !important;
    width        : 10px !important;
}

/* Esconde o mini-tooltip do eixo X */
.au-modern .apexcharts-xaxistooltip {
    display: none !important;
}

/* Annotation label */
.au-modern .apexcharts-yaxis-annotation-label {
    font-size  : 11px !important;
    font-weight: 600 !important;
}

/* Legenda */
.au-modern .apexcharts-legend-text {
    color    : rgba(220, 220, 220, 0.62) !important;
    font-size: 12px !important;
}

.au-modern .apexcharts-legend-marker {
    border-radius: 3px !important;
}

/* Rótulos dos eixos */
.au-modern .apexcharts-xaxis-label,
.au-modern .apexcharts-yaxis-label {
    fill: rgba(220, 220, 220, 0.50) !important;
}

/* Bordas dos eixos */
.au-modern .apexcharts-xaxis-tick,
.au-modern .apexcharts-xaxis line,
.au-modern .apexcharts-yaxis-tick {
    stroke: rgba(255, 255, 255, 0.07) !important;
}

/* Linhas de grade */
.au-modern .apexcharts-gridline {
    stroke: rgba(255, 255, 255, 0.05) !important;
}

/* Crosshair */
.au-modern .apexcharts-xcrosshairs,
.au-modern .apexcharts-ycrosshairs {
    stroke        : rgba(255, 161, 127, 0.22) !important;
    stroke-dasharray: 4 !important;
}

/* Marcadores: anel de foco */
.au-modern .apexcharts-active-point circle {
    stroke: rgba(255, 161, 127, 0.5) !important;
}

/* Drop-shadow no path da linha */
.au-modern .apexcharts-series path {
    filter: drop-shadow(0 2px 8px rgba(255, 161, 127, 0.22));
}
/*#endregion*/

/*#region Checklist – ck-modern design system
   Extensão dos padrões pd-modern para a tela de Checklists.
   Reutiliza stock-item-card, stock-badge, stock-action e pd-view-toggle.
   Escopo: container .pd-modern (já aplicado em Index.cshtml).
   ======================================================= */

/* ---- Barra de conformidade no card ---- */
.ck-progress-bar {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    height: 5px;
    margin-top: 0.35rem;
    overflow: hidden;
    width: 100%;
}

.ck-progress-bar__fill {
    border-radius: 999px;
    height: 100%;
    transition: width 0.5s ease;
}

.ck-progress-bar__fill--ok  { background: var(--stock-success); }
.ck-progress-bar__fill--nc  { background: var(--stock-danger); }

/* Valor de NC em vermelho */
.ck-nc-value {
    color: var(--stock-danger) !important;
    font-weight: 700 !important;
}

/* ---- Modal de itens (ck-modal) ---- */
.ck-modal {
    --ck-border: rgba(255, 255, 255, 0.07);
}

.ck-modal .modal-content {
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(235, 235, 235, 0.88);
    /* overflow visível para modal-dialog-scrollable funcionar corretamente */
    overflow: visible;
}

/* Para cortar os cantos arredondados sem afetar o scroll */
.ck-modal .modal-content .modal-header {
    border-radius: 14px 14px 0 0;
}

.ck-modal .modal-content .modal-footer {
    border-radius: 0 0 14px 14px;
}

.ck-modal .modal-header {
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--ck-border);
    padding: 1rem 1.25rem 0.85rem;
    align-items: flex-start;
}

.ck-modal-title {
    color: #f1f1f1;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.ck-modal-subtitle {
    color: var(--stock-muted);
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

.ck-modal-summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

/* ---- Cabeçalho da lista de itens ---- */
.ck-item-list-header {
    align-items: center;
    background: rgba(15, 15, 15, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--stock-muted);
    display: flex;
    font-size: 0.67rem;
    font-weight: 700;
    gap: 0.75rem;
    letter-spacing: 0.07em;
    padding: 0.55rem 1rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ck-col-dot    { flex: 0 0 16px; }
.ck-col-name   { flex: 1 1 auto; min-width: 0; }
.ck-col-status { flex: 0 0 auto; text-align: right; min-width: 70px; }

/* ---- Colunas do corpo da linha (espelham o header) ---- */
.ck-item-body  { flex: 1 1 auto; min-width: 0; }
.ck-item-status{ flex: 0 0 auto; min-width: 70px; display: flex; align-items: flex-start; }

/* ---- Linha de item ---- */
.ck-item-row {
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.038);
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    transition: background 0.14s ease;
}

.ck-item-row:last-child { border-bottom: none; }

.ck-item-row:hover { background: rgba(255, 255, 255, 0.025); }

.ck-item-row--nc {
    background: rgba(255, 138, 122, 0.045);
    border-left: 3px solid var(--stock-danger);
    padding-left: calc(1rem - 3px);
}

.ck-item-row--nc:hover { background: rgba(255, 138, 122, 0.07); }

.ck-item-row--imp {
    border-left: 3px solid var(--stock-warning);
    padding-left: calc(1rem - 3px);
}

/* Dot de indicador */
.ck-item-dot {
    border-radius: 50%;
    flex-shrink: 0;
    height: 8px;
    margin-top: 6px;
    width: 8px;
}

.ck-item-dot--ok   { background: var(--stock-success); box-shadow: 0 0 5px rgba(111,224,140,0.4); }
.ck-item-dot--nc   { background: var(--stock-danger);  box-shadow: 0 0 5px rgba(255,138,122,0.4); }
.ck-item-dot--na   { background: var(--stock-muted);   opacity: 0.6; }
.ck-item-dot--muted{ background: rgba(255,255,255,0.2); }

/* Nome do item */
.ck-item-name {
    color: rgba(235, 235, 235, 0.82);
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
    min-width: 0;
    word-break: break-word;
}

.ck-item-name--nc { color: rgba(255, 138, 122, 0.92); }

/* Comentário abaixo do nome */
.ck-item-comment {
    color: var(--stock-muted);
    font-size: 0.775rem;
    line-height: 1.4;
    margin-top: 0.2rem;
    word-break: break-word;
}

/* Status badges do item */
.ck-item-badges {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex-shrink: 0;
    justify-content: flex-end;
    padding-top: 2px;
}

/* ---- Modal footer ---- */
.ck-modal .modal-footer {
    background: rgba(255, 255, 255, 0.018);
    border-top: 1px solid var(--ck-border);
    padding: 0.7rem 1.25rem;
}

/* Spacer genérico para toolbars (empurra itens para a direita) */
.stock-items-toolbar__spacer {
    flex: 1 1 auto;
}

/* ---- Mini barra de conformidade no header do modal ---- */
.ck-modal-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ck-modal-progress__bar {
    flex: 1 1 auto;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.ck-modal-progress__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-modal-progress__fill--ok { background: var(--stock-success); }
.ck-modal-progress__fill--nc { background: var(--stock-danger); }

.ck-modal-progress__pct {
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    color: rgba(220, 220, 220, 0.7);
    min-width: 2.8rem;
    text-align: right;
}

.ck-modal-progress__pct--ok { color: var(--stock-success); }
.ck-modal-progress__pct--nc { color: var(--stock-danger); }

/* ---- Layout de linha v2 (nome + comentário inline) ---- */
.ck-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ck-item-status {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

/* ---- Campos de busca autocomplete na sidebar (pd-nav-field) ---- */
.pd-modern #navigation .pd-nav-field {
    position: relative;
    background: rgba(15, 15, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--pd-radius-sm, 8px);
    margin-bottom: 0.5rem;
    min-height: 52px;
    overflow: visible;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-modern #navigation .pd-nav-field:focus-within {
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
}

/* Ícone decorativo (lupa) à direita */
.pd-modern #navigation .pd-nav-field__icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(220, 220, 220, 0.25);
    font-size: 0.7rem;
    pointer-events: none;
    z-index: 3;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.pd-modern #navigation .pd-nav-field:focus-within .pd-nav-field__icon {
    color: var(--pd-accent);
    opacity: 0.7;
}

/* Botão × para limpar o campo */
.pd-modern #navigation .pd-nav-field__clear {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(220, 220, 220, 0.35);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.2rem;
    z-index: 4;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transition: background 0.15s ease, color 0.15s ease;
}

.pd-modern #navigation .pd-nav-field__clear:hover {
    background: rgba(255, 161, 127, 0.18);
    color: var(--pd-accent);
}

.pd-modern #navigation .pd-nav-field.has-value .pd-nav-field__icon {
    display: none;
}

.pd-modern #navigation .pd-nav-field.has-value .pd-nav-field__clear {
    display: flex;
}

/* form-floating dentro do pd-nav-field não precisa de margin-bottom própria */
.pd-modern #navigation .pd-nav-field .form-floating {
    margin-bottom: 0 !important;
}

/* Sobrescreve o padding-right do input para não sobrepor o ícone/clear */
.pd-modern #navigation .pd-nav-field .form-floating > .form-control {
    padding-right: 2.2rem !important;
}

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
    .ck-modal .modal-content { border-radius: 0; }
    .ck-item-list-header { display: none; }
    .ck-item-row { gap: 0.5rem; padding: 0.55rem 0.75rem; }
}
/*#endregion*/

/*#region APR – estilos complementares
   Reutiliza pd-modern + ck-modal + stock-item-card.
   Apenas ajustes específicos da tela APR.
   ======================================================= */

/* Tabela APR dentro do pd-modern usa os estilos pd-table-view.
   A tabela em si usa table-striped (Bootstrap) que é estilizado
   pelos overrides globais de .pd-modern :is(#tableView, #tableViewEmployee). */
.pd-modern :is(#tableView, #tableViewEmployee) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.025);
    color: rgba(220, 220, 220, 0.82);
}

.pd-modern :is(#tableView, #tableViewEmployee) .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent;
    color: rgba(220, 220, 220, 0.82);
}

.pd-modern :is(#tableView, #tableViewEmployee) .table thead th {
    background: rgba(18, 18, 18, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: rgba(220, 220, 220, 0.5);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.85rem;
    text-transform: uppercase;
    border-top: none;
}

.pd-modern :is(#tableView, #tableViewEmployee) .table tbody td {
    border-color: rgba(255, 255, 255, 0.04);
    font-size: 0.875rem;
    padding: 0.55rem 0.85rem;
    vertical-align: middle;
}

.pd-modern :is(#tableView, #tableViewEmployee) .table tbody tr:hover > * {
    background-color: rgba(255, 161, 127, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   #region  SISTEMA TIPOGRÁFICO GLOBAL
   Hierarquia de fontes compartilhada entre TODAS as telas do sistema.
   Garante que qualquer tela que use os componentes stock-item-card,
   stock-item-field, stock-action, pd-hero, stock-badge etc. receba
   automaticamente o mesmo nível de clareza e destaque da tela DailyPart.
   Os escopos .pd-modern e .ck-modern sobrescrevem com variáveis de cor
   adicionando o toque extra de polimento (glow, acento coral, etc.).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variáveis base do sistema (dark theme) ───────────────────────── */
:root {
    --sys-text-strong:   #ffffff;
    --sys-text-primary:  #f1f1f1;
    --sys-text-muted:    rgba(220, 220, 220, 0.52);
    --sys-text-accent:   #FFA17F;
    --sys-surface:       linear-gradient(180deg, rgba(36,36,36,.92) 0%, rgba(26,26,26,.96) 100%);
    --sys-surface-hover: linear-gradient(180deg, rgba(42,42,42,.96) 0%, rgba(30,30,30,.98) 100%);
    --sys-border:        rgba(255,255,255,.06);
    --sys-border-hover:  rgba(255,161,127,.45);
    --sys-radius-lg:     16px;
    --sys-radius:        12px;
    --sys-radius-sm:     8px;
    --sys-shadow-1:      0 6px 22px -10px rgba(0,0,0,.55);
    --sys-shadow-2:      0 18px 40px -14px rgba(0,0,0,.70), 0 0 0 1px rgba(255,161,127,.13);
    --sys-transition:    0.22s ease;
}

/* ══ 1. CARD CONTAINER ═══════════════════════════════════════════════ */
.stock-item-card {
    background:    var(--sys-surface);
    border:        1px solid var(--sys-border);
    border-radius: var(--sys-radius);
    box-shadow:    var(--sys-shadow-1);
    margin:        0 0.35rem 0.75rem;
    overflow:      hidden;
    position:      relative;
    transition:    transform var(--sys-transition),
                   box-shadow var(--sys-transition),
                   border-color var(--sys-transition),
                   background var(--sys-transition);
}

/* Faixa de acento no topo do card */
.stock-item-card::before {
    background:     linear-gradient(90deg, transparent 0%, var(--sys-text-accent) 50%, transparent 100%);
    content:        "";
    height:         2px;
    left:           0;
    opacity:        0;
    pointer-events: none;
    position:       absolute;
    right:          0;
    top:            0;
    transition:     opacity var(--sys-transition), height var(--sys-transition);
    z-index:        2;
}

.stock-item-card:hover {
    background:    var(--sys-surface-hover);
    border-color:  var(--sys-border-hover);
    box-shadow:    var(--sys-shadow-2);
    transform:     translateY(-2px);
}

.stock-item-card:hover::before {
    height:  3px;
    opacity: 1;
}

/* Variações de status */
.stock-item-card--alert::before {
    background: linear-gradient(90deg, transparent 0%, var(--stock-danger) 50%, transparent 100%);
    height:  3px;
    opacity: 0.95;
}

.stock-item-card--edited::before {
    background: linear-gradient(90deg, transparent 0%, var(--stock-warning) 50%, transparent 100%);
    height:  3px;
    opacity: 0.95;
}

.stock-item-card--added::before {
    background: linear-gradient(90deg, transparent 0%, var(--stock-info) 50%, transparent 100%);
    height:  3px;
    opacity: 0.95;
}

/* ── Header e grid do card ── */
.stock-item-card__header {
    align-items:   center;
    background:    rgba(255,255,255,.018);
    border-bottom: 1px solid rgba(255,255,255,.05);
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.65rem 1.3rem;
    padding:       0.95rem 1.1rem;
}

.stock-item-card__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap:                   0.65rem 1.3rem;
    padding:               0.85rem 1.1rem;
}

/* ══ 2. HIERARQUIA TIPOGRÁFICA DOS CAMPOS ════════════════════════════ */
.stock-item-field {
    align-items:    flex-start;
    display:        flex;
    flex-direction: column;
    min-width:      0;
    text-align:     left;
}

/* Label: discreta, uppercase, alta legibilidade mesmo pequena */
.stock-item-field__label {
    color:          var(--sys-text-muted);
    font-size:      0.66rem;
    font-weight:    600;
    letter-spacing: 0.07em;
    line-height:    1.2;
    margin-bottom:  0.18rem;
    text-transform: uppercase;
    white-space:    nowrap;
}

/* Valor padrão: legível, contraste médio */
.stock-item-field__value {
    color:       var(--sys-text-primary);
    font-size:   0.92rem;
    font-weight: 500;
    line-height: 1.35;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Valor primário: destaque máximo — nome do equipamento, título principal */
.stock-item-field__value--strong {
    color:          var(--sys-text-strong);
    font-size:      1.08rem;
    font-weight:    700;
    letter-spacing: 0.005em;
    line-height:    1.2;
}

/* ══ 3. HERO SECTION (imagem + nome + operador) ══════════════════════ */
.pd-hero {
    align-items: center;
    text-align:  left;
}

.pd-hero__media {
    align-items:     center;
    display:         inline-flex;
    flex:            0 0 auto;
    justify-content: center;
    transition:      transform var(--sys-transition);
}

.stock-item-card:hover .pd-hero__media {
    transform: scale(1.04);
}

.pd-hero__media .vehicle-image {
    filter:     drop-shadow(0 4px 10px rgba(0,0,0,.50));
    max-height: 48px;
    transition: filter var(--sys-transition);
    width:      auto;
}

.stock-item-card:hover .pd-hero__media .vehicle-image {
    filter: drop-shadow(0 6px 14px rgba(255,161,127,.32));
}

.pd-hero__info {
    flex:      1 1 auto;
    min-width: 0;
}

/* Operador / matrícula — texto discreto, leitura rápida */
.pd-hero__meta {
    color:     var(--sys-text-muted);
    font-size: 0.82rem;
}

.pd-hero__sep {
    color:   var(--sys-text-accent);
    margin:  0 0.2rem;
    opacity: 0.7;
}

/* ══ 4. BOTÕES DE AÇÃO ═══════════════════════════════════════════════ */
.stock-action {
    align-items:     center;
    background:      rgba(255,255,255,.035);
    border:          1px solid rgba(255,255,255,.07);
    border-radius:   9px;
    color:           rgba(220,220,220,.70);
    cursor:          pointer;
    display:         inline-flex;
    font-size:       0.88rem;
    height:          34px;
    justify-content: center;
    transition:      background var(--sys-transition),
                     color var(--sys-transition),
                     border-color var(--sys-transition),
                     transform var(--sys-transition),
                     box-shadow var(--sys-transition);
    width:           34px;
}

.stock-action:hover {
    background:   rgba(255,161,127,.14);
    border-color: rgba(255,161,127,.45);
    box-shadow:   0 6px 16px -4px rgba(255,161,127,.30);
    color:        #FFA17F;
    transform:    translateY(-1px);
}

/* ══ 5. TOOLBAR ══════════════════════════════════════════════════════ */
.stock-items-toolbar {
    align-items:     center;
    background:      linear-gradient(180deg, rgba(38,38,38,.65) 0%, rgba(24,24,24,.45) 100%);
    border:          1px solid var(--sys-border);
    border-radius:   var(--sys-radius-lg);
    box-shadow:      var(--sys-shadow-1);
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.6rem;
    margin:          0.25rem 0.35rem 0.85rem;
    padding:         0.85rem 1.1rem;
}

.stock-items-toolbar__title {
    color:        var(--sys-text-strong);
    font-size:    0.97rem;
    font-weight:  700;
    padding-left: 0.95rem;
    position:     relative;
}

/* Barra de acento coral à esquerda do título */
.stock-items-toolbar__title::before {
    background:    linear-gradient(180deg, #FFA17F, #ff7d56);
    border-radius: 999px;
    box-shadow:    0 0 14px rgba(255,161,127,.38);
    content:       "";
    height:        72%;
    left:          0;
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    width:         4px;
}

.stock-items-toolbar__spacer {
    flex: 1 1 auto;
}

/* ══ 6. BUSCA ════════════════════════════════════════════════════════ */
.stock-search {
    background:    rgba(15,15,15,.55);
    border:        1px solid var(--sys-border);
    border-radius: var(--sys-radius-sm);
    color:         #fff;
    min-width:     200px;
    padding:       0.5rem 0.85rem 0.5rem 2.1rem;
    transition:    border-color var(--sys-transition), background var(--sys-transition), box-shadow var(--sys-transition);
}

.stock-search:focus {
    background:   rgba(15,15,15,.85);
    border-color: #FFA17F;
    box-shadow:   0 0 0 3px rgba(255,161,127,.14);
    color:        #fff;
    outline:      none;
}

.stock-search-wrap {
    position: relative;
}

.stock-search-wrap .stock-search-icon {
    color:         var(--sys-text-muted);
    font-size:     0.9rem;
    left:          0.72rem;
    line-height:   1;
    pointer-events: none;
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    z-index:       1;
    transition:    color var(--sys-transition);
}

.stock-search-wrap:focus-within .stock-search-icon {
    color: #FFA17F;
}

/* ══ 7. BADGES REFINADOS ═════════════════════════════════════════════ */
/* Sobrescreve o ::before pulsante para versões dentro de cards modernos */
.stock-item-card .stock-badge,
.stock-items-toolbar .stock-badge {
    background:  rgba(255,255,255,.05);
    border:      1px solid rgba(255,255,255,.08);
    font-size:   0.66rem;
    letter-spacing: 0.05em;
    line-height: 1;
    padding:     0.22rem 0.65rem;
}

.stock-item-card .stock-badge--success,
.stock-items-toolbar .stock-badge--success {
    background:  rgba(111,224,140,.12);
    border-color: rgba(111,224,140,.32);
    color:       var(--stock-success);
}

.stock-item-card .stock-badge--danger,
.stock-items-toolbar .stock-badge--danger {
    background:  rgba(255,138,122,.12);
    border-color: rgba(255,138,122,.32);
    color:       var(--stock-danger);
}

.stock-item-card .stock-badge--warning,
.stock-items-toolbar .stock-badge--warning {
    background:  rgba(255,210,127,.12);
    border-color: rgba(255,210,127,.32);
    color:       var(--stock-warning);
}

.stock-item-card .stock-badge--info,
.stock-items-toolbar .stock-badge--info {
    background:  rgba(141,208,255,.12);
    border-color: rgba(141,208,255,.32);
    color:       var(--stock-info);
}

.stock-item-card .stock-badge--muted,
.stock-items-toolbar .stock-badge--muted {
    background:  rgba(184,198,204,.08);
    border-color: rgba(255,255,255,.07);
    color:       var(--sys-text-muted);
}

/* ══ 8. BOTÕES PRINCIPAIS ════════════════════════════════════════════ */
.stock-btn-primary {
    background:    linear-gradient(135deg, #FFA17F 0%, #ff7d56 100%);
    border:        none;
    border-radius: var(--sys-radius-sm);
    box-shadow:    0 6px 18px -5px rgba(255,161,127,.38);
    color:         #1a1a1a;
    font-weight:   700;
    padding:       0.5rem 1.1rem;
    transition:    transform var(--sys-transition), filter var(--sys-transition), box-shadow var(--sys-transition);
}

.stock-btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 22px -5px rgba(255,161,127,.52);
    filter:     brightness(1.06);
    transform:  translateY(-1px);
}

.stock-btn-primary:disabled,
.stock-btn-primary[disabled] {
    background: rgba(255,161,127,.18);
    box-shadow: none;
    color:      rgba(255,255,255,.4);
    cursor:     not-allowed;
    transform:  none;
    filter:     none;
}

.stock-btn-secondary {
    background:    transparent;
    border:        1px solid var(--sys-border);
    border-radius: var(--sys-radius-sm);
    color:         var(--sys-text-primary);
    font-weight:   500;
    padding:       0.5rem 0.95rem;
    transition:    background var(--sys-transition), border-color var(--sys-transition), color var(--sys-transition);
}

.stock-btn-secondary:hover {
    background:   rgba(255,161,127,.12);
    border-color: rgba(255,161,127,.45);
    color:        #FFA17F;
}

/* ══ 9. ESTADO VAZIO ═════════════════════════════════════════════════ */
.stock-empty {
    align-items:    center;
    color:          var(--sys-text-muted);
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    justify-content: center;
    padding:        3rem 1rem;
    text-align:     center;
}

.stock-empty i {
    font-size: 2.2rem;
    opacity:   0.35;
}

.stock-empty p {
    font-size: 0.92rem;
}

/* ══ 10. OVERRIDES ck-modern ═══════════════════════════════════════
   Garante que Checklist e APR tenham o mesmo polimento do pd-modern.
   As variáveis --pd-* podem estar disponíveis via herança se o pai
   for .pd-modern; caso não esteja, os valores fixos são o fallback.
   ════════════════════════════════════════════════════════════════════ */
.ck-modern .stock-item-field__label {
    color:          var(--pd-text-muted, rgba(220,220,220,.52));
    font-size:      0.66rem;
    font-weight:    600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ck-modern .stock-item-field__value {
    color:       var(--pd-text, #f1f1f1);
    font-size:   0.92rem;
    font-weight: 500;
    line-height: 1.35;
}

.ck-modern .stock-item-field__value--strong {
    color:          var(--sys-text-strong);
    font-size:      1.08rem;
    font-weight:    700;
    letter-spacing: 0.005em;
    line-height:    1.2;
}

.ck-modern .pd-hero__meta {
    color:     var(--pd-text-muted, rgba(220,220,220,.52));
    font-size: 0.82rem;
}

.ck-modern .stock-action {
    background:    rgba(255,255,255,.035);
    border:        1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    color:         rgba(220,220,220,.70);
    height:        34px;
    width:         34px;
}

.ck-modern .stock-action:hover {
    background:   var(--pd-accent-soft, rgba(255,161,127,.14));
    border-color: var(--pd-accent, #FFA17F);
    box-shadow:   0 6px 16px -4px var(--pd-accent-glow, rgba(255,161,127,.30));
    color:        var(--pd-accent, #FFA17F);
    transform:    translateY(-1px);
}

.ck-modern .stock-items-toolbar {
    border-color: var(--pd-border, rgba(255,255,255,.06));
}

.ck-modern .stock-items-toolbar__title::before {
    background: linear-gradient(180deg, var(--pd-accent, #FFA17F), var(--pd-accent-strong, #ff7d56));
    box-shadow: 0 0 14px var(--pd-accent-glow, rgba(255,161,127,.38));
}

.ck-modern .stock-badge--muted {
    background:   var(--pd-accent-soft, rgba(255,161,127,.12));
    border-color: rgba(255,161,127,.22);
    color:        var(--pd-accent, #FFA17F);
}

/* ══ 11. TIPOGRAFIA DE TABELAS ════════════════════════════════════════
   Tabelas dentro de telas modernas (pd-modern, ck-modern) recebem
   a mesma hierarquia tipográfica dos cards.
   ════════════════════════════════════════════════════════════════════ */
.pd-modern table.table thead th,
.ck-modern  table.table thead th {
    background:     rgba(18,18,18,.85);
    border-bottom:  1px solid rgba(255,255,255,.07) !important;
    border-top:     none;
    color:          rgba(220,220,220,.50);
    font-size:      0.70rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    padding:        0.6rem 0.85rem;
    text-transform: uppercase;
}

.pd-modern table.table tbody td,
.ck-modern  table.table tbody td {
    border-color:   rgba(255,255,255,.04);
    color:          var(--sys-text-primary);
    font-size:      0.875rem;
    padding:        0.55rem 0.85rem;
    vertical-align: middle;
}

.pd-modern table.table tbody tr:hover > *,
.ck-modern  table.table tbody tr:hover > * {
    background-color: rgba(255,161,127,.04);
}

/* ══ 12. RESPONSIVIDADE ══════════════════════════════════════════════ */
@media (max-width: 576px) {
    .stock-item-card__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stock-item-field__value--strong {
        font-size: 1rem;
    }

    .stock-items-toolbar {
        padding: 0.65rem 0.85rem;
    }

    .stock-search {
        min-width: 0;
        width: 100%;
    }
}
/*#endregion*/

/* ══ preventive-page ════════════════════════════════════════════════════ */

.preventive-page .mensagem-stage {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 27px);
    padding: .5rem .75rem 2.5rem;
    box-sizing: border-box;
}

.preventive-page .mensagem-stage::-webkit-scrollbar { width: 5px; }
.preventive-page .mensagem-stage::-webkit-scrollbar-track { background: transparent; }
.preventive-page .mensagem-stage::-webkit-scrollbar-thumb { background: rgba(255,161,127,.25); border-radius: 999px; }
.preventive-page .mensagem-stage::-webkit-scrollbar-thumb:hover { background: rgba(255,161,127,.45); }

@media (max-width: 575.98px) {
    .preventive-page .mensagem-stage {
        padding: .5rem .35rem 2rem;
        max-height: calc(100vh - 28px);
    }
}

/* Select de Plano — mesmo estilo do pd-sf do dropdown */
.preventive-page .plan-sf {
    position: relative;
    display: block;
}

.preventive-page .plan-sf .form-floating > .form-select {
    height: 50px !important;
    min-height: 50px !important;
    padding: 1.35rem 2.2rem 0.3rem 0.75rem !important;
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    border-radius: var(--pd-radius-sm, 8px) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}

.preventive-page .plan-sf .form-floating > .form-select:focus {
    border-color: var(--pd-accent, #ffa17f) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-soft, rgba(255,161,127,.15)) !important;
}

.preventive-page .plan-sf .form-floating > .form-select option {
    background: #1e1b18;
    color: #e8e0d8;
}

.preventive-page .plan-sf .form-floating > label {
    color: var(--pd-accent, #ffa17f) !important;
    opacity: 1 !important;
}

.preventive-page .plan-sf .pd-sf-chev {
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
}

.preventive-page .plan-sf:focus-within .pd-sf-chev {
    color: var(--pd-accent, #ffa17f);
    transform: translateY(-50%) rotate(180deg);
}

.preventive-page .plan-sf:focus-within .form-floating > .form-select {
    border-color: var(--pd-accent, #ffa17f) !important;
}

.preventive-page .stock-item-card:hover {
    border-left-color: var(--nm05);
    box-shadow: 0 18px 40px rgba(0,0,0,0.46), 0 0 20px rgba(255,161,127,0.14);
}

/* Inputs da página preventive-page (fora do #navigation e do modal) */
.preventive-page .form-control,
.preventive-page .form-select {
    background: rgb(0 0 0 / 30%) !important;
    border: 1px solid rgb(55 50 49) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.preventive-page .form-control:focus,
.preventive-page .form-select:focus {
    border-color: var(--nm05, #ffa17f) !important;
    box-shadow: 0 0 0 3px rgba(255,161,127,.18) !important;
}
.preventive-page .form-floating > label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 0.38rem 0.75rem 0 !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    color: rgba(220,220,220,0.5) !important;
    transform: none !important;
    transition: color 0.18s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
}
.preventive-page .form-floating > .form-control:focus ~ label,
.preventive-page .form-floating > .form-control:not(:placeholder-shown) ~ label,
.preventive-page .form-floating > .form-select:focus ~ label {
    color: var(--nm05, #ffa17f) !important;
    transform: none !important;
    opacity: 1 !important;
}
.preventive-page .form-floating > .form-control,
.preventive-page .form-floating > .form-select {
    height: 62px !important;
    min-height: 62px !important;
    padding: 1.7rem 0.85rem 0.45rem !important;
    font-size: 1rem !important;
}
/* pd-sf dentro da página (itens de etapa no formulário) */
.preventive-page .pd-sf {
    position: relative;
    display: block;
}
.preventive-page .pd-sf .form-floating > .form-control {
    padding-right: 2.2rem !important;
}
.preventive-page .pd-sf .pd-sf-chev {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,161,127,.38);
    pointer-events: none;
    font-size: .75rem;
    transition: transform .2s, color .2s;
}
.preventive-page .pd-sf:focus-within .pd-sf-chev {
    color: var(--nm05, #ffa17f);
    transform: translateY(-50%) rotate(180deg);
}

/*#endregion*/

/*#region Dashboard (Op) — integração pd-modern*/
/* Botão Visualizar no mesmo padrão dos botões da sidebar pd-modern */
.pd-modern #navigation #visualizar-dashboard {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.82rem;
    border-radius: var(--pd-radius-sm);
}

/* Barra mobile (botão Filtros + navegação entre visões) — só existe < lg */
.dashboard-page .dashboard-mobile-bar {
    display: none;
}

@media (max-width: 991.98px) {
    /* No drawer mobile o formulário de filtros fica sempre visível;
       o strip de ícones e o chevron de colapso são recursos do desktop. */
    .dashboard-page #menu-icons,
    .dashboard-page #minimize-button {
        display: none !important;
    }

    .dashboard-page #dropdowns-content.hidden-side-bar #navigation {
        display: flex !important;
    }

    .dashboard-page .dashboard-mobile-bar {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem;
        position: sticky;
        top: 51px; /* navbar fixed-top */
        z-index: 1020;
        background: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .dashboard-page .dashboard-mobile-bar .pd-filters-toggle {
        flex: 0 0 auto;
    }

    .dashboard-page #mobile-view-icons {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1 1 auto;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .dashboard-page #mobile-view-icons .view-btn {
        flex: 0 0 auto;
    }
}
/*#endregion*/

/*#region Dashboard (Op) — modernização do conteúdo (padrão pd-modern)
   Escopo: .dashboard-page. Os partials mantêm as classes utilitárias
   (gray90-b etc.) que o dashboard.js usa como âncora; a cara moderna
   vem toda daqui. */

/* Estado inicial (antes do primeiro Visualizar) */
.dashboard-page .dashboard-empty-state {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 2rem;
    text-align: center;
    color: var(--pd-text-muted);
}

.dashboard-page .dashboard-empty-state i {
    font-size: 2.6rem;
    color: var(--pd-accent);
    opacity: 0.55;
    filter: drop-shadow(0 0 18px var(--pd-accent-glow));
}

.dashboard-page .dashboard-empty-state h5 {
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.dashboard-page .dashboard-empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

.dashboard-page .dashboard-empty-state strong {
    color: var(--pd-accent);
}

/* Presets de período na sidebar */
.pd-modern #navigation #periodo-presets .btn {
    background: var(--pd-accent-soft) !important;
    border: 1px solid rgba(255, 161, 127, 0.25);
    color: var(--pd-accent) !important;
    border-radius: var(--pd-radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.4rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pd-modern #navigation #periodo-presets .btn:hover {
    background: var(--pd-accent-soft-2) !important;
    border-color: var(--pd-accent);
    transform: translateY(-1px);
}

/* Botões de visão (strip lateral e barra mobile) */
.dashboard-page #menu-icons .btn,
.dashboard-page #mobile-view-icons .view-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-sm) !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.dashboard-page #menu-icons .btn:hover,
.dashboard-page #mobile-view-icons .view-btn:hover {
    border-color: rgba(255, 161, 127, 0.5) !important;
    background: var(--pd-accent-soft) !important;
    transform: translateY(-1px);
}

.dashboard-page .view-btn.border-warning {
    border-color: var(--pd-accent) !important;
    background: var(--pd-accent-soft) !important;
    box-shadow: 0 6px 16px -6px var(--pd-accent-glow);
}

/* Área rolável das abas */
.dashboard-page .graphs-content {
    padding: 0 0.35rem 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 161, 127, 0.35) transparent;
}

.dashboard-page .graphs-content::-webkit-scrollbar {
    width: 6px;
}

.dashboard-page .graphs-content::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-page .graphs-content::-webkit-scrollbar-thumb {
    background: rgba(255, 161, 127, 0.3);
    border-radius: 3px;
}

/* Cards (gráficos, painéis do Resumo e cards de matrícula) */
.dashboard-page #dashboard-content .gray90-b {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius) !important;
    box-shadow: var(--pd-shadow-1);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dashboard-page #dashboard-content .gray90-b:hover {
    border-color: var(--pd-border-hover);
    box-shadow: var(--pd-shadow-2);
}

/* Cabeçalho dos cards de gráfico */
.dashboard-page #dashboard-content .gray90-b > .border-bottom {
    border-bottom: 1px solid var(--pd-accent-soft-2) !important;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.55rem 0.7rem !important;
    align-items: center;
}

.dashboard-page #dashboard-content .gray90-b > .border-bottom h6 {
    position: relative;
    padding-left: 0.8rem;
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
}

.dashboard-page #dashboard-content .gray90-b > .border-bottom h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pd-accent), var(--pd-accent-strong));
    box-shadow: 0 0 10px var(--pd-accent-glow);
}

.dashboard-page #dashboard-content .gray90-b > .border-bottom h6 a {
    color: var(--pd-accent) !important;
    opacity: 0.6;
}

/* Mensagem "Sem Informações disponíveis" */
.dashboard-page #dashboard-content h6.nm05-c {
    padding: 1.1rem;
    margin: 0;
    text-align: center;
    opacity: 0.7;
}

/* Faixa de produção total / ciclos (aba Ciclos e Produção) */
.dashboard-page #dashboard-content .info-panel {
    background: var(--pd-accent-soft) !important;
    border: 1px solid rgba(255, 161, 127, 0.35);
    color: var(--pd-accent) !important;
    border-radius: var(--pd-radius) !important;
    font-weight: 600;
}

/* Resumo (visão Geral): títulos de seção */
.dashboard-page #dashboard-content .gray90-b h5 {
    position: relative;
    padding: 0.5rem 0.25rem 0.4rem 0.8rem;
    margin-top: 0;
    margin-right: 0.5rem;
    margin-bottom: 0.4rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--pd-accent-soft-2) !important;
}

.dashboard-page #dashboard-content .gray90-b h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pd-accent), var(--pd-accent-strong));
    box-shadow: 0 0 10px var(--pd-accent-glow);
}

/* Resumo: linhas de tiles quebram em várias linhas em vez de espremer */
.dashboard-page #dashboard-content .gray90-b > .d-flex.flex-row {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.4rem 0.45rem;
}

/* Resumo: tiles clicáveis (abrem os modais) */
.dashboard-page #dashboard-content .gray90-b [role="button"].border {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-sm) !important;
    padding: 0.4rem 0.3rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dashboard-page #dashboard-content .gray90-b > .d-flex.flex-row > [role="button"].border {
    flex: 1 1 150px;
    width: auto !important;
    margin: 0 !important;
}

.dashboard-page #dashboard-content .gray90-b [role="button"].border:hover {
    background: var(--pd-accent-soft);
    border-color: rgba(255, 161, 127, 0.5) !important;
    transform: translateY(-1px);
}

.dashboard-page #dashboard-content .gray90-b [role="button"].border label {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pd-text-muted);
    cursor: pointer;
}

.dashboard-page #dashboard-content .gray90-b [role="button"].border p {
    color: var(--pd-accent);
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.15rem;
}

/* Matrícula: botões de ordenação, faixas internas e busca */
.dashboard-page #dashboard-content .btn-outline-light {
    border-color: var(--pd-border);
    color: var(--pd-text-muted);
}

.dashboard-page #dashboard-content .btn-outline-light:hover {
    background: var(--pd-accent-soft);
    border-color: rgba(255, 161, 127, 0.5);
    color: var(--pd-accent);
}

.dashboard-page #dashboard-content .gray85-b {
    background: rgba(255, 255, 255, 0.025) !important;
}

.dashboard-page #dashboard-content .departure-card-header {
    background: linear-gradient(90deg, var(--pd-accent-soft-2), transparent) !important;
}

/* Inputs e selects dentro dos cards (busca da matrícula, seletores de frente) */
.dashboard-page #dashboard-content select.form-control,
.dashboard-page #dashboard-content input.form-control {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--pd-border);
    color: var(--pd-text);
    border-radius: var(--pd-radius-sm);
}

.dashboard-page #dashboard-content select.form-control:focus,
.dashboard-page #dashboard-content input.form-control:focus {
    background: rgba(0, 0, 0, 0.45);
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 0.15rem var(--pd-accent-soft-2);
    color: var(--pd-text);
    outline: 0;
}

.dashboard-page #dashboard-content select.form-control option {
    background: #2c2c2c;
    color: var(--pd-text);
}

/* Cards do Resumo que usam <label> como título no cabeçalho
   (Produção por dia / Distância cheio por dia) */
.dashboard-page #dashboard-content .gray90-b > .border-bottom > label {
    position: relative;
    padding-left: 0.8rem;
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
}

.dashboard-page #dashboard-content .gray90-b > .border-bottom > label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pd-accent), var(--pd-accent-strong));
    box-shadow: 0 0 10px var(--pd-accent-glow);
}

/* Gráficos d3: as cores das barras vêm da paleta do dashboard.js
   (mesma do Dashboard Operacional — verde/amarelo dominantes; laranja
   e vermelho para metas, paretos e não-conformidades), aplicadas via
   style inline. Média/mediana dos histogramas no accent: */
.dashboard-page .d3-histogram-mean {
    fill: var(--pd-accent);
    stroke: var(--pd-accent);
}

/* Resumo: os cards de gráfico dimensionam pela altura do conteúdo —
   o h-50 limitava o card e o overflow cortava as barras e o eixo. */
.dashboard-page #dashboard-content .gray90-b.h-50 {
    height: auto !important;
}

/* Resumo: altura mínima confortável para os dois gráficos (o calc com
   100vh fica pequeno/negativo em janelas baixas) */
.dashboard-page #line-chart-production,
.dashboard-page #line-chart-distance {
    min-height: 260px;
}

/* Resumo: o painel Consumo divide a linha igualmente com Produção em vez
   de virar uma coluna estreita com tiles empilhados (estica a linha toda) */
.dashboard-page #geral-info .gray90-b {
    width: 100% !important;
}

/* Mobile: painéis do Resumo empilham em vez de espremer três por linha */
@media (max-width: 991.98px) {
    .dashboard-page #geral-info > .d-flex.flex-row {
        flex-direction: column;
    }
}
/*#endregion*/

/* "vai virar: a cada 500h" na lista do modal de migracao da preventiva V2 (12/08/2026).
   O intervalo e COPIADO do DeltaHorimetro da etapa e nem sempre bate com o nome do plano;
   mostrar o resultado antes de gravar e mais barato que descobrir depois. */
.v2-interval-preview {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #ffc7ac;
    background: rgba(255, 161, 127, 0.14);
    border: 1px solid rgba(255, 161, 127, 0.36);
}