/**
 * Utility Classes
 * Replaces inline styles with reusable CSS classes
 *
 * Copyright (c) 2025 EHORS Technology. All Rights Reserved.
 */

/* ===================================
   DISPLAY UTILITIES
   =================================== */

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

/* ===================================
   OPACITY UTILITIES
   =================================== */

.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-100 { opacity: 1 !important; }

/* ===================================
   POSITION UTILITIES
   =================================== */

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-static { position: static !important; }

/* ===================================
   SKELETON LOADING DIMENSIONS
   =================================== */

/* Width utilities */
.w-40px { width: 40px; }
.w-60px { width: 60px; }
.w-80px { width: 80px; }
.w-200px { width: 200px; }
.w-400px { width: 400px; }

/* Height utilities */
.h-32px { height: 32px; }
.h-36px { height: 36px; }
.h-40px { height: 40px; }
.h-50px { height: 50px; }
.h-80px { height: 80px; }

/* ===================================
   SKELETON ANIMATION DELAYS
   =================================== */

[data-animation-delay="0.1s"] { animation-delay: 0.1s; }
[data-animation-delay="0.15s"] { animation-delay: 0.15s; }
[data-animation-delay="0.2s"] { animation-delay: 0.2s; }
[data-animation-delay="0.25s"] { animation-delay: 0.25s; }
[data-animation-delay="0.3s"] { animation-delay: 0.3s; }
[data-animation-delay="0.35s"] { animation-delay: 0.35s; }
[data-animation-delay="0.4s"] { animation-delay: 0.4s; }
[data-animation-delay="0.5s"] { animation-delay: 0.5s; }
[data-animation-delay="0.55s"] { animation-delay: 0.55s; }
[data-animation-delay="0.6s"] { animation-delay: 0.6s; }
[data-animation-delay="0.65s"] { animation-delay: 0.65s; }
[data-animation-delay="0.7s"] { animation-delay: 0.7s; }
[data-animation-delay="0.75s"] { animation-delay: 0.75s; }
[data-animation-delay="0.8s"] { animation-delay: 0.8s; }
[data-animation-delay="0.85s"] { animation-delay: 0.85s; }
[data-animation-delay="0.9s"] { animation-delay: 0.9s; }
[data-animation-delay="0.95s"] { animation-delay: 0.95s; }
[data-animation-delay="1s"] { animation-delay: 1s; }
[data-animation-delay="1.05s"] { animation-delay: 1.05s; }
[data-animation-delay="1.1s"] { animation-delay: 1.1s; }
[data-animation-delay="1.15s"] { animation-delay: 1.15s; }
[data-animation-delay="1.2s"] { animation-delay: 1.2s; }
[data-animation-delay="1.25s"] { animation-delay: 1.25s; }
[data-animation-delay="1.3s"] { animation-delay: 1.3s; }
[data-animation-delay="1.35s"] { animation-delay: 1.35s; }
[data-animation-delay="1.4s"] { animation-delay: 1.4s; }
[data-animation-delay="1.45s"] { animation-delay: 1.45s; }
[data-animation-delay="1.5s"] { animation-delay: 1.5s; }
[data-animation-delay="1.55s"] { animation-delay: 1.55s; }
[data-animation-delay="1.6s"] { animation-delay: 1.6s; }
[data-animation-delay="1.65s"] { animation-delay: 1.65s; }
[data-animation-delay="1.7s"] { animation-delay: 1.7s; }
[data-animation-delay="1.75s"] { animation-delay: 1.75s; }
[data-animation-delay="1.8s"] { animation-delay: 1.8s; }
[data-animation-delay="1.85s"] { animation-delay: 1.85s; }

/* ===================================
   TRANSITION UTILITIES
   =================================== */

.transition-opacity {
    transition: opacity 0.5s ease-in-out;
}

.transition-all {
    transition: all 0.3s ease;
}

/* ===================================
   MARGIN UTILITIES (additional to Bootstrap)
   =================================== */

.mr-1px { margin-right: 1px; }
.mb-1px { margin-bottom: 1px; }
.m-0-1rem { margin: 0 1rem; }
.mr-05rem { margin-right: 0.5rem; }

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

.visibility-visible { visibility: visible !important; }
.visibility-hidden { visibility: hidden !important; }

/* ===================================
   Z-INDEX UTILITIES
   =================================== */

.z-9999 { z-index: 9999; }
.z-999999 { z-index: 999999; }

/* ===================================
   CURSOR UTILITIES
   =================================== */

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

/* ===================================
   FLOATING ELEMENTS
   =================================== */

.float-right { float: right; }
.float-left { float: left; }
.float-none { float: none; }

/* ===================================
   MAX HEIGHT/WIDTH
   =================================== */

.max-h-500px { max-height: 500px; }
.max-w-400px { max-width: 400px; }

/* ===================================
   OVERFLOW UTILITIES
   =================================== */

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

/* ===================================
   TOP/RIGHT/BOTTOM/LEFT UTILITIES
   =================================== */

.top-50px { top: 50px; }
.top-80px { top: 80px; }
.right-20px { right: 20px; }

/* ===================================
   LOADING INDICATOR STYLES
   =================================== */

.loading-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ===================================
   HIDDEN BY DEFAULT
   =================================== */

.hidden-by-default {
    display: none;
}

/* Can be shown with .show-element class */
.show-element {
    display: block !important;
}