/* =========================
   LAYOUT GLOBAL / BACKGROUND
   ========================= */

html,
body {
	height: 100%;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

	/* fundo degradê */
	background-color: #ffffff;
	background-image: linear-gradient(135deg,
			rgba(4, 80, 154, 0.7) 0%,
			rgba(6, 168, 202, 0.7) 22%,
			rgba(8, 166, 108, 0.7) 45%,
			rgba(248, 170, 18, 0.7) 70%,
			rgba(115, 155, 157, 0.7) 100%);
	background-attachment: fixed;
}

/* Espaçamento interno da área principal da página.
   - margin-top: separa o conteúdo da linha branca da navbar sticky
   - padding: recria o "respiro" lateral de 32px que antes estava no body */
main.container-fluid {
	margin-top: 1rem;
	padding-left: 32px;
	padding-right: 32px;
	padding-bottom: 32px;
	max-width: 1400px;
	margin: 2rem auto;
	padding: 0 2rem;
	flex: 1;
	width: 100%;
}

/* Altura mínima da navbar para consistência visual */
:root {
	--navbar-h: 64px;
}

/* === NAVBAR REORGANIZADA === */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 0.5rem 1rem;
	background: transparent;
	/* deixa o gradiente do body visível */
}

/* garante que a logo fique à esquerda */
.navbar-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* título centralizado absoluto */
.navbar .navbar-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-weight: 500;
	font-size: 1.8rem !important;
	font-weight: 800;
	font-size: 1.2rem;
	pointer-events: none;
	/* evita cliques bloqueando botões */
	white-space: nowrap;
}

/* botão à direita */
.navbar .navbar-actions {
	margin-left: auto;
}

/* botão do início */
.navbar .btn-outline-light {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	transition: all 0.2s;
}

.navbar .btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}


/* ================
   LOGO DO HEADER
   ================ */

.logo {
	display: block;
	margin: 0 auto;
	width: clamp(180px, 30vw, 400px);
	height: auto;
}

/* =======================
   MODAL DE PROCESSAMENTO
   (overlay de "Processando...")
   ======================= */

#processingModal {
	display: none !important;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.6);

	display: flex;
	justify-content: center;
	align-items: center;
}

/* força exibir flex quando JS injeta inline style */
#processingModal[style*="flex"] {
	display: flex !important;
}

#processingModal .modal-content {
	background: white;
	padding: 20px 30px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: bold;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ===========================
   TÍTULOS / LABELS NO MAIN
   =========================== */

/* Os títulos e labels no conteúdo principal continuam claros
   porque o fundo global é escuro/translúcido no topo */
main h2,
main label {
	color: white;
}

/* pequenas legendas em cinza claro */
.text-secondary {
	color: #c4c1c1 !important;
}

/* ====================
   GRID / CARDS DE APP
   ==================== */

.grid {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px;
	flex-wrap: nowrap;
	max-width: 1100px;
	margin: 0 auto;
}

/* altura cheia das cards para alinhar botões no rodapé */
.card {
	height: 100%;
	border-radius: 12px;
}

/* conteúdo interno em coluna */
.card .card-body {
	display: flex;
	flex-direction: column;
}

/* texto "enche" e empurra os botões pro final */
.card .desc,
.card p,
.card .flex-grow-1 {
	flex: 1 1 auto;
}

/* os botões grudam no final da card */
.card .actions,
.card .btn-group,
.card .btn {
	margin-top: auto;
}

/* efeito "frosted glass" opcional para cards
   se você ainda estiver usando .app-cards como wrapper */
.app-cards .card {
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 12px;
}

.card h2 {
	text-align: center;
}

/* espaçamento padrão vertical entre linhas de formulário antigos */
.row {
	margin-bottom: 14px;
}

.row #planilha {
	display: none;
}

/* labels "custom" (dos forms antigos, fora do modal Bootstrap) */
.label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: white;
}

.input {
	width: 95%;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font: inherit;
}

/* =======================
   BOTÕES / AÇÕES GERAIS
   ======================= */

/* Estilo geral custom de botões.
   Atenção: isso sobrescreve o Bootstrap .btn,
   então também tratamos exceções depois para o modal claro. */
