/* Custom Styles para Meus Álbuns */

:root {
	--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Animações suaves */
* {
	transition: all 0.3s ease;
}

/* Cards com hover effect */
.card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md) !important;
}

/* Botões personalizados */
.btn-primary {
	background: var(--primary-gradient);
	border: none;
	font-weight: 500;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

/* Input focus */
.form-control:focus {
	border-color: #667eea;
	box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Scrollbar customizada */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #667eea;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #764ba2;
}

/* Animação de loading */
@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.loading {
	animation: pulse 1.5s ease-in-out infinite;
}

/* Responsividade */
/* Largura mínima do sidebar para evitar sumir em telas médias */
@media (min-width: 576px) {
	#sidebarMenu {
		min-width: 250px;
	}
}

/* Sidebar fixo em telas médias e maiores e offcanvas para telas pequenas */
@media (min-width: 768px) {

	/* Tornar o sidebar fixo e independente do fluxo para evitar que empurre o conteúdo */
	nav#sidebarMenu,
	#sidebarMenu,
	.sidebar {
		position: fixed;
		left: 0;
		top: 56px;
		width: 250px;
		height: calc(100vh - 56px);
		overflow-y: auto;
		z-index: 1020;
		background: white;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
	}

	/* Conteúdo principal movido para a direita do sidebar */
	main,
	main[class*='col-'] {
		margin-left: 250px !important;
		min-width: 0;
		/* evitar overflow em elementos flex */
		width: calc(100% - 250px);
	}

	/* Alinhar o conteúdo do navbar com o conteúdo principal apenas em md+ */
	@media (min-width: 990px) {

		/* remover padding do container para evitar offsets cumulativos; vamos posicionar a brand exatamente */
		.navbar .container-fluid {
			padding-left: 0 !important;
			padding-right: 1.5rem;
		}

		/* posicionar a brand de forma absoluta para alinhamento preciso (não aplicar quando a navbar for fixed-top) */
		nav.navbar:not(.fixed-top) {
			position: relative;
		}

		.navbar-brand {
			position: absolute !important;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			padding-left: 0;
			margin-left: 0 !important;
			display: flex;
			align-items: center;
			gap: .5rem;
		}

		.navbar-brand i {
			margin-left: 0;
		}

		/* esconder toggle do sidebar em MD+ (>=768px) */
		@media (min-width: 768px) {
			#sidebarToggle {
				display: none !important;
			}
		}
	}

	/* Garantir que a navbar fique sobre o sidebar quando necessário */
	nav.navbar {
		z-index: 1000;
	}

	/* Ajustes quando a navbar é fixa: deslocar toasts para baixo */
	.toast-container#toastContainer {
		top: 100px !important;
		z-index: 99999;
		transform: translateZ(0);
	}

	/* Altura mínima para o navbar admin (garante consistência vertical) */
	nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.shadow-sm {
		min-height: 56px;
	}

	/* Em XS/SM (<=767.98px) mostrar toggle do sidebar */
	@media (max-width: 767.98px) {
		.navbar .container-fluid {
			padding-left: 1rem;
		}

		#sidebarToggle {
			display: inline-block !important;
		}
	}

	/* Garantir que o toggle fique oculto na faixa 768px–991.98px */
	@media (min-width: 768px) and (max-width: 991.98px) {
		#sidebarToggle {
			display: none !important;
		}
	}

	/* Em telas SM e MD (<=991.98px), esconder completamente o menu superior (forçar com !important) */
	@media (max-width: 991.98px) {

		#navbarNav,
		#navbarNav .navbar-nav,
		#navbarNav .nav-item {
			display: none !important;
		}
	}

	/* Não alterar o comportamento da grid do Bootstrap */
	.container-fluid>.row {}
}

@media (max-width: 768px) {
	.sidebar {
		position: fixed;
		top: 76px; /* ajustado para navbar fixed-top */
		left: -100%;
		width: 80%;
		z-index: 1000;
		transition: left 0.3s ease;
	}

	.sidebar.show {
		left: 0;
	}
}