/* ==========================================================================
   Jowtas Tree — components.css
   Componentes reutilizáveis: botões, cards, badges, alertas, formulários.
   Os módulos (modules.css) consomem essas classes via @extend conceitual
   (composição manual no HTML).
   ========================================================================== */

/* ----- Botões ------------------------------------------------------------- */

.jt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jt-space-2);
	padding: 12px 22px;
	border-radius: var(--jt-radius);
	font-weight: 600;
	font-size: var(--jt-fs-sm);
	letter-spacing: 0.015em;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	border: 0;
	background-clip: padding-box;
	transition: transform var(--jt-trans-fast), background var(--jt-trans), color var(--jt-trans), box-shadow var(--jt-trans);
	white-space: normal;
	overflow-wrap: anywhere;
	user-select: none;
}
.jt-btn:hover {
	transform: translateY(-1px);
}
.jt-btn:active {
	transform: translateY(0);
}

.jt-btn--primary {
	background: linear-gradient(135deg, var(--jt-color-primary), var(--jt-color-accent));
	color: var(--jt-color-heading);
	box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35);
}
.jt-btn--primary:hover {
	color: var(--jt-color-heading);
	box-shadow: 0 10px 28px rgba(147, 51, 234, 0.5);
}

.jt-btn--outline {
	background: transparent;
	color: var(--jt-color-heading);
	border: 1px solid var(--jt-color-primary);
	padding: 11px 21px; /* compensa o 1px de borda pra altura ficar igual ao primary */
	transition: transform var(--jt-trans-fast), background var(--jt-trans), color var(--jt-trans), border-color var(--jt-trans), box-shadow var(--jt-trans);
}
.jt-btn--outline:hover {
	background: var(--jt-color-primary);
	color: var(--jt-color-heading);
}

.jt-btn--glass {
	background: var(--jt-glass-bg);
	color: var(--jt-color-heading);
	border: 1px solid var(--jt-glass-border);
	padding: 11px 21px;
	backdrop-filter: blur(var(--jt-glass-blur));
	-webkit-backdrop-filter: blur(var(--jt-glass-blur));
	transition: transform var(--jt-trans-fast), background var(--jt-trans), color var(--jt-trans), border-color var(--jt-trans), box-shadow var(--jt-trans);
}
.jt-btn--glass:hover {
	background: rgba(255, 255, 255, 0.10);
	color: var(--jt-color-heading);
}

.jt-btn--block {
	width: 100%;
}

.jt-btn--sm {
	padding: var(--jt-space-2) var(--jt-space-4);
	font-size: var(--jt-fs-sm);
}

.jt-btn--lg {
	padding: var(--jt-space-4) var(--jt-space-6);
	font-size: var(--jt-fs-lg);
}

/* ----- Cards -------------------------------------------------------------- */

.jt-card {
	background: var(--jt-glass-bg);
	border: 1px solid var(--jt-glass-border);
	border-radius: var(--jt-radius-lg);
	padding: var(--jt-space-5);
	backdrop-filter: blur(var(--jt-glass-blur));
	-webkit-backdrop-filter: blur(var(--jt-glass-blur));
	box-shadow: var(--jt-shadow-sm);
	transition: transform var(--jt-trans), box-shadow var(--jt-trans), border-color var(--jt-trans);
}
.jt-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--jt-shadow);
	border-color: rgba(147, 51, 234, 0.4);
}

.jt-card--flat {
	background: var(--jt-color-bg-soft);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ----- Badges ------------------------------------------------------------- */

.jt-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--jt-space-1);
	padding: 0.25rem 0.75rem;
	border-radius: var(--jt-radius-full);
	background: var(--jt-glass-bg);
	border: 1px solid var(--jt-glass-border);
	font-size: var(--jt-fs-xs);
	font-weight: 600;
	color: var(--jt-color-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.jt-badge--primary { background: rgba(147, 51, 234, 0.18); border-color: rgba(147, 51, 234, 0.4); color: var(--jt-color-heading); }
.jt-badge--accent  { background: rgba(255, 61, 245, 0.15); border-color: rgba(255, 61, 245, 0.4); color: var(--jt-color-heading); }
.jt-badge--success { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.4); color: #4ade80; }
.jt-badge--warning { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; }
.jt-badge--danger  { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }

/* ----- Alertas ------------------------------------------------------------ */

.jt-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--jt-space-3);
	padding: var(--jt-space-4) var(--jt-space-5);
	border-radius: var(--jt-radius);
	background: var(--jt-glass-bg);
	border: 1px solid var(--jt-glass-border);
	color: var(--jt-color-text);
}
.jt-alert__icon  { font-size: 1.25rem; line-height: 1; }
.jt-alert__body  { flex: 1 1 auto; }
.jt-alert__close { color: inherit; opacity: 0.6; transition: opacity var(--jt-trans); }
.jt-alert__close:hover { opacity: 1; }

/* Variantes de alerta */
.jt-alert--info    { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.35); }
.jt-alert--success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.35); }
.jt-alert--warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); }
.jt-alert--danger  { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.35); }

/* Alerta global no topo da página — não sobrescreve o drawer */
.jt-global-alert {
	position: relative;
	z-index: var(--jt-z-alert);
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	justify-content: center;
	text-align: center;
	font-size: var(--jt-fs-sm);
}

/* ----- Página de manutenção ---------------------------------------------- */

.jt-maintenance {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--jt-space-7);
}

.jt-maintenance__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--jt-space-5);
	text-align: center;
}

.jt-maintenance__logo img {
	max-height: 64px;
	width: auto;
}

.jt-maintenance__brand {
	font-weight: 800;
	font-size: var(--jt-fs-xl);
	color: var(--jt-color-heading);
	letter-spacing: 0.04em;
}

.jt-maintenance__card {
	width: 100%;
	max-width: 560px;
	padding: var(--jt-space-7) var(--jt-space-6);
}

.jt-maintenance__emoji {
	font-size: 4rem;
	line-height: 1;
	margin-bottom: var(--jt-space-5);
}

.jt-maintenance__title {
	font-size: var(--jt-fs-2xl);
	margin-bottom: var(--jt-space-4);
}

.jt-maintenance__message {
	color: var(--jt-color-text);
	font-size: var(--jt-fs-base);
	line-height: 1.7;
}
.jt-maintenance__message p:last-child {
	margin-bottom: 0;
}

.jt-maintenance__social {
	margin-top: var(--jt-space-4);
}

.jt-maintenance__footer {
	margin-top: var(--jt-space-5);
	color: var(--jt-color-text-muted);
}

/* ----- Utilitários básicos ------------------------------------------------ */

.jt-text-center { text-align: center; }
.jt-text-muted  { color: var(--jt-color-text-muted); }
.jt-mt-0 { margin-top: 0; }
.jt-mb-0 { margin-bottom: 0; }
.jt-mb-4 { margin-bottom: var(--jt-space-4); }
.jt-mb-6 { margin-bottom: var(--jt-space-6); }

.jt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}