/**
 * BuzzersFit Utilities 2025
 * 
 * Utility classes for rapid development
 * Requires: design-system.css
 */

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

.d-none {
   display: none !important;
}

.d-block {
   display: block !important;
}

.d-inline {
   display: inline !important;
}

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

.d-flex {
   display: flex !important;
}

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

.d-grid {
   display: grid !important;
}

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

   .sm\:d-block {
      display: block !important;
   }

   .sm\:d-flex {
      display: flex !important;
   }
}

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

   .md\:d-block {
      display: block !important;
   }

   .md\:d-flex {
      display: flex !important;
   }
}

@media (min-width: 1024px) {
   .lg\:d-none {
      display: none !important;
   }

   .lg\:d-block {
      display: block !important;
   }

   .lg\:d-flex {
      display: flex !important;
   }
}

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

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

.flex-nowrap {
   flex-wrap: nowrap !important;
}

.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;
}

.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;
}

/* 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;
}

/* Gap */
.gap-0 {
   gap: 0 !important;
}

.gap-1 {
   gap: var(--space-1) !important;
}

.gap-2 {
   gap: var(--space-2) !important;
}

.gap-3 {
   gap: var(--space-3) !important;
}

.gap-4 {
   gap: var(--space-4) !important;
}

.gap-5 {
   gap: var(--space-5) !important;
}

.gap-6 {
   gap: var(--space-6) !important;
}

.gap-8 {
   gap: var(--space-8) !important;
}

/* ============================================
   GRID
   ============================================ */

.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-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.grid-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
   .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }

   .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
}

@media (min-width: 768px) {
   .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }

   .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }

   .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
}

@media (min-width: 1024px) {
   .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }

   .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }

   .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
   }
}

/* ============================================
   SPACING - MARGIN
   ============================================ */

.m-0 {
   margin: 0 !important;
}

.m-1 {
   margin: var(--space-1) !important;
}

.m-2 {
   margin: var(--space-2) !important;
}

.m-3 {
   margin: var(--space-3) !important;
}

.m-4 {
   margin: var(--space-4) !important;
}

.m-5 {
   margin: var(--space-5) !important;
}

.m-6 {
   margin: var(--space-6) !important;
}

.m-8 {
   margin: var(--space-8) !important;
}

.m-auto {
   margin: auto !important;
}

.mx-0 {
   margin-left: 0 !important;
   margin-right: 0 !important;
}

.mx-1 {
   margin-left: var(--space-1) !important;
   margin-right: var(--space-1) !important;
}

.mx-2 {
   margin-left: var(--space-2) !important;
   margin-right: var(--space-2) !important;
}

.mx-3 {
   margin-left: var(--space-3) !important;
   margin-right: var(--space-3) !important;
}

.mx-4 {
   margin-left: var(--space-4) !important;
   margin-right: var(--space-4) !important;
}

.mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;
}

.my-0 {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}

.my-1 {
   margin-top: var(--space-1) !important;
   margin-bottom: var(--space-1) !important;
}

.my-2 {
   margin-top: var(--space-2) !important;
   margin-bottom: var(--space-2) !important;
}

.my-3 {
   margin-top: var(--space-3) !important;
   margin-bottom: var(--space-3) !important;
}

.my-4 {
   margin-top: var(--space-4) !important;
   margin-bottom: var(--space-4) !important;
}

.my-6 {
   margin-top: var(--space-6) !important;
   margin-bottom: var(--space-6) !important;
}

.my-8 {
   margin-top: var(--space-8) !important;
   margin-bottom: var(--space-8) !important;
}

.mt-0 {
   margin-top: 0 !important;
}

.mt-1 {
   margin-top: var(--space-1) !important;
}

.mt-2 {
   margin-top: var(--space-2) !important;
}

.mt-3 {
   margin-top: var(--space-3) !important;
}

.mt-4 {
   margin-top: var(--space-4) !important;
}

.mt-6 {
   margin-top: var(--space-6) !important;
}

.mt-8 {
   margin-top: var(--space-8) !important;
}

.mb-0 {
   margin-bottom: 0 !important;
}

.mb-1 {
   margin-bottom: var(--space-1) !important;
}

.mb-2 {
   margin-bottom: var(--space-2) !important;
}

.mb-3 {
   margin-bottom: var(--space-3) !important;
}

.mb-4 {
   margin-bottom: var(--space-4) !important;
}

.mb-6 {
   margin-bottom: var(--space-6) !important;
}

.mb-8 {
   margin-bottom: var(--space-8) !important;
}

.ml-0 {
   margin-left: 0 !important;
}

.ml-1 {
   margin-left: var(--space-1) !important;
}

.ml-2 {
   margin-left: var(--space-2) !important;
}

.ml-3 {
   margin-left: var(--space-3) !important;
}

