/*
 * Waleria Panel — Utility Classes
 *
 * Small, composable helpers. Use sparingly — prefer component-level styles.
 */

/* ── Display ── */
.hidden      { display: none !important; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }

/* ── Flex shortcuts ── */
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-1         { flex: 1; }
.flex-wrap      { flex-wrap: wrap; }

/* ── Gaps ── */
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* ── Text ── */
.text-xs       { font-size: var(--font-size-xs); }
.text-sm       { font-size: var(--font-size-sm); }
.text-md       { font-size: var(--font-size-md); }
.text-lg       { font-size: var(--font-size-lg); }
.text-xl       { font-size: var(--font-size-xl); }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-muted    { color: var(--color-text-secondary); }
.text-danger   { color: var(--color-danger); }
.text-success  { color: var(--color-success); }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-mono     { font-family: var(--font-mono); }

/* ── Spacing ── */
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

/* ── Truncation ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Accessibility ── */
.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;
}

/* ── Focus visible ring ── */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ── Full width ── */
.w-full { width: 100%; }

/* ── Border ── */
.border     { border: 1px solid var(--color-border); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }