/* Responsive Styles for CLOUDSALE Platform */

/* Mobile First Approach */
@media (max-width: 640px) {
    /* Mobile Navigation */
    .mobile-menu-button {
        display: block;
    }
    
    .desktop-menu {
        display: none;
    }
    
    /* Mobile Cards */
    .mobile-card {
        @apply flex flex-col space-y-3 p-4;
    }
    
    .mobile-card-header {
        @apply flex items-center justify-between;
    }
    
    .mobile-card-content {
        @apply flex flex-col space-y-2;
    }
    
    /* Mobile Tables */
    .mobile-table {
        @apply block sm:hidden;
    }
    
    .desktop-table {
        @apply hidden sm:block;
    }
    
    /* Mobile Forms */
    .mobile-form {
        @apply space-y-4;
    }
    
    .mobile-form-group {
        @apply flex flex-col space-y-2;
    }
    
    /* Mobile Charts */
    .mobile-chart {
        @apply h-48 sm:h-64;
    }
    
    /* Mobile Buttons */
    .mobile-button {
        @apply w-full sm:w-auto;
    }
    
    /* Mobile Text */
    .mobile-text-sm {
        @apply text-xs sm:text-sm;
    }
    
    .mobile-text-lg {
        @apply text-base sm:text-lg;
    }
    
    .mobile-text-xl {
        @apply text-lg sm:text-xl;
    }
    
    .mobile-text-2xl {
        @apply text-xl sm:text-2xl;
    }
    
    .mobile-text-3xl {
        @apply text-2xl sm:text-3xl;
    }
    
    /* Mobile Spacing */
    .mobile-px {
        @apply px-4 sm:px-6;
    }
    
    .mobile-py {
        @apply py-4 sm:py-6;
    }
    
    .mobile-mt {
        @apply mt-4 sm:mt-6;
    }
    
    .mobile-mb {
        @apply mb-4 sm:mb-6;
    }
    
    /* Mobile Grid */
    .mobile-grid-1 {
        @apply grid-cols-1 sm:grid-cols-2;
    }
    
    .mobile-grid-2 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
    }
    
    .mobile-grid-4 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-4;
    }
    
    /* Mobile Flex */
    .mobile-flex-col {
        @apply flex-col sm:flex-row;
    }
    
    .mobile-flex-wrap {
        @apply flex-wrap;
    }
    
    /* Mobile Overflow */
    .mobile-overflow-x {
        @apply overflow-x-auto;
    }
    
    /* Mobile Visibility */
    .mobile-hidden {
        @apply hidden sm:block;
    }
    
    .mobile-visible {
        @apply block sm:hidden;
    }
}

/* Tablet Styles */
@media (min-width: 641px) and (max-width: 1024px) {
    .tablet-grid-2 {
        @apply grid-cols-1 md:grid-cols-2;
    }
    
    .tablet-grid-3 {
        @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
    }
    
    .tablet-flex-col {
        @apply flex-col md:flex-row;
    }
}

/* Desktop Styles */
@media (min-width: 1025px) {
    .desktop-grid-4 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-4;
    }
    
    .desktop-flex-row {
        @apply flex-row;
    }
}

/* Chart Responsiveness */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

@media (max-width: 640px) {
    .chart-container {
        height: 250px;
    }
}

@media (min-width: 1024px) {
    .chart-container {
        height: 400px;
    }
}

/* Table Responsiveness */
.responsive-table {
    @apply w-full overflow-x-auto;
}

.responsive-table table {
    @apply min-w-full divide-y divide-gray-200;
}

.responsive-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.responsive-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Card Responsiveness */
.responsive-card {
    @apply bg-white shadow rounded-lg overflow-hidden;
}

.responsive-card-header {
    @apply px-4 py-5 sm:px-6;
}

.responsive-card-body {
    @apply px-4 py-5 sm:px-6;
}

.responsive-card-footer {
    @apply px-4 py-4 sm:px-6 bg-gray-50;
}

/* Form Responsiveness */
.responsive-form {
    @apply space-y-6;
}

.responsive-form-group {
    @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
}

.responsive-form-group-full {
    @apply sm:col-span-2;
}

.responsive-input {
    @apply block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.responsive-label {
    @apply block text-sm font-medium text-gray-700;
}

/* Button Responsiveness */
.responsive-button {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}

.responsive-button-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}

.responsive-button-mobile {
    @apply w-full sm:w-auto;
}

/* Navigation Responsiveness */
.responsive-nav {
    @apply hidden lg:flex lg:flex-shrink-0;
}

.responsive-nav-mobile {
    @apply lg:hidden;
}

.responsive-nav-overlay {
    @apply fixed inset-0 flex z-40 lg:hidden;
}

/* Sidebar Responsiveness */
.responsive-sidebar {
    @apply fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out;
}

.responsive-sidebar-hidden {
    @apply -translate-x-full lg:translate-x-0;
}

.responsive-sidebar-visible {
    @apply translate-x-0;
}

/* Content Responsiveness */
.responsive-content {
    @apply flex-1 flex flex-col overflow-hidden;
}

.responsive-main {
    @apply flex-1 relative overflow-y-auto focus:outline-none;
}

.responsive-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 md:px-8;
}

/* Stats Cards Responsiveness */
.responsive-stats {
    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
}

.responsive-stat-card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.responsive-stat-content {
    @apply p-5;
}

.responsive-stat-icon {
    @apply flex-shrink-0;
}

.responsive-stat-text {
    @apply ml-5 w-0 flex-1;
}

.responsive-stat-title {
    @apply text-sm font-medium text-gray-500 truncate;
}

.responsive-stat-value {
    @apply text-lg font-medium text-gray-900;
}

/* List Responsiveness */
.responsive-list {
    @apply divide-y divide-gray-200;
}

.responsive-list-item {
    @apply px-4 py-4 sm:px-6 hover:bg-gray-50;
}

.responsive-list-item-mobile {
    @apply px-4 py-4;
}

/* Modal Responsiveness */
.responsive-modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.responsive-modal-content {
    @apply flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0;
}

.responsive-modal-dialog {
    @apply inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
}

/* Utility Classes */
.responsive-text-center {
    @apply text-center sm:text-left;
}

.responsive-text-right {
    @apply text-right;
}

.responsive-margin-auto {
    @apply mx-auto;
}

.responsive-padding-responsive {
    @apply px-4 py-4 sm:px-6 sm:py-6;
}

.responsive-gap-responsive {
    @apply gap-4 sm:gap-6;
}

.responsive-space-y-responsive {
    @apply space-y-4 sm:space-y-6;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .print-avoid-break {
        page-break-inside: avoid;
    }
}