/* ==========================================================================
 * utilities.css — Single-purpose utility classes
 *
 * Provides common helpers for layout, text, spacing, and visibility.
 * These complement BEM component classes and reduce one-off inline styles.
 *
 * Naming convention: follows design.md Section 10.2 CSS Class Naming,
 * e.g. .text-center, .mt-4, .flex, .hidden
 * ========================================================================== */


/* ==========================================================================
 * Flexbox
 * ========================================================================== */

.flex             { display: flex; }
.inline-flex      { display: inline-flex; }
.flex-col         { flex-direction: column; }
.flex-row         { flex-direction: row; }
.flex-wrap        { flex-wrap: wrap; }
.flex-1           { flex: 1 1 0%; }
.flex-auto        { flex: 1 1 auto; }
.flex-none        { flex: none; }

/* Alignment */
.items-start      { align-items: flex-start; }
.items-center     { align-items: center; }
.items-end        { align-items: flex-end; }
.items-stretch    { align-items: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }

.self-start       { align-self: flex-start; }
.self-center      { align-self: center; }
.self-end         { align-self: flex-end; }

/* Gap */
.gap-1            { gap: var(--space-1); }
.gap-2            { gap: var(--space-2); }
.gap-3            { gap: var(--space-3); }
.gap-4            { gap: var(--space-4); }
.gap-6            { gap: var(--space-6); }
.gap-8            { gap: var(--space-8); }


/* ==========================================================================
 * Grid
 * ========================================================================== */

.grid             { display: grid; }


/* ==========================================================================
 * Text Alignment
 * ========================================================================== */

.text-left        { text-align: left; }
.text-center      { text-align: center; }
.text-right       { text-align: right; }


/* ==========================================================================
 * Text Size
 * ========================================================================== */

.text-xs          { font-size: var(--font-size-xs); }
.text-sm          { font-size: var(--font-size-sm); }
.text-base        { font-size: var(--font-size-base); }
.text-lg          { font-size: var(--font-size-lg); }
.text-xl          { font-size: var(--font-size-xl); }
.text-2xl         { font-size: var(--font-size-2xl); }


/* ==========================================================================
 * Font Weight
 * ========================================================================== */

.font-normal      { font-weight: 400; }
.font-medium      { font-weight: 500; }
.font-semibold    { font-weight: 600; }
.font-bold        { font-weight: 700; }


/* ==========================================================================
 * Text Color
 * ========================================================================== */

.text-primary     { color: var(--color-primary); }
.text-danger      { color: var(--color-danger); }
.text-success     { color: var(--color-success); }
.text-warning     { color: var(--color-warning); }
.text-secondary   { color: var(--color-text-secondary); }
.text-inverse     { color: var(--color-text-inverse); }


/* ==========================================================================
 * Text Truncation
 * ========================================================================== */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
 * Spacing — Margin
 *
 * Pattern: .m{side}-{scale}
 *   side: t(top), b(bottom), l(left), r(right), x(horizontal), y(vertical)
 *   scale: 0, 1, 2, 3, 4, 6, 8 (maps to --space-N tokens)
 * ========================================================================== */

/* Margin top */
.mt-0             { margin-top: 0; }
.mt-1             { margin-top: var(--space-1); }
.mt-2             { margin-top: var(--space-2); }
.mt-3             { margin-top: var(--space-3); }
.mt-4             { margin-top: var(--space-4); }
.mt-6             { margin-top: var(--space-6); }
.mt-8             { margin-top: var(--space-8); }

/* Margin bottom */
.mb-0             { margin-bottom: 0; }
.mb-1             { margin-bottom: var(--space-1); }
.mb-2             { margin-bottom: var(--space-2); }
.mb-3             { margin-bottom: var(--space-3); }
.mb-4             { margin-bottom: var(--space-4); }
.mb-6             { margin-bottom: var(--space-6); }
.mb-8             { margin-bottom: var(--space-8); }

