.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.block {
  display: block !important;
}

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

.flex {
  display: flex !important;
}

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

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

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

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

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

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.sticky {
  position: sticky !important;
}

.fixed {
  position: fixed !important;
}

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

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

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

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

.overflow-hidden {
  overflow: hidden !important;
}

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

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

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

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

.font-bold {
  font-weight: 700 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-medium {
  font-weight: 500 !important;
}

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

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

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

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

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

.text-white {
  color: #ffffff !important;
}

.bg-white {
  background: #ffffff !important;
}

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

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

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

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

.rounded-sm {
  border-radius: var(--radius-sm) !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-full {
  border-radius: var(--radius-full) !important;
}

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

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

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

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

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

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

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

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

.mx-auto {
  margin-inline: auto !important;
}

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

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

.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-2 {
  padding-inline: var(--space-2) !important;
}

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

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

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

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

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

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

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

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

.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-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !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-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !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; }

.items-start {
  align-items: flex-start !important;
}

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

.items-end {
  align-items: flex-end !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.flex-column {
  flex-direction: column !important;
}

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

@media (max-width: 720px) {
  .mobile-hidden {
    display: none !important;
  }

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

  .mobile-stack {
    flex-direction: column !important;
  }
}

@media (min-width: 721px) {
  .desktop-hidden {
    display: none !important;
  }
}