.btn {
	padding: 12px 18px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 10px;
	font: 600 1rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #fff;
	cursor: pointer;
	transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.btn-fechar{
	margin-top: 10px;
	padding: 12px 18px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 10px;
	font: 600 1rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #8d8a8a;
	cursor: pointer;
	transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.btn-fechar:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
	filter: brightness(1.03);
}

/* Botão primário azul com gradiente */
.btn-primary {
	background: linear-gradient(180deg, #1f6feb 0%, #1557c2 100%);
	border-color: rgba(21, 87, 194, .55);
	margin-top: 10px;
}

/* Botão secundário reaproveitando o mesmo gradiente (se você usar) */
.btn-secondary {
	background: linear-gradient(180deg, #1f6feb 0%, #1557c2 100%);
	border-color: rgba(21, 87, 194, .55);
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
	filter: brightness(1.03);
}

.btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
	filter: brightness(.98);
}

.btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, .45),
		0 10px 28px rgba(0, 0, 0, .28);
}

/* estado desabilitado */
.btn:disabled {
	opacity: .7;
	filter: saturate(.7);
	cursor: not-allowed;
}

/* Botão de upload/arquivo estilo pill claro */
.file-label {
	background: rgba(255, 255, 255, .92);
	color: #0f172a;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.file-label:hover {
	box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

/* Divider simples */
.divider {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 12px 0 16px;
}

/* status helpers antigos */
.hint {
	color: var(--muted);
	font-size: .95rem;
}

.error {
	color: var(--err);
}

.success {
	color: var(--ok);
}

/* =======================
   AJUSTES ESPECÍFICOS DO MODAL #runModal
   (modal claro dentro de página escura)
   ======================= */

/* Força o texto do modal a ser escuro para boa leitura em bg branco */
#runModal .modal-content {
	background-color: #fff;
	color: #212529;
	border: 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

/* Labels de formulário dentro do modal: pretos */
#runModal label,
#runModal .form-label,
#runModal .form-check-label {
	color: #212529;
	font-weight: 500;
}

/* Texto secundário dentro do modal (ex: "Executando: ...") */
#runModal .text-secondary {
	color: #6c757d !important;
}

/* Botão "Cancelar"
   - seu CSS global deixa todo .btn com color:#fff
   - mas aqui a gente quer o comportamento Bootstrap
     do .btn-outline-secondary (cinza com borda cinza)
*/
#runModal .btn-outline-secondary {
	color: #6c757d;
	border-color: #6c757d;
	background-color: transparent;
	box-shadow: none;
	/* tira sombra azulzona custom */
	margin-top: 0;
	/* não herdar margin-top:10px do .btn-primary */
	border-radius: .375rem;
	/* volta pro raio Bootstrap pra ficar mais normal no footer */
	padding: .5rem 1rem;
	font-weight: 500;
}

/* Hover do Cancelar igual Bootstrap */
#runModal .btn-outline-secondary:hover {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
	box-shadow: none;
}

/* Botão "Executar" no modal:
   pode manter seu primário, mas sem margin-top
   e com raio mais padrão footer */
#runModal .btn-primary {
	margin-top: 0;
	border-radius: .375rem;
	padding: .5rem 1rem;
	font-weight: 500;
	box-shadow: none;
}

/* impedir que seu .btn global force branco no label
   do checkbox do modal */
#runModal .form-check-input {
	cursor: pointer;
}

#runModal .form-check-label {
	cursor: pointer;
}

/* =======================
   AJUSTE DO BLOCO "Aplicações" / SEÇÃO INICIAL
   ======================= */

/* se quiser ainda dar um respiro entre título e cards
   (além do margin-top do main), você pode controlar aqui */
#appsSection {
	margin-top: .5rem;
}

.modal-dialog {
  position: relative;
  top: 80px; /* ajuste como quiser: 50px, 100px, etc */
  margin: auto;
  max-width: 500px !important; /* padrão costuma ser 600–800px */
  width: 90%; /* opcional, para manter responsivo */
}

.modal-content {
  padding: 12px 20px;
  border-radius: 10px; /* mantém estilo suave */
}

footer {
  background-color: #111;
  color: #aaa;
  margin-top: auto;
}