/* 🌾 TaniMapping Application Styles */

@import 'tailwindcss';

/*
|--------------------------------------------------------------------------
| TaniMapping Application Styles
|--------------------------------------------------------------------------
|
| This file contains custom styles for the TaniMapping application.
| It includes utility classes, component styles, and responsive design.
|
*/

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.blade.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* =============================================================================
   CUSTOM COMPONENTS
   ============================================================================= */

/* Container Layout */
.tanimapping-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Card Components */
.tanimapping-card {
    @apply bg-white rounded-lg shadow-md p-6;
}

/* Button Components */
.tanimapping-btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors;
}

.tanimapping-btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors;
}

.tanimapping-btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors;
}

.tanimapping-btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors;
}

/* =============================================================================
   RESPONSIVE UTILITIES
   ============================================================================= */

/* Mobile First Approach */
@media (max-width: 640px) {
    .tanimapping-container {
        @apply px-4;
    }
    
    .tanimapping-card {
        @apply p-4;
    }
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .tanimapping-container {
        @apply px-6;
    }
}

/* Large Screens */
@media (min-width: 1024px) {
    .tanimapping-container {
        @apply px-8;
    }
}