/* ========================================
   Utility Classes - Extracted from Inline Styles
   Phase B Type3: Inline Style → CSS Class
   ======================================== */

/* === Display Utilities === */
.u-hidden { display: none; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid { display: grid; }

/* === Flexbox Utilities === */
.u-flex-col { flex-direction: column; }
.u-flex-row { flex-direction: row; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }

/* === Text Utilities === */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-font-semibold { font-weight: 600; }
.u-font-bold { font-weight: 700; }
.u-whitespace-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-break-words { word-break: break-word; }

/* === Spacing Utilities === */
.u-m-0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-sm { margin-top: var(--spacing-sm); }
.u-mt-md { margin-top: var(--spacing-md); }
.u-mt-lg { margin-top: var(--spacing-lg); }
.u-mb-sm { margin-bottom: var(--spacing-sm); }
.u-mb-md { margin-bottom: var(--spacing-md); }
.u-mb-lg { margin-bottom: var(--spacing-lg); }
.u-p-0 { padding: 0; }
.u-p-sm { padding: var(--spacing-sm); }
.u-p-md { padding: var(--spacing-md); }
.u-p-lg { padding: var(--spacing-lg); }

/* === Sizing Utilities === */
.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-min-h-screen { min-height: 100vh; }

/* === Position Utilities === */
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-sticky { position: sticky; }
.u-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.u-top-0 { top: 0; }
.u-bottom-0 { bottom: 0; }
.u-left-0 { left: 0; }
.u-right-0 { right: 0; }

/* === Overflow Utilities === */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }
.u-overflow-y-auto { overflow-y: auto; }

/* === Border Radius Utilities === */
.u-rounded { border-radius: var(--radius-card); }
.u-rounded-sm { border-radius: var(--radius-badge); }
.u-rounded-md { border-radius: var(--radius-btn); }
.u-rounded-lg { border-radius: var(--radius-modal); }
.u-rounded-full { border-radius: 9999px; }
.u-rounded-t { border-radius: var(--radius-modal) var(--radius-modal) 0 0; }
.u-rounded-b { border-radius: 0 0 var(--radius-modal) var(--radius-modal); }

/* === Cursor Utilities === */
.u-cursor-pointer { cursor: pointer; }
.u-cursor-default { cursor: default; }

/* === Object Fit === */
.u-object-cover { object-fit: cover; }
.u-object-contain { object-fit: contain; }

/* === Opacity === */
.u-opacity-0 { opacity: 0; }
.u-opacity-50 { opacity: 0.5; }
.u-opacity-100 { opacity: 1; }

/* === Transition === */
.u-transition { transition: all 0.3s ease; }
.u-transition-fast { transition: all 0.15s ease; }

/* === Z-Index === */
.u-z-content { z-index: var(--z-content); }
.u-z-tooltip { z-index: var(--z-tooltip); }
.u-z-modal { z-index: var(--z-modal); }

/* === Color Utilities === */
.u-color-inherit { color: inherit; }
.u-bg-inherit { background: inherit; }
.u-bg-transparent { background: transparent; }

/* === Gap Utilities === */
.u-gap-xs { gap: var(--spacing-xs); }
.u-gap-sm { gap: var(--spacing-sm); }
.u-gap-md { gap: var(--spacing-md); }
.u-gap-lg { gap: var(--spacing-lg); }

/* === Margin Auto === */
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-mx-0 { margin-left: 0; margin-right: 0; }

/* === Accessibility === */
/* Screen-reader only: visually hidden, readable by 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: 0;
}