/* Config — cards-refactor 2026-09-10. Same reasoning as sourcing-screen.css:
   qmob's Tailwind preflight (qmob.css, specificity (0,2,2)) resets heading
   font-size/weight and <p> margins to inherit/0, beating style.css's
   .painel-title/.painel-subtitle rules (specificity (0,1,0)) because the qmob
   bundle loads after style.css in main.html. Without these overrides the
   Config screens render with a plain body-sized title and no subtitle
   spacing. NOT part of the Tailwind bundle — this repo has no toolchain to
   rebuild qmob.css. */

html.qmob-scope main.content .page-qmob-config .painel-title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.8px;
}

html.qmob-scope main.content .page-qmob-config .painel-subtitle {
	margin-bottom: 30px;
}

/* ============================================================
   LANDING (/qmob/config) — card grid, same pattern as Sourcing's
   (public/css/qmob/sourcing-screen.css) and Compras/Dashboards
   (public/css/style.css .painel-item/.painel-grupo-grid).
   ============================================================ */

.page-qmob-config-home .painel-item.config-home__card {
	align-items: flex-start;
	padding: 18px 20px;
}

.page-qmob-config-home .config-home__icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: var(--accent-dark, var(--accent));
}

.page-qmob-config-home .config-home__icon svg {
	width: 100%;
	height: 100%;
}

.page-qmob-config-home .config-home__content {
	flex: 1;
	min-width: 0;
}

.page-qmob-config-home .config-home__desc {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-top: 4px;
}

.page-qmob-config-home .painel-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}