/**
 * DealerHub Vehicles Pro - Utility Classes
 * Helper classes for common styling needs
 */

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

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

.dh-m-sm { margin: var(--dh-spacing-sm) !important; }
.dh-m-md { margin: var(--dh-spacing-md) !important; }
.dh-m-lg { margin: var(--dh-spacing-lg) !important; }
.dh-m-xl { margin: var(--dh-spacing-xl) !important; }

.dh-mt-sm { margin-top: var(--dh-spacing-sm) !important; }
.dh-mt-md { margin-top: var(--dh-spacing-md) !important; }
.dh-mt-lg { margin-top: var(--dh-spacing-lg) !important; }
.dh-mt-xl { margin-top: var(--dh-spacing-xl) !important; }

.dh-mb-sm { margin-bottom: var(--dh-spacing-sm) !important; }
.dh-mb-md { margin-bottom: var(--dh-spacing-md) !important; }
.dh-mb-lg { margin-bottom: var(--dh-spacing-lg) !important; }
.dh-mb-xl { margin-bottom: var(--dh-spacing-xl) !important; }

.dh-p-0 { padding: 0 !important; }
.dh-p-sm { padding: var(--dh-spacing-sm) !important; }
.dh-p-md { padding: var(--dh-spacing-md) !important; }
.dh-p-lg { padding: var(--dh-spacing-lg) !important; }
.dh-p-xl { padding: var(--dh-spacing-xl) !important; }

/* ========================================
   TEXT UTILITIES
   ======================================== */

.dh-text-left { text-align: left !important; }
.dh-text-center { text-align: center !important; }
.dh-text-right { text-align: right !important; }

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

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

.dh-text-primary { color: var(--dh-text-primary) !important; }
.dh-text-secondary { color: var(--dh-text-secondary) !important; }
.dh-text-light { color: var(--dh-text-light) !important; }
.dh-text-white { color: var(--dh-text-white) !important; }

.dh-text-brand-primary { color: var(--dh-primary-color) !important; }
.dh-text-brand-secondary { color: var(--dh-secondary-color) !important; }

.dh-uppercase { text-transform: uppercase !important; }
.dh-lowercase { text-transform: lowercase !important; }
.dh-capitalize { text-transform: capitalize !important; }

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

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

.dh-line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   BACKGROUND UTILITIES
   ======================================== */

.dh-bg-primary { background-color: var(--dh-bg-primary) !important; }
.dh-bg-secondary { background-color: var(--dh-bg-secondary) !important; }
.dh-bg-tertiary { background-color: var(--dh-bg-tertiary) !important; }

.dh-bg-brand-primary { background-color: var(--dh-primary-color) !important; }
.dh-bg-brand-secondary { background-color: var(--dh-secondary-color) !important; }

/* ========================================
   BORDER UTILITIES
   ======================================== */

.dh-border { border: 1px solid var(--dh-border-light) !important; }
.dh-border-t { border-top: 1px solid var(--dh-border-light) !important; }
.dh-border-r { border-right: 1px solid var(--dh-border-light) !important; }
.dh-border-b { border-bottom: 1px solid var(--dh-border-light) !important; }
.dh-border-l { border-left: 1px solid var(--dh-border-light) !important; }

.dh-border-0 { border: none !important; }

.dh-rounded { border-radius: var(--dh-btn-radius) !important; }
.dh-rounded-sm { border-radius: 4px !important; }
.dh-rounded-lg { border-radius: var(--dh-card-radius) !important; }
.dh-rounded-full { border-radius: 9999px !important; }

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

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

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

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

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

.dh-overflow-hidden { overflow: hidden !important; }
.dh-overflow-auto { overflow: auto !important; }
.dh-overflow-scroll { overflow: scroll !important; }
.dh-overflow-x-hidden { overflow-x: hidden !important; }
.dh-overflow-y-hidden { overflow-y: hidden !important; }

/* ========================================
   WIDTH & HEIGHT UTILITIES
   ======================================== */

.dh-w-full { width: 100% !important; }
.dh-w-auto { width: auto !important; }
.dh-h-full { height: 100% !important; }
.dh-h-auto { height: auto !important; }

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.dh-shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.dh-shadow {
    box-shadow: var(--dh-card-shadow) !important;
}

.dh-shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.dh-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.dh-shadow-none {
    box-shadow: none !important;
}

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

.dh-opacity-0 { opacity: 0 !important; }
.dh-opacity-25 { opacity: 0.25 !important; }
.dh-opacity-50 { opacity: 0.5 !important; }
.dh-opacity-75 { opacity: 0.75 !important; }
.dh-opacity-100 { opacity: 1 !important; }

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

.dh-cursor-pointer { cursor: pointer !important; }
.dh-cursor-not-allowed { cursor: not-allowed !important; }
.dh-cursor-default { cursor: default !important; }

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

.dh-transition-fast { transition: all var(--dh-transition-fast) !important; }
.dh-transition { transition: all var(--dh-transition-base) !important; }
.dh-transition-slow { transition: all var(--dh-transition-slow) !important; }

/* ========================================
   ANIMATION UTILITIES
   ======================================== */

.dh-animate-spin {
    animation: dh-spin 1s linear infinite;
}

.dh-animate-pulse {
    animation: dh-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dh-animate-bounce {
    animation: dh-bounce 1s infinite;
}

@keyframes dh-spin {
    to { transform: rotate(360deg); }
}

@keyframes dh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes dh-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* ========================================
   ASPECT RATIO UTILITIES
   ======================================== */

.dh-aspect-square {
    aspect-ratio: 1 / 1 !important;
}

.dh-aspect-video {
    aspect-ratio: 16 / 9 !important;
}

.dh-aspect-4-3 {
    aspect-ratio: 4 / 3 !important;
}

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

.dh-z-0 { z-index: 0 !important; }
.dh-z-10 { z-index: 10 !important; }
.dh-z-20 { z-index: 20 !important; }
.dh-z-30 { z-index: 30 !important; }
.dh-z-40 { z-index: 40 !important; }
.dh-z-50 { z-index: 50 !important; }

/* ========================================
   SCREEN READER ONLY
   ======================================== */

.dh-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}