/* Mobile Responsive Utilities */

/* Hide on mobile */
.md\:hidden {
  @media (max-width: 767px) {
    display: none !important;
  }
}

/* Show only on mobile */
.sm\:only {
  @media (min-width: 768px) {
    display: none !important;
  }
}

/* Flexible grid adjustments for mobile */
.grid.mobile-grid-1 {
  @media (max-width: 767px) {
    grid-template-columns: 1fr !important;
  }
}

.grid.mobile-grid-2 {
  @media (max-width: 767px) {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Padding adjustments for mobile */
.p-mobile-sm {
  @media (max-width: 767px) {
    padding: 0.5rem !important;
  }
}

.p-mobile-md {
  @media (max-width: 767px) {
    padding: 1rem !important;
  }
}

.p-mobile-lg {
  @media (max-width: 767px) {
    padding: 1.5rem !important;
  }
}

/* Margin adjustments for mobile */
.m-mobile-sm {
  @media (max-width: 767px) {
    margin: 0.5rem !important;
  }
}

.m-mobile-md {
  @media (max-width: 767px) {
    margin: 1rem !important;
  }
}

.m-mobile-lg {
  @media (max-width: 767px) {
    margin: 1.5rem !important;
  }
}

/* Font size adjustments for mobile */
.text-mobile-sm {
  @media (max-width: 767px) {
    font-size: 0.75rem !important;
  }
}

.text-mobile-base {
  @media (max-width: 767px) {
    font-size: 0.875rem !important;
  }
}

.text-mobile-lg {
  @media (max-width: 767px) {
    font-size: 1rem !important;
  }
}

/* Flex direction adjustments for mobile */
.flex-col-mobile {
  @media (max-width: 767px) {
    flex-direction: column !important;
  }
}

.flex-row-mobile {
  @media (max-width: 767px) {
    flex-direction: row !important;
  }
}

/* Width adjustments for mobile */
.w-full-mobile {
  @media (max-width: 767px) {
    width: 100% !important;
  }
}

.w-auto-mobile {
  @media (max-width: 767px) {
    width: auto !important;
  }
}

/* Height adjustments for mobile */
.h-auto-mobile {
  @media (max-width: 767px) {
    height: auto !important;
  }
}

/* Overflow adjustments for mobile */
.overflow-x-auto-mobile {
  @media (max-width: 767px) {
    overflow-x: auto !important;
  }
}

.overflow-y-auto-mobile {
  @media (max-width: 767px) {
    overflow-y: auto !important;
  }
}

/* Button size adjustments for mobile */
.btn-mobile-sm {
  @media (max-width: 767px) {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

.btn-mobile-md {
  @media (max-width: 767px) {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Card adjustments for mobile */
.card-mobile {
  @media (max-width: 767px) {
    border-radius: 0.5rem !important;
    padding: 1rem !important;
  }
}

/* Table adjustments for mobile */
.table-mobile {
  @media (max-width: 767px) {
    display: block !important;
    overflow-x: auto !important;
  }
}

/* Form adjustments for mobile */
.form-mobile-stacked {
  @media (max-width: 767px) {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Modal adjustments for mobile */
.modal-mobile-fullscreen {
  @media (max-width: 767px) {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* Navigation adjustments for mobile */
.nav-mobile-bottom {
  @media (max-width: 767px) {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: white !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 0.5rem !important;
  }
}

/* Spacing adjustments for mobile */
.space-y-mobile-2 > :not([hidden]) ~ :not([hidden]) {
  @media (max-width: 767px) {
    margin-top: 0.5rem !important;
  }
}

.space-y-mobile-4 > :not([hidden]) ~ :not([hidden]) {
  @media (max-width: 767px) {
    margin-top: 1rem !important;
  }
}

.space-x-mobile-2 > :not([hidden]) ~ :not([hidden]) {
  @media (max-width: 767px) {
    margin-left: 0.5rem !important;
  }
}

.space-x-mobile-4 > :not([hidden]) ~ :not([hidden]) {
  @media (max-width: 767px) {
    margin-left: 1rem !important;
  }
}