.ml-4 {
   margin-left: var(--space-4) !important;
}

.ml-auto {
   margin-left: auto !important;
}

.mr-0 {
   margin-right: 0 !important;
}

.mr-1 {
   margin-right: var(--space-1) !important;
}

.mr-2 {
   margin-right: var(--space-2) !important;
}

.mr-3 {
   margin-right: var(--space-3) !important;
}

.mr-4 {
   margin-right: var(--space-4) !important;
}

.mr-auto {
   margin-right: auto !important;
}

/* ============================================
   SPACING - PADDING
   ============================================ */

.p-0 {
   padding: 0 !important;
}

.p-1 {
   padding: var(--space-1) !important;
}

.p-2 {
   padding: var(--space-2) !important;
}

.p-3 {
   padding: var(--space-3) !important;
}

.p-4 {
   padding: var(--space-4) !important;
}

.p-5 {
   padding: var(--space-5) !important;
}

.p-6 {
   padding: var(--space-6) !important;
}

.p-8 {
   padding: var(--space-8) !important;
}

.px-0 {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

.px-1 {
   padding-left: var(--space-1) !important;
   padding-right: var(--space-1) !important;
}

.px-2 {
   padding-left: var(--space-2) !important;
   padding-right: var(--space-2) !important;
}

.px-3 {
   padding-left: var(--space-3) !important;
   padding-right: var(--space-3) !important;
}

.px-4 {
   padding-left: var(--space-4) !important;
   padding-right: var(--space-4) !important;
}

.px-6 {
   padding-left: var(--space-6) !important;
   padding-right: var(--space-6) !important;
}

.px-8 {
   padding-left: var(--space-8) !important;
   padding-right: var(--space-8) !important;
}

.py-0 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}

.py-1 {
   padding-top: var(--space-1) !important;
   padding-bottom: var(--space-1) !important;
}

.py-2 {
   padding-top: var(--space-2) !important;
   padding-bottom: var(--space-2) !important;
}

.py-3 {
   padding-top: var(--space-3) !important;
   padding-bottom: var(--space-3) !important;
}

.py-4 {
   padding-top: var(--space-4) !important;
   padding-bottom: var(--space-4) !important;
}

.py-6 {
   padding-top: var(--space-6) !important;
   padding-bottom: var(--space-6) !important;
}

.py-8 {
   padding-top: var(--space-8) !important;
   padding-bottom: var(--space-8) !important;
}

.pt-0 {
   padding-top: 0 !important;
}

.pt-2 {
   padding-top: var(--space-2) !important;
}

.pt-4 {
   padding-top: var(--space-4) !important;
}

.pt-6 {
   padding-top: var(--space-6) !important;
}

.pb-0 {
   padding-bottom: 0 !important;
}

.pb-2 {
   padding-bottom: var(--space-2) !important;
}

.pb-4 {
   padding-bottom: var(--space-4) !important;
}

.pb-6 {
   padding-bottom: var(--space-6) !important;
}

/* ============================================
   SIZING
   ============================================ */

.w-full {
   width: 100% !important;
}

.w-auto {
   width: auto !important;
}

.w-screen {
   width: 100vw !important;
}

.max-w-sm {
   max-width: var(--container-sm) !important;
}

.max-w-md {
   max-width: var(--container-md) !important;
}

.max-w-lg {
   max-width: var(--container-lg) !important;
}

.max-w-xl {
   max-width: var(--container-xl) !important;
}

.max-w-full {
   max-width: 100% !important;
}

.h-full {
   height: 100% !important;
}

.h-auto {
   height: auto !important;
}

.h-screen {
   height: 100vh !important;
}

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

/* ============================================
   TYPOGRAPHY
   ============================================ */

.text-xs {
   font-size: var(--text-xs) !important;
}

.text-sm {
   font-size: var(--text-sm) !important;
}

.text-base {
   font-size: var(--text-base) !important;
}

.text-lg {
   font-size: var(--text-lg) !important;
}

.text-xl {
   font-size: var(--text-xl) !important;
}

.text-2xl {
   font-size: var(--text-2xl) !important;
}

.text-3xl {
   font-size: var(--text-3xl) !important;
}

.text-4xl {
   font-size: var(--text-4xl) !important;
}

.text-5xl {
   font-size: var(--text-5xl) !important;
}

.font-light {
   font-weight: var(--font-light) !important;
}

.font-normal {
   font-weight: var(--font-normal) !important;
}

.font-medium {
   font-weight: var(--font-medium) !important;
}

.font-semibold {
   font-weight: var(--font-semibold) !important;
}

.font-bold {
   font-weight: var(--font-bold) !important;
}

.text-left {
   text-align: left !important;
}

.text-center {
   text-align: center !important;
}

.text-right {
   text-align: right !important;
}

