// ==========================================================================
// LAYOUT UTILITIES
// ==========================================================================
// Utility classes for common layout needs
// Theme-agnostic layout helpers
// ==========================================================================

// 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; }
.d-inline-grid { display: inline-grid !important; }
.d-table { display: table !important; }
.d-table-cell { display: table-cell !important; }

// RESPONSIVE DISPLAY UTILITIES - Using base breakpoint tokens
@media (max-width: #{$base-breakpoint-xs - 1px}) {
  .d-xs-none { display: none !important; }
  .d-xs-inline { display: inline !important; }
  .d-xs-inline-block { display: inline-block !important; }
  .d-xs-block { display: block !important; }
  .d-xs-flex { display: flex !important; }
  .d-xs-inline-flex { display: inline-flex !important; }
  .d-xs-grid { display: grid !important; }
  .d-xs-inline-grid { display: inline-grid !important; }
}

@media (min-width: #{$base-breakpoint-sm}) {
  .d-sm-none { display: none !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-grid { display: grid !important; }
  .d-sm-inline-grid { display: inline-grid !important; }
}

@media (min-width: #{$base-breakpoint-md}) {
  .d-md-none { display: none !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-grid { display: grid !important; }
  .d-md-inline-grid { display: inline-grid !important; }
}

@media (min-width: #{$base-breakpoint-lg}) {
  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
  .d-lg-inline-grid { display: inline-grid !important; }
}

@media (min-width: #{$base-breakpoint-xl}) {
  .d-xl-none { display: none !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
  .d-xl-grid { display: grid !important; }
  .d-xl-inline-grid { display: inline-grid !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; }

// POSITIONING
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }
.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

// TRANSLATE UTILITIES
.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !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-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

// Z-INDEX UTILITIES
.z-n1 { z-index: -1 !important; }
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !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-100 { z-index: 100 !important; }
.z-1000 { z-index: 1000 !important; }
.z-1010 { z-index: 1010 !important; }
.z-1020 { z-index: 1020 !important; }
.z-1030 { z-index: 1030 !important; }
.z-1040 { z-index: 1040 !important; }
.z-1050 { z-index: 1050 !important; }
.z-1060 { z-index: 1060 !important; }
.z-1070 { z-index: 1070 !important; }

// FLEXBOX UTILITIES
// 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; }

// Responsive flex direction
@media (max-width: 575px) {
  .flex-xs-row { flex-direction: row !important; }
  .flex-xs-column { flex-direction: column !important; }
  .flex-xs-row-reverse { flex-direction: row-reverse !important; }
  .flex-xs-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 576px) {
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-row-reverse { flex-direction: row-reverse !important; }
  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 768px) {
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .flex-md-row-reverse { flex-direction: row-reverse !important; }
  .flex-md-column-reverse { flex-direction: column-reverse !important; }
}

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

// Justify content
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

// Align items
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

// Align content
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

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

// Flex grow/shrink
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

// ORDER
.order-first { order: -1 !important; }
.order-0 { 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-last { order: 6 !important; }

// GRID UTILITIES
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }

// Grid column spans
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

// Grid row spans
.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-full { grid-row: 1 / -1 !important; }

// Grid column start/end
.col-start-1 { grid-column-start: 1 !important; }
.col-start-2 { grid-column-start: 2 !important; }
.col-start-3 { grid-column-start: 3 !important; }
.col-start-4 { grid-column-start: 4 !important; }
.col-start-5 { grid-column-start: 5 !important; }
.col-start-6 { grid-column-start: 6 !important; }
.col-start-auto { grid-column-start: auto !important; }

.col-end-1 { grid-column-end: 1 !important; }
.col-end-2 { grid-column-end: 2 !important; }
.col-end-3 { grid-column-end: 3 !important; }
.col-end-4 { grid-column-end: 4 !important; }
.col-end-5 { grid-column-end: 5 !important; }
.col-end-6 { grid-column-end: 6 !important; }
.col-end-auto { grid-column-end: auto !important; }

// Grid row start/end
.row-start-1 { grid-row-start: 1 !important; }
.row-start-2 { grid-row-start: 2 !important; }
.row-start-3 { grid-row-start: 3 !important; }
.row-start-4 { grid-row-start: 4 !important; }
.row-start-5 { grid-row-start: 5 !important; }
.row-start-6 { grid-row-start: 6 !important; }
.row-start-auto { grid-row-start: auto !important; }

.row-end-1 { grid-row-end: 1 !important; }
.row-end-2 { grid-row-end: 2 !important; }
.row-end-3 { grid-row-end: 3 !important; }
.row-end-4 { grid-row-end: 4 !important; }
.row-end-5 { grid-row-end: 5 !important; }
.row-end-6 { grid-row-end: 6 !important; }
.row-end-auto { grid-row-end: auto !important; }

// Grid auto flow
.grid-flow-row { grid-auto-flow: row !important; }
.grid-flow-col { grid-auto-flow: column !important; }
.grid-flow-dense { grid-auto-flow: dense !important; }
.grid-flow-row-dense { grid-auto-flow: row dense !important; }
.grid-flow-col-dense { grid-auto-flow: column dense !important; }

// FLOAT UTILITIES
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

// CLEAR UTILITIES
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

// OBJECT FIT UTILITIES
.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-scale { object-fit: scale-down !important; }
.object-none { object-fit: none !important; }

// OBJECT POSITION UTILITIES
.object-top { object-position: top !important; }
.object-bottom { object-position: bottom !important; }
.object-center { object-position: center !important; }
.object-left { object-position: left !important; }
.object-left-bottom { object-position: left bottom !important; }
.object-left-top { object-position: left top !important; }
.object-right { object-position: right !important; }
.object-right-bottom { object-position: right bottom !important; }
.object-right-top { object-position: right top !important; }

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

// INTERACTION UTILITIES
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !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-help { cursor: help !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }

// RESIZE UTILITIES
.resize-none { resize: none !important; }
.resize-y { resize: vertical !important; }
.resize-x { resize: horizontal !important; }
.resize { resize: both !important; }

// BOX SIZING UTILITIES
.box-border { box-sizing: border-box !important; }
.box-content { box-sizing: content-box !important; }

// ASPECT RATIO UTILITIES (Modern)
@supports (aspect-ratio: 1 / 1) {
  .aspect-auto { aspect-ratio: auto !important; }
  .aspect-square { aspect-ratio: 1 / 1 !important; }
  .aspect-video { aspect-ratio: 16 / 9 !important; }
  .aspect-4-3 { aspect-ratio: 4 / 3 !important; }
  .aspect-3-2 { aspect-ratio: 3 / 2 !important; }
  .aspect-21-9 { aspect-ratio: 21 / 9 !important; }
}

// CLIP PATH UTILITIES
.clip-ellipse { clip-path: ellipse(50% 50% at 50% 50%) !important; }
.clip-circle { clip-path: circle(50% at 50% 50%) !important; }
.clip-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important; }
.clip-none { clip-path: none !important; }

// TRANSFORM UTILITIES
.transform { transform: var(--tw-transform) !important; }
.transform-none { transform: none !important; }

.rotate-0 { --tw-rotate: 0deg; transform: rotate(var(--tw-rotate)) !important; }
.rotate-45 { --tw-rotate: 45deg; transform: rotate(var(--tw-rotate)) !important; }
.rotate-90 { --tw-rotate: 90deg; transform: rotate(var(--tw-rotate)) !important; }
.rotate-180 { --tw-rotate: 180deg; transform: rotate(var(--tw-rotate)) !important; }

.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-75 { --tw-scale-x: 0.75; --tw-scale-y: 0.75; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-90 { --tw-scale-x: 0.9; --tw-scale-y: 0.9; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
.scale-150 { --tw-scale-x: 1.5; --tw-scale-y: 1.5; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }