/* ============================================================================
   Fijara Platform - Utilities
   ============================================================================
   Common utility classes for spacing, display, flex, and other helpers.
   These utilities complement Bootstrap's utilities with custom additions.
   ============================================================================ */

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

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

/* Responsive display */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
}

/* ============================================================================
   FLEXBOX UTILITIES
   ============================================================================ */

/* Flex direction */
.flex-row {
  flex-direction: row !important;
}
.flex-column {
  flex-direction: column !important;
}
.flex-row-reverse {
  flex-direction: row-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 */
.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 */
.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 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;
}

/* Flex grow/shrink */
.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;
}
.grow {
  flex-grow: 1 !important;
}
.grow-0 {
  flex-grow: 0 !important;
}
.shrink {
  flex-shrink: 1 !important;
}
.shrink-0 {
  flex-shrink: 0 !important;
}

/* Gap */
.gap-0 {
  gap: 0 !important;
}
.gap-1 {
  gap: var(--spacing-1) !important;
}
.gap-2 {
  gap: var(--spacing-2) !important;
}
.gap-3 {
  gap: var(--spacing-3) !important;
}
.gap-4 {
  gap: var(--spacing-4) !important;
}
.gap-5 {
  gap: var(--spacing-5) !important;
}
.gap-6 {
  gap: var(--spacing-6) !important;
}
.gap-8 {
  gap: var(--spacing-8) !important;
}

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

/* Margin */
.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: var(--spacing-1) !important;
}
.m-2 {
  margin: var(--spacing-2) !important;
}
.m-3 {
  margin: var(--spacing-3) !important;
}
.m-4 {
  margin: var(--spacing-4) !important;
}
.m-5 {
  margin: var(--spacing-5) !important;
}
.m-6 {
  margin: var(--spacing-6) !important;
}
.m-8 {
  margin: var(--spacing-8) !important;
}
.m-auto {
  margin: auto !important;
}

/* Margin X (horizontal) */
.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mx-1 {
  margin-left: var(--spacing-1) !important;
  margin-right: var(--spacing-1) !important;
}
.mx-2 {
  margin-left: var(--spacing-2) !important;
  margin-right: var(--spacing-2) !important;
}
.mx-3 {
  margin-left: var(--spacing-3) !important;
  margin-right: var(--spacing-3) !important;
}
.mx-4 {
  margin-left: var(--spacing-4) !important;
  margin-right: var(--spacing-4) !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Margin Y (vertical) */
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.my-1 {
  margin-top: var(--spacing-1) !important;
  margin-bottom: var(--spacing-1) !important;
}
.my-2 {
  margin-top: var(--spacing-2) !important;
  margin-bottom: var(--spacing-2) !important;
}
.my-3 {
  margin-top: var(--spacing-3) !important;
  margin-bottom: var(--spacing-3) !important;
}
.my-4 {
  margin-top: var(--spacing-4) !important;
  margin-bottom: var(--spacing-4) !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Margin Top */
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: var(--spacing-1) !important;
}
.mt-2 {
  margin-top: var(--spacing-2) !important;
}
.mt-3 {
  margin-top: var(--spacing-3) !important;
}
.mt-4 {
  margin-top: var(--spacing-4) !important;
}
.mt-5 {
  margin-top: var(--spacing-5) !important;
}
.mt-6 {
  margin-top: var(--spacing-6) !important;
}
.mt-8 {
  margin-top: var(--spacing-8) !important;
}
.mt-auto {
  margin-top: auto !important;
}

/* Margin Bottom */
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: var(--spacing-1) !important;
}
.mb-2 {
  margin-bottom: var(--spacing-2) !important;
}
.mb-3 {
  margin-bottom: var(--spacing-3) !important;
}
.mb-4 {
  margin-bottom: var(--spacing-4) !important;
}
.mb-5 {
  margin-bottom: var(--spacing-5) !important;
}
.mb-6 {
  margin-bottom: var(--spacing-6) !important;
}
.mb-8 {
  margin-bottom: var(--spacing-8) !important;
}
.mb-auto {
  margin-bottom: auto !important;
}

