/* Mobile-First Responsive Utilities for Church Management System */

/* Mobile Navigation Improvements */
@media (max-width: 1023px) {
    .mobile-nav-open {
        overflow: hidden;
    }

    .sidebar-mobile {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .sidebar-mobile.open {
        transform: translateX(0);
    }

    /* Ensure mobile overlay works properly */
    [data-mobile-overlay] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s ease-in-out;
    }

    [data-mobile-overlay].opacity-0 {
        opacity: 0;
        pointer-events: none;
    }

    [data-mobile-overlay].opacity-100 {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ensure mobile sidebar works properly */
    [data-mobile-sidebar] {
        z-index: 50;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
}

/* Mobile Table Styles */
.mobile-card {
    @apply bg-white rounded-lg shadow p-4 border border-gray-200;
}

.mobile-card-header {
    @apply flex justify-between items-start mb-3 pb-3 border-b border-gray-100;
}

.mobile-card-content {
    @apply space-y-2;
}

.mobile-card-field {
    @apply flex justify-between items-center py-1;
}

.mobile-card-label {
    @apply text-sm font-medium text-gray-500;
}

.mobile-card-value {
    @apply text-sm text-gray-900 text-right;
}

/* Mobile Form Improvements */
.form-field-mobile {
    @apply col-span-1 sm:col-span-2;
}

.form-field-half-mobile {
    @apply col-span-1;
}

/* Mobile Button Styles */
.btn-mobile-full {
    @apply w-full sm:w-auto;
}

.btn-mobile-stack {
    @apply flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2;
}

/* Mobile Typography */
.text-mobile-responsive {
    @apply text-sm sm:text-base;
}

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

/* Mobile Spacing */
.padding-mobile-responsive {
    @apply p-4 sm:p-6 lg:p-8;
}

.margin-mobile-responsive {
    @apply m-4 sm:m-6 lg:m-8;
}

/* Mobile Grid Improvements */
.grid-mobile-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
}

.grid-mobile-cards {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
}

/* Mobile Stats Cards */
.stats-card-mobile {
    @apply bg-white rounded-lg shadow p-4 sm:p-6;
}

.stats-icon-mobile {
    @apply text-2xl sm:text-3xl;
}

.stats-value-mobile {
    @apply text-xl sm:text-2xl font-bold;
}

/* Mobile Navigation Breadcrumbs */
.breadcrumb-mobile {
    @apply hidden sm:flex items-center space-x-2 text-sm text-gray-500;
}

/* Mobile Action Buttons */
.action-buttons-mobile {
    @apply flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3;
}

/* Mobile Modal Improvements */
@media (max-width: 640px) {
    .modal-mobile {
        @apply m-4 max-h-screen overflow-y-auto;
    }
}

/* Mobile Table Overflow */
.table-container-mobile {
    @apply overflow-x-auto -mx-4 sm:mx-0;
}

.table-mobile {
    @apply min-w-full;
}

/* Touch-friendly Interactive Elements */
.touch-target {
    @apply min-h-[44px] min-w-[44px];
}

/* Mobile-specific Utilities */
.hide-mobile {
    @apply hidden sm:block;
}

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

.mobile-only {
    @apply sm:hidden;
}

.desktop-only {
    @apply hidden sm:block;
}

/* Mobile Search and Filters */
.search-mobile {
    @apply w-full sm:w-auto mb-4 sm:mb-0;
}

.filter-mobile {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4;
}

/* Mobile Sidebar Improvements */
.sidebar-item-mobile {
    @apply flex items-center px-4 py-3 text-base font-medium rounded-md;
}

.sidebar-section-mobile {
    @apply px-4 py-2;
}

/* Mobile Dashboard Improvements */
.dashboard-grid-mobile {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6;
}

.dashboard-card-mobile {
    @apply bg-white rounded-lg shadow p-4 sm:p-6;
}

/* Mobile Form Validation */
.error-message-mobile {
    @apply text-red-600 text-sm mt-1;
}

.success-message-mobile {
    @apply text-green-600 text-sm mt-1;
}

/* Mobile Loading States */
.loading-mobile {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Mobile Accessibility Improvements */
.focus-mobile {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Mobile Print Styles */
@media print {
    .no-print {
        @apply hidden;
    }
    
    .print-full-width {
        @apply w-full;
    }
}