/* ============================================================================
   Utility Classes - SwimmingLiveTimes Design System
   ============================================================================
   Common reusable utility classes to replace inline styles
   Follows the pale blue/mint professional theme established in site.css
   ========================================================================== */

/* --- Sizing Utilities --- */
.w-3rem { width: 3rem; }
.h-3rem { height: 3rem; }
.w-50 { width: 50px; }
.w-80 { width: 80px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-400 { width: 400px; max-width: 100%; }
.h-6 { height: 6px; }
.h-18 { height: 18px; }
.h-80 { height: 80px; }
.h-160 { height: 160px; }
.h-200 { height: 200px; }
.w-full { width: 100%; }

/* --- Min/Max Height --- */
.min-h-45 { min-height: 45px; }
.min-h-200 { min-height: 200px; }
.max-h-300 { max-height: 300px; }

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }

/* --- Padding Utilities --- */
.pl-10 { padding-left: 10px; }

/* --- Border Radius --- */
.rounded-circle-80 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

/* --- Progress Bar Compact --- */
.progress-compact {
    height: 6px;
    max-width: 400px;
    margin: 0 auto;
}

.progress-medium {
    height: 18px;
}

.progress-full {
    width: 100%;
}

/* --- Modal Backdrop --- */
.modal-backdrop-custom {
    background-color: rgba(0, 0, 0, 0.5);
}

/* --- Breadcrumb Styles --- */
.breadcrumb-transparent {
    background: transparent;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--sl-transition-fast, 160ms) ease;
}

.breadcrumb-link:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

.breadcrumb-active {
    color: white;
}

/* --- Dropdown Menu Scrollable --- */
.dropdown-scrollable {
    max-height: 300px;
    overflow-y: auto;
    z-index: 1050;
}

/* --- Skeleton Loader Height Variants --- */
.skeleton-h-80 {
    height: 80px;
    width: 100%;
}

.skeleton-h-160 {
    height: 160px;
    width: 100%;
}

/* --- Skeleton Text Width Variants --- */
.skeleton-text-40 {
    width: 40%;
}

.skeleton-text-60 {
    width: 60%;
}

.skeleton-text-100 {
    width: 100%;
}

/* --- Column Width Utilities (for tables) --- */
.col-w-32 { width: 32px; }
.col-w-50 { width: 50px; }
.col-w-80 { width: 80px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-150 { width: 150px; }

/* --- Flex Sizing --- */
.flex-shrink-w-50 {
    flex-shrink: 0;
    width: 50px;
}

.flex-shrink-w-150 {
    flex-shrink: 0;
    width: 150px;
}

/* --- Overflow --- */
.overflow-y-auto {
    overflow-y: auto;
}

/* --- Z-index --- */
.z-1050 { z-index: 1050; }

/* --- Background Transparent --- */
.bg-transparent { background: transparent; }