/* ========================================
   FLEXBOX UTILITY CLASSES
   ======================================== */

/* Display */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }

/* Flex Direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col { flex-direction: column !important; }
.flex-column { flex-direction: column !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify Content (Main Axis) */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align Items (Cross Axis) */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Align Content (Multiple Lines) */
.content-start { align-content: flex-start !important; }
.content-end { align-content: flex-end !important; }
.content-center { align-content: center !important; }
.content-between { align-content: space-between !important; }
.content-around { align-content: space-around !important; }
.content-evenly { align-content: space-evenly !important; }
.content-stretch { align-content: stretch !important; }

/* Align Self */
.self-auto { align-self: auto !important; }
.self-start { align-self: flex-start !important; }
.self-end { align-self: flex-end !important; }
.self-center { align-self: center !important; }
.self-stretch { align-self: stretch !important; }
.self-baseline { align-self: baseline !important; }

/* Flex Grow */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow-2 { flex-grow: 2 !important; }
.flex-grow-3 { flex-grow: 3 !important; }
.flex-grow-4 { flex-grow: 4 !important; }
.flex-grow-5 { flex-grow: 5 !important; }

/* Flex Shrink */
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink { flex-shrink: 1 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-shrink-2 { flex-shrink: 2 !important; }
.flex-shrink-3 { flex-shrink: 3 !important; }

/* Flex Basis */
.flex-basis-auto { flex-basis: auto !important; }
.flex-basis-0 { flex-basis: 0% !important; }
.flex-basis-1 { flex-basis: 8.333333% !important; }
.flex-basis-2 { flex-basis: 16.666667% !important; }
.flex-basis-3 { flex-basis: 25% !important; }
.flex-basis-4 { flex-basis: 33.333333% !important; }
.flex-basis-5 { flex-basis: 41.666667% !important; }
.flex-basis-6 { flex-basis: 50% !important; }
.flex-basis-7 { flex-basis: 58.333333% !important; }
.flex-basis-8 { flex-basis: 66.666667% !important; }
.flex-basis-9 { flex-basis: 75% !important; }
.flex-basis-10 { flex-basis: 83.333333% !important; }
.flex-basis-11 { flex-basis: 91.666667% !important; }
.flex-basis-12 { flex-basis: 100% !important; }
.flex-basis-full { flex-basis: 100% !important; }

/* Flex Shorthand */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }

/* Gap (Modern browsers) */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; } /* 4px */
.gap-2 { gap: 0.5rem !important; }  /* 8px */
.gap-3 { gap: 0.75rem !important; } /* 12px */
.gap-4 { gap: 1rem !important; }    /* 16px */
.gap-5 { gap: 1.25rem !important; } /* 20px */
.gap-6 { gap: 1.5rem !important; }  /* 24px */
.gap-8 { gap: 2rem !important; }    /* 32px */
.gap-10 { gap: 2.5rem !important; } /* 40px */
.gap-12 { gap: 3rem !important; }   /* 48px */
.gap-16 { gap: 4rem !important; }   /* 64px */

/* Row Gap */
.row-gap-0 { row-gap: 0 !important; }
.row-gap-1 { row-gap: 0.25rem !important; }
.row-gap-2 { row-gap: 0.5rem !important; }
.row-gap-3 { row-gap: 0.75rem !important; }
.row-gap-4 { row-gap: 1rem !important; }
.row-gap-5 { row-gap: 1.25rem !important; }
.row-gap-6 { row-gap: 1.5rem !important; }
.row-gap-8 { row-gap: 2rem !important; }

/* Column Gap */
.col-gap-0 { column-gap: 0 !important; }
.col-gap-1 { column-gap: 0.25rem !important; }
.col-gap-2 { column-gap: 0.5rem !important; }
.col-gap-3 { column-gap: 0.75rem !important; }
.col-gap-4 { column-gap: 1rem !important; }
.col-gap-5 { column-gap: 1.25rem !important; }
.col-gap-6 { column-gap: 1.5rem !important; }
.col-gap-8 { column-gap: 2rem !important; }

/* Width utilities for flex items */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-1-2 { width: 50% !important; }
.w-1-3 { width: 33.333333% !important; }
.w-2-3 { width: 66.666667% !important; }
.w-1-4 { width: 25% !important; }
.w-3-4 { width: 75% !important; }
.w-1-5 { width: 20% !important; }
.w-2-5 { width: 40% !important; }
.w-3-5 { width: 60% !important; }
.w-4-5 { width: 80% !important; }

/* Height utilities */
.h-auto { height: auto !important; }
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }

/* Min/Max Width */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.max-w-full { max-width: 100% !important; }
.max-w-none { max-width: none !important; }

/* Min/Max Height */
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.max-h-full { max-height: 100% !important; }

/* Common Flex Patterns */
.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-center-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flex-around {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.flex-start {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.flex-end {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Responsive Variants (for larger screens) */
@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:flex-row { flex-direction: row !important; }
    .md\:flex-col { flex-direction: column !important; }
    .md\:justify-start { justify-content: flex-start !important; }
    .md\:justify-end { justify-content: flex-end !important; }
    .md\:justify-center { justify-content: center !important; }
    .md\:justify-between { justify-content: space-between !important; }
    .md\:items-start { align-items: flex-start !important; }
    .md\:items-end { align-items: flex-end !important; }
    .md\:items-center { align-items: center !important; }
    .md\:items-stretch { align-items: stretch !important; }
    .md\:flex-wrap { flex-wrap: wrap !important; }
    .md\:flex-nowrap { flex-wrap: nowrap !important; }
    .md\:flex-1 { flex: 1 1 0% !important; }
    .md\:w-1-2 { width: 50% !important; }
    .md\:w-1-3 { width: 33.333333% !important; }
    .md\:w-2-3 { width: 66.666667% !important; }
    .md\:w-1-4 { width: 25% !important; }
    .md\:w-3-4 { width: 75% !important; }
}

@media (min-width: 1024px) {
    .lg\:flex { display: flex !important; }
    .lg\:flex-row { flex-direction: row !important; }
    .lg\:flex-col { flex-direction: column !important; }
    .lg\:justify-start { justify-content: flex-start !important; }
    .lg\:justify-end { justify-content: flex-end !important; }
    .lg\:justify-center { justify-content: center !important; }
    .lg\:justify-between { justify-content: space-between !important; }
    .lg\:items-start { align-items: flex-start !important; }
    .lg\:items-end { align-items: flex-end !important; }
    .lg\:items-center { align-items: center !important; }
    .lg\:items-stretch { align-items: stretch !important; }
    .lg\:flex-wrap { flex-wrap: wrap !important; }
    .lg\:flex-nowrap { flex-wrap: nowrap !important; }
    .lg\:flex-1 { flex: 1 1 0% !important; }
}

/* Order utilities */
.order-first { order: -9999 !important; }
.order-last { order: 9999 !important; }
.order-none { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }
.order-6 { order: 6 !important; }
.order-7 { order: 7 !important; }
.order-8 { order: 8 !important; }
.order-9 { order: 9 !important; }
.order-10 { order: 10 !important; }
.order-11 { order: 11 !important; }
.order-12 { order: 12 !important; }