.uppercase {
   text-transform: uppercase !important;
}

.lowercase {
   text-transform: lowercase !important;
}

.capitalize {
   text-transform: capitalize !important;
}

.normal-case {
   text-transform: none !important;
}

.leading-none {
   line-height: var(--leading-none) !important;
}

.leading-tight {
   line-height: var(--leading-tight) !important;
}

.leading-normal {
   line-height: var(--leading-normal) !important;
}

.leading-relaxed {
   line-height: var(--leading-relaxed) !important;
}

.tracking-tight {
   letter-spacing: var(--tracking-tight) !important;
}

.tracking-normal {
   letter-spacing: var(--tracking-normal) !important;
}

.tracking-wide {
   letter-spacing: var(--tracking-wide) !important;
}

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

.whitespace-nowrap {
   white-space: nowrap !important;
}

.whitespace-normal {
   white-space: normal !important;
}

/* ============================================
   COLORS
   ============================================ */

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

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

.text-success {
   color: var(--color-success) !important;
}

.text-danger {
   color: var(--color-danger) !important;
}

.text-warning {
   color: var(--color-warning) !important;
}

.text-info {
   color: var(--color-info) !important;
}

.text-body {
   color: var(--color-text) !important;
}

.text-muted {
   color: var(--color-text-secondary) !important;
}

.text-light {
   color: var(--color-text-muted) !important;
}

.text-white {
   color: var(--color-text-inverse) !important;
}

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

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

.bg-success {
   background-color: var(--color-success) !important;
}

.bg-danger {
   background-color: var(--color-danger) !important;
}

.bg-warning {
   background-color: var(--color-warning) !important;
}

.bg-info {
   background-color: var(--color-info) !important;
}

.bg-white {
   background-color: var(--surface-base) !important;
}

.bg-transparent {
   background-color: transparent !important;
}

.bg-body {
   background-color: var(--color-background) !important;
}

.bg-alt {
   background-color: var(--color-background-alt) !important;
}

/* ============================================
   BORDERS
   ============================================ */

.border {
   border: 1px solid var(--color-border) !important;
}

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

.border-t {
   border-top: 1px solid var(--color-border) !important;
}

.border-b {
   border-bottom: 1px solid var(--color-border) !important;
}

.border-l {
   border-left: 1px solid var(--color-border) !important;
}

.border-r {
   border-right: 1px solid var(--color-border) !important;
}

.border-primary {
   border-color: var(--color-primary) !important;
}

.border-success {
   border-color: var(--color-success) !important;
}

.border-danger {
   border-color: var(--color-danger) !important;
}

.border-light {
   border-color: var(--color-border-light) !important;
}

.rounded-none {
   border-radius: 0 !important;
}

.rounded-sm {
   border-radius: var(--radius-sm) !important;
}

.rounded {
   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;
}

/* ============================================
   SHADOWS
   ============================================ */

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

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

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

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

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

/* ============================================
   POSITIONING
   ============================================ */

.relative {
   position: relative !important;
}

.absolute {
   position: absolute !important;
}

.fixed {
   position: fixed !important;
}

.sticky {
   position: sticky !important;
}

.inset-0 {
   inset: 0 !important;
}

.top-0 {
   top: 0 !important;
}

.right-0 {
   right: 0 !important;
}

.bottom-0 {
   bottom: 0 !important;
}

.left-0 {
   left: 0 !important;
}

.z-0 {
   z-index: 0 !important;
}

.z-10 {
   z-index: 10 !important;
}

.z-20 {
   z-index: 20 !important;
}

.z-50 {
   z-index: 50 !important;
}

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

.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-y-auto {
   overflow-y: auto !important;
}

/* ============================================
   VISIBILITY & OPACITY
   ============================================ */

.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
   ============================================ */

.cursor-auto {
   cursor: auto !important;
}

.cursor-default {
   cursor: default !important;
}

.cursor-pointer {
   cursor: pointer !important;
}

.cursor-wait {
   cursor: wait !important;
}

.cursor-not-allowed {
   cursor: not-allowed !important;
}

.cursor-grab {
   cursor: grab !important;
}

.cursor-grabbing {
   cursor: grabbing !important;
}

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

.select-none {
   user-select: none !important;
}

.select-text {
   user-select: text !important;
}

.select-all {
   user-select: all !important;
}

/* ============================================
   POINTER EVENTS
   ============================================ */

.pointer-events-none {
   pointer-events: none !important;
}

.pointer-events-auto {
   pointer-events: auto !important;
}

/* ============================================
   TRANSITIONS
   ============================================ */

.transition-none {
   transition: none !important;
}

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

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

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

/* ============================================
   GRID UTILITIES
   ============================================ */

.grid-col-full {
   grid-column: 1 / -1 !important;
}