/**
 * WCP Field Media Upload - Utility Classes
 *
 * Reusable utility classes for common patterns.
 * Use these instead of inline styles.
 */

/* ===========================================
   VISIBILITY
   =========================================== */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hidden from display (use for JS-toggled elements) */
.hidden {
    display: none !important;
}

/* Initially hidden, shown via JS */
.js-hidden {
    display: none;
}

/* ===========================================
   AVATAR FALLBACK PATTERN
   =========================================== */

/*
 * Use with onerror handler on img:
 * onerror="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')"
 */
.avatar-fallback {
    display: none;
}

.avatar-fallback.show {
    display: flex;
}

/* ===========================================
   CHART CONTAINERS
   =========================================== */

.chart-height-300 {
    height: 300px;
}

.chart-height-350 {
    height: 350px;
}

/* ===========================================
   FORM UTILITIES
   =========================================== */

/* Honeypot fields - hide from users but accessible to bots */
.honeypot {
    position: absolute;
    left: -9999px;
}

/* File inputs that are triggered by other elements */
.file-input-hidden {
    display: none;
}

/* ===========================================
   SPACING UTILITIES
   =========================================== */

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

/* ===========================================
   FLEX UTILITIES
   =========================================== */

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }