:root{
	--brand-blue: #043444; /* cor principal solicitada */
	--brand-blue-dark: #032f33; /* versão escurecida para hover */
}

body {
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
	background: #f8fafc;
	color: #222;
	padding-top: 88px;
	padding-bottom: 80px;
}

.navbar-brand {
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: 1.3rem;
}

/* logo sizing */
.brand-logo { height: 36px; width: auto; display: inline-block; }
.footer-logo { height: 28px; width: auto; display: inline-block; }

/* Variantes do logo: original (colorido) e inverse (branca) */
.brand-logo.inverse, .footer-logo.inverse { display: none; }
.brand-logo.original, .footer-logo.original { display: inline-block; }

/* Quando o contexto é escuro (navbar-dark / bg-success), mostrar a variante branca */
.navbar.navbar-dark .brand-logo.inverse,
.navbar.bg-success .brand-logo.inverse,
.site-footer.bg-success .footer-logo.inverse {
	display: inline-block;
}
.navbar.navbar-dark .brand-logo.original,
.navbar.bg-success .brand-logo.original,
.site-footer.bg-success .footer-logo.original {
	display: none;
}

/* Garantir alinhamento e espaçamento consistente */
.brand-logo, .brand-logo.inverse { height: 36px; width: auto; vertical-align: middle; }
.footer-logo, .footer-logo.inverse { height: 28px; width: auto; vertical-align: middle; }

/* ensure navbar background image or color keeps contrast with logo */
.navbar, .site-footer { background-position: left center; background-repeat: no-repeat; }

/* Navbar fixa no topo para todas as páginas */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}


/* Suavizar levemente as barras (navbar e footer) com um overlay/gradiente
	 para destacar a logo sem alterar demais os componentes */
.navbar.bg-success, .site-footer {
	/* gradiente sutil: topo ligeiramente mais claro */
	background: linear-gradient(180deg, rgba(255,255,255,0.06), var(--brand-blue));
	border-bottom: 1px solid rgba(255,255,255,0.04);
}

.navbar .brand-logo, .site-footer .footer-logo {
	/* dar um contraste sutil à imagem */
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
	background: rgba(255,255,255,0.02);
	padding: 2px;
	border-radius: 6px;
}

.card {
	border: none;
	border-radius: 1.25rem;
	box-shadow: 0 2px 16px rgba(0,0,0,0.07);
	transition: box-shadow 0.2s;
}
.card:hover {
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.card-title {
	margin-bottom: 0.75rem;
	font-size: 1.2rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

#alerts {
	margin-bottom: 1rem;
}

canvas {
	max-width: 100%;
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.form-label {
	font-weight: 500;
	color: var(--brand-blue);
}

/* override Bootstrap success and text-success to use brand blue */
.bg-success {
	background-color: var(--brand-blue) !important;
}
.text-success {
	color: var(--brand-blue) !important;
}

.form-select, .form-control {
	border-radius: 0.75rem;
	font-size: 1rem;
}

.btn-success {
	background-color: var(--brand-blue) !important;
	border-color: var(--brand-blue) !important;
	color: #fff !important;
	font-weight: 600;
	letter-spacing: 0.5px;
}
.btn-success:hover, .btn-success:focus {
	background-color: var(--brand-blue-dark) !important;
	border-color: var(--brand-blue-dark) !important;
}

.btn-outline-secondary {
	font-weight: 500;
}

.site-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 56px;
	display: flex !important;
	justify-content: center; /* centraliza o conteúdo */
	align-items: center;
	background: var(--brand-blue);
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	z-index: 9999;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
	padding: 0 2rem;
}

@media (max-width: 768px) {
	.site-footer {
		font-size: 0.9rem;
		padding: 0 1rem;
		height: 48px;
	}
	.card-title {
		font-size: 1rem;
	}
}