/* Margin Left */
.ms-0,
.ml-0 {
  margin-left: 0 !important;
}
.ms-1,
.ml-1 {
  margin-left: var(--spacing-1) !important;
}
.ms-2,
.ml-2 {
  margin-left: var(--spacing-2) !important;
}
.ms-3,
.ml-3 {
  margin-left: var(--spacing-3) !important;
}
.ms-4,
.ml-4 {
  margin-left: var(--spacing-4) !important;
}
.ms-auto,
.ml-auto {
  margin-left: auto !important;
}

/* Margin Right */
.me-0,
.mr-0 {
  margin-right: 0 !important;
}
.me-1,
.mr-1 {
  margin-right: var(--spacing-1) !important;
}
.me-2,
.mr-2 {
  margin-right: var(--spacing-2) !important;
}
.me-3,
.mr-3 {
  margin-right: var(--spacing-3) !important;
}
.me-4,
.mr-4 {
  margin-right: var(--spacing-4) !important;
}
.me-auto,
.mr-auto {
  margin-right: auto !important;
}

/* Padding */
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: var(--spacing-1) !important;
}
.p-2 {
  padding: var(--spacing-2) !important;
}
.p-3 {
  padding: var(--spacing-3) !important;
}
.p-4 {
  padding: var(--spacing-4) !important;
}
.p-5 {
  padding: var(--spacing-5) !important;
}
.p-6 {
  padding: var(--spacing-6) !important;
}
.p-8 {
  padding: var(--spacing-8) !important;
}

/* Padding X (horizontal) */
.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.px-1 {
  padding-left: var(--spacing-1) !important;
  padding-right: var(--spacing-1) !important;
}
.px-2 {
  padding-left: var(--spacing-2) !important;
  padding-right: var(--spacing-2) !important;
}
.px-3 {
  padding-left: var(--spacing-3) !important;
  padding-right: var(--spacing-3) !important;
}
.px-4 {
  padding-left: var(--spacing-4) !important;
  padding-right: var(--spacing-4) !important;
}
.px-5 {
  padding-left: var(--spacing-5) !important;
  padding-right: var(--spacing-5) !important;
}
.px-6 {
  padding-left: var(--spacing-6) !important;
  padding-right: var(--spacing-6) !important;
}

/* Padding Y (vertical) */
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.py-1 {
  padding-top: var(--spacing-1) !important;
  padding-bottom: var(--spacing-1) !important;
}
.py-2 {
  padding-top: var(--spacing-2) !important;
  padding-bottom: var(--spacing-2) !important;
}
.py-3 {
  padding-top: var(--spacing-3) !important;
  padding-bottom: var(--spacing-3) !important;
}
.py-4 {
  padding-top: var(--spacing-4) !important;
  padding-bottom: var(--spacing-4) !important;
}
.py-5 {
  padding-top: var(--spacing-5) !important;
  padding-bottom: var(--spacing-5) !important;
}
.py-6 {
  padding-top: var(--spacing-6) !important;
  padding-bottom: var(--spacing-6) !important;
}

/* Padding Top */
.pt-0 {
  padding-top: 0 !important;
}
.pt-1 {
  padding-top: var(--spacing-1) !important;
}
.pt-2 {
  padding-top: var(--spacing-2) !important;
}
.pt-3 {
  padding-top: var(--spacing-3) !important;
}
.pt-4 {
  padding-top: var(--spacing-4) !important;
}
.pt-5 {
  padding-top: var(--spacing-5) !important;
}
.pt-6 {
  padding-top: var(--spacing-6) !important;
}
.pt-8 {
  padding-top: var(--spacing-8) !important;
}

/* Padding Bottom */
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: var(--spacing-1) !important;
}
.pb-2 {
  padding-bottom: var(--spacing-2) !important;
}
.pb-3 {
  padding-bottom: var(--spacing-3) !important;
}
.pb-4 {
  padding-bottom: var(--spacing-4) !important;
}
.pb-5 {
  padding-bottom: var(--spacing-5) !important;
}
.pb-6 {
  padding-bottom: var(--spacing-6) !important;
}
.pb-8 {
  padding-bottom: var(--spacing-8) !important;
}

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

.w-25 {
  width: 25% !important;
}
.w-50 {
  width: 50% !important;
}
.w-75 {
  width: 75% !important;
}
.w-100 {
  width: 100% !important;
}
.w-auto {
  width: auto !important;
}
.w-full {
  width: 100% !important;
}
.w-screen {
  width: 100vw !important;
}