/* Margin left */
.ml-0             { margin-left: 0; }
.ml-1             { margin-left: var(--space-1); }
.ml-2             { margin-left: var(--space-2); }
.ml-3             { margin-left: var(--space-3); }
.ml-4             { margin-left: var(--space-4); }
.ml-auto          { margin-left: auto; }

/* Margin right */
.mr-0             { margin-right: 0; }
.mr-1             { margin-right: var(--space-1); }
.mr-2             { margin-right: var(--space-2); }
.mr-3             { margin-right: var(--space-3); }
.mr-4             { margin-right: var(--space-4); }
.mr-auto          { margin-right: auto; }

/* Margin horizontal (left + right) */
.mx-auto          { margin-left: auto; margin-right: auto; }

/* Margin vertical (top + bottom) */
.my-2             { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-4             { margin-top: var(--space-4); margin-bottom: var(--space-4); }


/* ==========================================================================
 * Spacing — Padding
 *
 * Pattern: .p{side}-{scale}
 * ========================================================================== */

/* Padding (all sides) */
.p-0              { padding: 0; }
.p-1              { padding: var(--space-1); }
.p-2              { padding: var(--space-2); }
.p-3              { padding: var(--space-3); }
.p-4              { padding: var(--space-4); }
.p-6              { padding: var(--space-6); }
.p-8              { padding: var(--space-8); }

/* Padding top */
.pt-0             { padding-top: 0; }
.pt-2             { padding-top: var(--space-2); }
.pt-4             { padding-top: var(--space-4); }

/* Padding bottom */
.pb-0             { padding-bottom: 0; }
.pb-2             { padding-bottom: var(--space-2); }
.pb-4             { padding-bottom: var(--space-4); }

/* Padding left */
.pl-2             { padding-left: var(--space-2); }
.pl-4             { padding-left: var(--space-4); }

/* Padding right */
.pr-2             { padding-right: var(--space-2); }
.pr-4             { padding-right: var(--space-4); }

/* Padding horizontal */
.px-2             { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4             { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6             { padding-left: var(--space-6); padding-right: var(--space-6); }

/* Padding vertical */
.py-2             { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3             { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4             { padding-top: var(--space-4); padding-bottom: var(--space-4); }


/* ==========================================================================
 * Width & Height
 * ========================================================================== */

.w-full           { width: 100%; }
.h-full           { height: 100%; }
.min-h-screen     { min-height: 100vh; }


/* ==========================================================================
 * Visibility & Display
 * ========================================================================== */

.hidden           { display: none !important; }
.block            { display: block; }
.inline-block     { display: inline-block; }

/* Screen-reader only — visually hidden but accessible to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ==========================================================================
 * Overflow
 * ========================================================================== */

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }


/* ==========================================================================
 * Border & Rounded
 * ========================================================================== */

.rounded-sm       { border-radius: var(--radius-sm); }
.rounded-md       { border-radius: var(--radius-md); }
.rounded-lg       { border-radius: var(--radius-lg); }
.rounded-full     { border-radius: var(--radius-full); }

.border           { border: 1px solid var(--color-border); }
.border-b         { border-bottom: 1px solid var(--color-border); }
.border-t         { border-top: 1px solid var(--color-border); }


/* ==========================================================================
 * Shadow
 * ========================================================================== */

.shadow-sm        { box-shadow: var(--shadow-sm); }
.shadow-md        { box-shadow: var(--shadow-md); }
.shadow-lg        { box-shadow: var(--shadow-lg); }


/* ==========================================================================
 * Cursor
 * ========================================================================== */

.cursor-pointer   { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }


/* ==========================================================================
 * Positioning
 * ========================================================================== */

.relative         { position: relative; }
.absolute         { position: absolute; }
.fixed            { position: fixed; }
.sticky           { position: sticky; }


/* ==========================================================================
 * Responsive Display
 *
 * .hide-mobile: hidden on screens <= 767px, visible on desktop/tablet
 * .show-mobile-only: visible only on screens <= 767px
 * ========================================================================== */

.show-mobile-only { display: none; }

@media (max-width: 767px) {
  .hide-mobile        { display: none !important; }
  .show-mobile-only   { display: block !important; }
}