/**
 * Responsive CSS Utilities
 * Mobile-first responsive patterns
 */

/* Container responsive */
.container-responsive {
    @apply w-full px-4 mx-auto;
    @apply sm:px-6 sm:max-w-xl;
    @apply md:max-w-2xl;
    @apply lg:px-8 lg:max-w-5xl;
    @apply xl:max-w-7xl;
}

/* Card grid - responsive columns */
.card-grid {
    @apply grid gap-4;
    @apply grid-cols-1;
    @apply sm:grid-cols-2;
    @apply lg:grid-cols-3;
    @apply xl:grid-cols-4;
}

/* Stats grid - 2 on mobile, 4 on desktop */
.stats-grid {
    @apply grid gap-4;
    @apply grid-cols-2;
    @apply md:grid-cols-4;
}

/* Dashboard layout - stacked on mobile, sidebar on desktop */
.dashboard-layout {
    @apply flex flex-col;
    @apply lg:flex-row lg:gap-8;
}

.dashboard-main {
    @apply flex-1 min-w-0;
}

.dashboard-sidebar {
    @apply w-full mt-6;
    @apply lg:w-80 lg:mt-0 lg:flex-shrink-0;
}

/* Responsive text sizing */
.text-responsive-sm {
    @apply text-xs sm:text-sm;
}

.text-responsive-base {
    @apply text-sm sm:text-base;
}

.text-responsive-lg {
    @apply text-base sm:text-lg md:text-xl;
}

.text-responsive-xl {
    @apply text-lg sm:text-xl md:text-2xl;
}

.text-responsive-2xl {
    @apply text-xl sm:text-2xl md:text-3xl;
}

/* Responsive spacing */
.spacing-responsive {
    @apply p-4 sm:p-6 lg:p-8;
}

.spacing-responsive-y {
    @apply py-4 sm:py-6 lg:py-8;
}

.spacing-responsive-x {
    @apply px-4 sm:px-6 lg:px-8;
}

/* Hide/show at breakpoints */
.hide-mobile {
    @apply hidden sm:block;
}

.show-mobile {
    @apply block sm:hidden;
}

.hide-tablet {
    @apply hidden md:block;
}

.show-tablet {
    @apply block md:hidden;
}

.hide-desktop {
    @apply hidden lg:block;
}

.show-desktop {
    @apply block lg:hidden;
}

/* Responsive table wrapper */
.table-responsive {
    @apply overflow-x-auto -mx-4 sm:mx-0;
}

.table-responsive > table {
    @apply min-w-full;
}

/* Touch-friendly sizing for mobile */
@media (max-width: 640px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    .touch-target-inline {
        min-height: 44px;
    }
}

/* Stack horizontal elements on mobile */
.stack-mobile {
    @apply flex flex-col gap-2;
    @apply sm:flex-row sm:items-center;
}

/* Full width buttons on mobile */
.btn-responsive {
    @apply w-full sm:w-auto;
}

/* Responsive form layout */
.form-grid {
    @apply grid gap-4;
    @apply grid-cols-1;
    @apply md:grid-cols-2;
}

.form-grid-3 {
    @apply grid gap-4;
    @apply grid-cols-1;
    @apply md:grid-cols-2;
    @apply lg:grid-cols-3;
}

/* Aspect ratio containers */
.aspect-card {
    @apply aspect-[4/3];
}

.aspect-video-responsive {
    @apply aspect-video;
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .safe-area-inset {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .safe-area-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}