/**
 * Prime Store - Utility Classes
 * Single-purpose helper classes for rapid UI development
 * Based on functional CSS principles
 *
 * @package PrimeStore
 * @version 2.0.0
 */

/* ===================================================================
   DISPLAY UTILITIES
   =================================================================== */
.hidden {
    display: none !important;
}
.block {
    display: block !important;
}
.inline-block {
    display: inline-block !important;
}
.flex {
    display: flex !important;
}
.inline-flex {
    display: inline-flex !important;
}
.grid {
    display: grid !important;
}

/* ===================================================================
   VISIBILITY UTILITIES
   =================================================================== */
.invisible {
    visibility: hidden !important;
}
.visible {
    visibility: visible !important;
}

/* ===================================================================
   OPACITY UTILITIES
   =================================================================== */
.opacity-0 {
    opacity: 0 !important;
}
.opacity-50 {
    opacity: 0.5 !important;
}
.opacity-100 {
    opacity: 1 !important;
}

/* ===================================================================
   OVERFLOW UTILITIES
   =================================================================== */
.no-scroll {
    overflow: hidden !important;
}
.overflow-auto {
    overflow: auto !important;
}
.overflow-hidden {
    overflow: hidden !important;
}

/* ===================================================================
   POSITION UTILITIES
   =================================================================== */
.relative {
    position: relative !important;
}
.absolute {
    position: absolute !important;
}
.fixed {
    position: fixed !important;
}
.sticky {
    position: sticky !important;
}

/* ===================================================================
   TEXT ALIGNMENT
   =================================================================== */
.text-left {
    text-align: left !important;
}
.text-center {
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}

/* ===================================================================
   MARGIN UTILITIES
   =================================================================== */
.m-0 {
    margin: 0 !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-8 {
    margin-top: var(--spacing-sm, 8px) !important;
}
.mt-12 {
    margin-top: var(--spacing-md, 12px) !important;
}
.mt-16 {
    margin-top: var(--spacing-lg, 16px) !important;
}
.mt-20 {
    margin-top: var(--spacing-xl, 20px) !important;
}
.mb-8 {
    margin-bottom: var(--spacing-sm, 8px) !important;
}
.mb-12 {
    margin-bottom: var(--spacing-md, 12px) !important;
}
.mb-20 {
    margin-bottom: var(--spacing-xl, 20px) !important;
}
.ml-3 {
    margin-left: 3px !important;
}
.ml-6 {
    margin-left: 6px !important;
}

/* ===================================================================
   PADDING UTILITIES
   =================================================================== */
.p-0 {
    padding: 0 !important;
}

/* ===================================================================
   GAP UTILITIES (Flexbox/Grid)
   =================================================================== */
.gap-15 {
    gap: 15px !important;
}
.gap-20 {
    gap: 20px !important;
}

/* ===================================================================
   COLOR UTILITIES
   =================================================================== */
.text-primary {
    color: var(--color-primary, #4f46e5) !important;
}
.text-secondary {
    color: var(--color-text-secondary, #6b7280) !important;
}
.text-success {
    color: var(--color-success, #10b981) !important;
}
.text-warning {
    color: var(--color-warning, #f59e0b) !important;
}
.text-danger {
    color: var(--color-error, #ef4444) !important;
}

.bg-primary {
    background-color: var(--color-primary, #4f46e5) !important;
}
.bg-secondary {
    background-color: var(--color-bg-tertiary, #f3f4f6) !important;
}

/* ===================================================================
   ICON HELPERS
   =================================================================== */
.icon-sm {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
}

.icon-md {
    width: 24px !important;
    height: 24px !important;
}

.icon-toman {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 3px;
}

/* ===================================================================
   BORDER UTILITIES
   =================================================================== */
.border-top {
    border-top: 1px solid var(--color-border, #e5e7eb) !important;
}
.border-dashed {
    border-style: dashed !important;
}

/* ===================================================================
   BORDER RADIUS UTILITIES
   =================================================================== */
.rounded-sm {
    border-radius: var(--radius-sm, 4px) !important;
}
.rounded {
    border-radius: var(--radius-md, 8px) !important;
}
.rounded-lg {
    border-radius: var(--radius-lg, 12px) !important;
}