/**
 * UI Polish — botões unificados, focus rings, micro-interações (admin + user)
 * Carregado globalmente via header.php
 */

:root {
	--ui-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
	--ui-focus-ring-brand: 0 0 0 3px rgba(99, 102, 241, 0.35);
	--ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ui-press: scale(0.98);
}

/* ─── Botões gs-* (única fonte — orders + invoices + legado) ─────────────── */
.gs-btn-primary,
a.gs-btn-primary,
button.gs-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.25;
	border-radius: 0.75rem;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	background: var(--uds-primary-600, #4f46e5);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 20px -8px rgba(79, 70, 229, 0.45);
	transition:
		background 160ms var(--ui-ease-out),
		box-shadow 160ms var(--ui-ease-out),
		transform 140ms var(--ui-ease-out),
		filter 160ms ease;
}

.gs-btn-primary:hover {
	background: var(--uds-primary-700, #4338ca);
	color: #fff;
	filter: brightness(1.04);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1), 0 12px 28px -10px rgba(79, 70, 229, 0.5);
}

.gs-btn-primary:active {
	transform: var(--ui-press);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.gs-btn-primary:focus-visible {
	outline: none;
	box-shadow: var(--ui-focus-ring-brand), 0 8px 20px -8px rgba(79, 70, 229, 0.45);
}

.gs-btn-primary.is-loading,
.gs-btn-primary:disabled {
	opacity: 0.65;
	pointer-events: none;
	cursor: not-allowed;
	transform: none;
}

.gs-btn-ghost,
a.gs-btn-ghost,
button.gs-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	border-radius: 0.75rem;
	border: 1px solid var(--uds-border, rgba(148, 163, 184, 0.35));
	background: var(--uds-surface, transparent);
	color: var(--uds-text-muted, #64748b);
	text-decoration: none;
	cursor: pointer;
	transition:
		background 160ms var(--ui-ease-out),
		border-color 160ms var(--ui-ease-out),
		color 160ms var(--ui-ease-out),
		transform 140ms var(--ui-ease-out);
}

.gs-btn-ghost:hover {
	background: var(--uds-surface-2, rgba(148, 163, 184, 0.12));
	color: var(--uds-text, #0f172a);
	border-color: var(--uds-border-strong, rgba(148, 163, 184, 0.5));
}

.gs-btn-ghost:active {
	transform: var(--ui-press);
}

.gs-btn-ghost:focus-visible {
	outline: none;
	box-shadow: var(--ui-focus-ring-brand);
}

@media (min-width: 1024px) {
	.uds-orders .gs-btn-primary { padding: 0.875rem 1.375rem; font-size: 0.9375rem; }
	.uds-orders .gs-btn-ghost { padding: 0.875rem 1.375rem; font-size: 0.9375rem; }
}

/* ─── UDS buttons — active press ─────────────────────────────────────────── */
.uds-btn:active:not(:disabled) {
	transform: var(--ui-press);
}

.uds-btn--primary:active:not(:disabled) {
	filter: brightness(0.97);
}

.uds-btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}

/* ─── Admin bridges — focus + active ─────────────────────────────────────── */
.admin-premium-shell .btn-primary-admin:focus-visible,
.admin-premium-shell .btn-secondary-admin:focus-visible,
.admin-premium-shell .btn-danger-admin:focus-visible,
.admin-premium-shell .btn-outline-admin:focus-visible {
	outline: 2px solid var(--ads-primary, #3b82f6);
	outline-offset: 2px;
}

.admin-premium-shell .btn-primary-admin:active:not(:disabled),
.admin-premium-shell .btn-secondary-admin:active:not(:disabled),
.admin-premium-shell .btn-danger-admin:active:not(:disabled) {
	transform: var(--ui-press);
}

/* ─── Dashboard action buttons ───────────────────────────────────────────── */
.dash-success-btn:focus-visible,
.dash-reprocess-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: var(--ui-focus-ring);
}

/* ─── Soft page entrance (novidade) ──────────────────────────────────────── */
@keyframes ui-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ui-enter,
.adm-dashboard .status-card,
.uds-dash-kpi {
	animation: ui-fade-up 380ms var(--ui-ease-out) both;
}

.adm-dashboard .status-card:nth-child(2),
.uds-dash-kpi:nth-child(2) { animation-delay: 40ms; }
.adm-dashboard .status-card:nth-child(3),
.uds-dash-kpi:nth-child(3) { animation-delay: 80ms; }
.adm-dashboard .status-card:nth-child(4),
.uds-dash-kpi:nth-child(4) { animation-delay: 120ms; }

/* ─── Status pill hover polish ───────────────────────────────────────────── */
.gs-status {
	transition: transform 160ms var(--ui-ease-out), box-shadow 160ms ease;
}
.ord-item:hover .gs-status {
	transform: translateY(-1px);
}

/* ─── Link / interactive focus fallback ──────────────────────────────────── */
.admin-premium-shell a:focus-visible,
.uds-shell a:focus-visible,
.user-page a:focus-visible {
	outline: 2px solid var(--ads-primary, var(--uds-primary-500, #6366f1));
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.ui-enter,
	.adm-dashboard .status-card,
	.uds-dash-kpi,
	.gs-btn-primary,
	.gs-btn-ghost,
	.uds-btn,
	.gs-status {
		animation: none !important;
		transition: none !important;
	}
	.gs-btn-primary:hover,
	.gs-btn-ghost:hover,
	.ord-item:hover .gs-status {
		transform: none;
	}
}