.min-w-0 {
  min-width: 0 !important;
}
.min-w-full {
  min-width: 100% !important;
}
.max-w-full {
  max-width: 100% !important;
}
.max-w-screen {
  max-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}
.h-50 {
  height: 50% !important;
}
.h-75 {
  height: 75% !important;
}
.h-100 {
  height: 100% !important;
}
.h-auto {
  height: auto !important;
}
.h-full {
  height: 100% !important;
}
.h-screen {
  height: 100vh !important;
}

.min-h-0 {
  min-height: 0 !important;
}
.min-h-full {
  min-height: 100% !important;
}
.min-h-screen {
  min-height: 100vh !important;
}

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

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

.top-0 {
  top: 0 !important;
}
.right-0 {
  right: 0 !important;
}
.bottom-0 {
  bottom: 0 !important;
}
.left-0 {
  left: 0 !important;
}

.inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

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

.overflow-auto {
  overflow: auto !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-visible {
  overflow: visible !important;
}
.overflow-scroll {
  overflow: scroll !important;
}

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

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

.border {
  border: 1px solid var(--border-color) !important;
}
.border-0 {
  border: 0 !important;
}
.border-top {
  border-top: 1px solid var(--border-color) !important;
}
.border-right {
  border-right: 1px solid var(--border-color) !important;
}
.border-bottom {
  border-bottom: 1px solid var(--border-color) !important;
}
.border-left {
  border-left: 1px solid var(--border-color) !important;
}

.border-primary {
  border-color: var(--color-primary) !important;
}
.border-success {
  border-color: var(--color-success) !important;
}
.border-warning {
  border-color: var(--color-warning) !important;
}
.border-danger {
  border-color: var(--color-error) !important;
}

.rounded-none {
  border-radius: 0 !important;
}
.rounded-sm {
  border-radius: var(--radius-sm) !important;
}
.rounded {
  border-radius: var(--radius-md) !important;
}
.rounded-md {
  border-radius: var(--radius-md) !important;
}
.rounded-lg {
  border-radius: var(--radius-lg) !important;
}
.rounded-xl {
  border-radius: var(--radius-xl) !important;
}
.rounded-2xl {
  border-radius: var(--radius-2xl) !important;
}
.rounded-full {
  border-radius: var(--radius-full) !important;
}

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

.shadow-none {
  box-shadow: none !important;
}
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}
.shadow {
  box-shadow: var(--shadow-md) !important;
}
.shadow-md {
  box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}
.shadow-xl {
  box-shadow: var(--shadow-xl) !important;
}

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

.bg-transparent {
  background-color: transparent !important;
}
.bg-white {
  background-color: var(--color-white) !important;
}
.bg-body {
  background-color: var(--bg-body) !important;
}
.bg-surface {
  background-color: var(--bg-surface) !important;
}
.bg-surface-secondary {
  background-color: var(--bg-surface-secondary) !important;
}
.bg-primary {
  background-color: var(--color-primary) !important;
}
.bg-success {
  background-color: var(--color-success) !important;
}
.bg-warning {
  background-color: var(--color-warning) !important;
}
.bg-danger {
  background-color: var(--color-error) !important;
}
.bg-info {
  background-color: var(--color-info) !important;
}

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

.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}
.opacity-0 {
  opacity: 0 !important;
}
.opacity-25 {
  opacity: 0.25 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-75 {
  opacity: 0.75 !important;
}
.opacity-100 {
  opacity: 1 !important;
}

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

.cursor-auto {
  cursor: auto !important;
}
.cursor-default {
  cursor: default !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.cursor-wait {
  cursor: wait !important;
}
.cursor-text {
  cursor: text !important;
}
.cursor-move {
  cursor: move !important;
}
.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* ============================================================================
   USER SELECT UTILITIES
   ============================================================================ */

.select-none {
  user-select: none !important;
}
.select-text {
  user-select: text !important;
}
.select-all {
  user-select: all !important;
}
.select-auto {
  user-select: auto !important;
}

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

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

/* ============================================================================
   SCREEN READER UTILITIES
   ============================================================================ */

.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: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

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

.transition-none {
  transition: none !important;
}
.transition {
  transition: all var(--transition-normal) !important;
}
.transition-fast {
  transition: all var(--transition-fast) !important;
}
.transition-slow {
  transition: all var(--transition-slow) !important;
}