@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@keyframes flutuar {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-20px);
		/* sobe 20px */
	}
}

/* Imagem esquerda */
.fundo-flutuante-esquerda {
	position: fixed;
	top: 70px;
	left: 250px;
	width: 200px;
	height: 206px;
	background-image: url('../img/imagem.avif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.3;
	/* ajuste a opacidade se quiser */
	pointer-events: none;
	z-index: -1;
	animation: flutuar 8s ease-in-out infinite;
}

/* Imagem direita */
.fundo-flutuante-direita {
	position: fixed;
	bottom: 60px;
	right: 100px;
	width: 450px;
	height: 463px;
	background-image: url('../img/imagem.avif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.3;
	pointer-events: none;
	z-index: -1;

	animation: flutuar 10s ease-in-out infinite;
	animation-delay: 4s;
	/* começa em momento diferente para movimento mais natural */
}

@media only screen and (max-width: 750px) {

	/* Imagem esquerda */
	.fundo-flutuante-esquerda {
		position: fixed;
		top: 40px;
		left: 40px;
		width: 90px;
		height: 92px;
	}

	/* Imagem direita */
	.fundo-flutuante-direita {
		position: fixed;
		bottom: 50px;
		right: 40px;
		width: 250px;
		height: 257px;
	}
}

body {
	font-family: "Montserrat", sans-serif;
	background-color: #03051d;
}

.body-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.box-blur {
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	box-shadow: inset 0 16px 54px -18px rgba(255, 255, 255, 0.16), 0 32px 80px -12px rgba(0, 0, 0, 0.16);
	padding: 40px;
	margin: 70px auto !important;
	color: #fff
}

.box-blur-home-dashboard {
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	box-shadow: inset 0 16px 54px -18px rgba(255, 255, 255, 0.16), 0 32px 80px -12px rgba(0, 0, 0, 0.16);
	padding:15px 25px
}
.box-blur-home-dashboard h6{
	color:#fff;
	font-size: 1.1rem;
	font-weight:700
}
.box-blur-home-dashboard h3{
	color:#4d9ad0;
	font-size: 3.2rem;
	font-weight:700
}

@media only screen and (max-width: 750px) {
	.box-blur {
		padding: 20px;
	}
	.box-blur-home-dashboard {
		padding: 20px;
	}
}

.box-blur h4 {
	color: #4d9ad0 !important
}

.logo-login {
	margin-bottom: 1.5rem;
}

.logo-login img {
	height: 50px;
}

.login-card {
	width: 100%;
	max-width: 400px;
	padding: 2rem;
	background: white;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 0.075);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	box-shadow:
		inset 0 16px 54px -18px rgba(255, 255, 255, 0.16),
		0 32px 80px -12px rgba(0, 0, 0, 0.16);
}

.btn-login {
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	background-color: #4d9ad0;
	border-color: #4d9ad0;
}

.btn-login:hover {
	background-color: #e85a00;
	border-color: #e85a00;
	color: #000;
}

.alert-login {
	margin-bottom: 1rem;
}

.navbar {
	padding: 15px 0px;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 16px 54px -18px rgba(255, 255, 255, 0.16), 0 32px 80px -12px rgba(0, 0, 0, 0.16);
}

.nav-link {
  color: #fff;
  margin: auto 10px;
}

/* Aplica barra de rolagem horizontal só no mobile */
@media (max-width: 767.98px) {  /* breakpoint mobile Bootstrap */
  .table-responsive {
    overflow-x: auto;
  }
}

/* Remove barra de rolagem no desktop */
@media (min-width: 768px) {
  .table-responsive {
    overflow-x: visible; /* ou auto, conforme preferir */
  }
}

table.table th,
table.table td {
	text-align: center;
	/*white-space: nowrap;*/
	padding:10px 15px;
    vertical-align: middle; /* Alinha verticalmente ao meio */
}

#table_instalacoes th,
#table_instalacoes td {
  	text-align: center;
	/*white-space: nowrap;*/
	padding:10px 15px;
  	vertical-align: top;
}

.coluna-nowrap{
	white-space: nowrap !important;
}


.cor-orange {
	color: #4d9ad0 !important
}

.cor-label-instalacoes{
	color: #4d9ad0 !important;
	font-weight:400 !important;
}

.fs-7 {
	font-size: 0.85rem !important
}

.fs-8 {
	font-size: 0.8rem !important;
}

