/**
 * PureDesk utility classes.
 *
 * Small, single-purpose helpers that replace the ad-hoc inline `style:`
 * attributes screens used to carry. Same conventions as everything else:
 * `puredesk-u-*` prefix, scoped under #puredesk-app, token values only.
 * Keep this file tiny — anything with two or more concerns belongs in
 * components.css as a real component.
 */

/* ---------- Layout ---------- */

#puredesk-app .puredesk-u-row { display: flex; align-items: center; gap: var(--pd-space-2); }
#puredesk-app .puredesk-u-row--wrap { flex-wrap: wrap; }
#puredesk-app .puredesk-u-row--between { justify-content: space-between; }
#puredesk-app .puredesk-u-row--end { justify-content: flex-end; }
#puredesk-app .puredesk-u-stack { display: flex; flex-direction: column; gap: var(--pd-space-2); }
#puredesk-app .puredesk-u-stack--tight { gap: var(--pd-space-1); }
#puredesk-app .puredesk-u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pd-space-3); }
#puredesk-app .puredesk-u-spacer { flex: 1 1 auto; }
#puredesk-app .puredesk-u-scroll-x { overflow-x: auto; }
#puredesk-app .puredesk-u-right { text-align: right; }
#puredesk-app .puredesk-u-center { text-align: center; }
#puredesk-app .puredesk-u-minw-0 { min-width: 0; }

/* Gaps (override a row/stack's default). */
#puredesk-app .puredesk-u-gap-1 { gap: var(--pd-space-1); }
#puredesk-app .puredesk-u-gap-3 { gap: var(--pd-space-3); }
#puredesk-app .puredesk-u-gap-4 { gap: var(--pd-space-4); }

/* Margins (the handful actually needed). */
#puredesk-app .puredesk-u-mt-2 { margin-top: var(--pd-space-2); }
#puredesk-app .puredesk-u-mt-4 { margin-top: var(--pd-space-4); }
#puredesk-app .puredesk-u-mb-0 { margin-bottom: 0; }
#puredesk-app .puredesk-u-mb-4 { margin-bottom: var(--pd-space-4); }

/* Width clamps for inputs/selects inside forms. */
#puredesk-app .puredesk-u-w-xs { max-width: 120px; }
#puredesk-app .puredesk-u-w-sm { max-width: 160px; }
#puredesk-app .puredesk-u-w-md { max-width: 240px; }
#puredesk-app .puredesk-u-w-lg { max-width: 320px; }

/* ---------- Text ---------- */

#puredesk-app .puredesk-u-text-xs { font-size: var(--pd-text-xs); }
#puredesk-app .puredesk-u-text-sm { font-size: var(--pd-text-sm); }
#puredesk-app .puredesk-u-soft { color: var(--pd-text-soft); }
#puredesk-app .puredesk-u-faint { color: var(--pd-text-faint); }
#puredesk-app .puredesk-u-medium { font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-u-semibold { font-weight: var(--pd-weight-semibold); }
#puredesk-app .puredesk-u-mono { font-family: var(--pd-font-mono); font-size: var(--pd-text-xs); }
#puredesk-app .puredesk-u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#puredesk-app .puredesk-u-break { overflow-wrap: anywhere; }
#puredesk-app .puredesk-u-nowrap { white-space: nowrap; }

/* Count label next to filter bars ("3 purchases"). */
#puredesk-app .puredesk-u-count { font-size: var(--pd-text-xs); color: var(--pd-text-faint); white-space: nowrap; }

/* ---------- Visibility ---------- */

#puredesk-app .puredesk-u-hide { display: none; }

@media (max-width: 782px) {
	#puredesk-app .puredesk-u-hide-sm { display: none; }
	#puredesk-app .puredesk-u-grid-2 { grid-template-columns: 1fr; }
}

/* Screen-reader-only content. */
#puredesk-app .puredesk-u-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;
}