label {
	font-size: 0.91rem;
	margin-bottom: .2rem !important;
	font-weight: 700;
}

.btn-sort {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	/* espaço entre texto e ícones */
	padding: 0;
}

.sort-icons {
	display: inline-flex;
	flex-direction: row;
	/* agora lado a lado */
	gap: 5px;
	/* espaço entre as setas */
	font-size: 0.7em;
	color: #aaa;
	line-height: 1;
	user-select: none;
}

.sort-icons i {
	pointer-events: none;
	display: block;
}

.text-highlight-red,
.text-highlight-orange,
.text-highlight-green,
.text-highlight-blue,
.text-highlight-yellow {
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 600;
	border:solid 1px;
}

.text-highlight-red {
	color: #b30000;
	background-color: #ffe5e5;
	border-color: #b30000;
}

.text-highlight-orange {
	color: #cc7a00;
	background-color: #fff0d6;
	border-color: #cc7a00;
}

.text-highlight-green {
	color: #1f7a1f;
	background-color: #e3f7e3;
	border-color: #1f7a1f;
}

.text-highlight-blue {
	color: #0d6efd;
	background-color: #e7f1ff;
	border-color: #0d6efd;
}

.text-highlight-yellow {
	color: #856404;            /* texto padrão warning */
	background-color: #fff3cd; /* bg warning */
	border-color: #ffeeba;     /* borda warning */
}

/* Estilo para o cabeçalho do modal */
.modal-header {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
	border-radius:0 !important;
}
.modal-header h5{
	color: #4d9ad0 !important;
	font-weight: 700 !important;
	font-size: 1.2em !important;
}

.modal-body h6{
	color: #4d9ad0 !important;
	font-weight: 700 !important;
	font-size: 1.2em !important;
	margin-top:40px;
	margin-bottom:20px;
}
.modal-body h6:first-child {
  margin-top: 0px !important;
}

.modal-body{
	padding:30px 30px 5px 30px
}
.modal-body .form-control{
	margin-bottom:8px
}
#formCadastrarPonto .modal-body .form-control,
#formEditarPonto .modal-body .form-control{
	margin-bottom:0px !important
}
.modal-footer{
	border-top:none;
	padding-bottom:30px
}

.modal {
    backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background-color: rgba(255, 255, 255, 0.06);	
}

.pagination {
	display: flex;
	list-style: none;
	padding-left: 0;
}

.pagination li a,
.pagination li span {
	color: #4d9ad0;
	border: 1px solid #4d9ad0;
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: 4px;
	text-decoration: none;
	background-color: transparent;
	transition: all 0.2s ease-in-out;
}

.pagination li a:hover,
.pagination li span:hover {
	background-color: #4d9ad0;
	color: #fff;
}

.pagination li.active a,
.pagination li.active span {
	background-color: #4d9ad0;
	color: #fff;
	border-color: #4d9ad0;
}

.form-select,
.form-control,
.btn{
	padding:7px auto !important;
}

@media only screen and (max-width: 750px) {
	.form-select,
	.form-control{
		margin-bottom:20px;
	}
}

.btn-outline-orange{
	background-color: transparent;
	color: #4d9ad0;
	border-color: #4d9ad0;
}
.btn-outline-orange:hover{
	background-color: #4d9ad0;
	color: #fff;
	border-color: #4d9ad0;
}

/* Remova sombra do container */
.choices__inner {
  border-radius: 0.375rem !important; /* border-radius do Bootstrap */
  min-height: 38px; /* altura padrão do form-control */
  border: 1px solid #ced4da !important;
  box-shadow: none !important;
}

/* Campo input dentro do Choices */
.choices__input {
  padding: 0 0.75rem !important;
  margin: 0 !important;
  height: 38px !important;
  font-size: 1rem;
  line-height: 1.5;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
}

/* Itens da lista com estilo do Bootstrap */
.choices__list--dropdown {
  border-radius: 0.375rem !important;
  border: 1px solid #ced4da !important;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15) !important;
  margin-top: 0.25rem !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Itens dropdown */
.dropdown-item {
  cursor: pointer;
  padding: 0.25rem 1rem;
}

/* Item selecionado na lista */
.choices__item--choice {
  background-color: #0d6efd;
  border-radius: 0.25rem;
  color: white;
  padding: 0.25em 0.5em;
  margin-right: 0.25rem;
  font-size: 0.875rem;
}

/* Botão fechar da tag */
.choices__button {
  color: white;
  font-size: 0.875rem;
}