@import 'tailwindcss';

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

@theme {
    --font-sans: 'Inter', 'SF Pro Display', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    
    /* Mobile App Color Palette */
    --color-primary-50: #f0f4ff;
    --color-primary-100: #e0ecff;
    --color-primary-200: #bdd9ff;
    --color-primary-300: #85c1ff;
    --color-primary-400: #3d9eff;
    --color-primary-500: #0066ff;
    --color-primary-600: #0052cc;
    --color-primary-700: #003d99;
    --color-primary-800: #002966;
    --color-primary-900: #001433;
    
    --color-secondary-50: #f0fdf4;
    --color-secondary-100: #dcfce7;
    --color-secondary-200: #bbf7d0;
    --color-secondary-300: #86efac;
    --color-secondary-400: #4ade80;
    --color-secondary-500: #22c55e;
    --color-secondary-600: #16a34a;
    --color-secondary-700: #15803d;
    --color-secondary-800: #166534;
    --color-secondary-900: #14532d;
    
    /* Neutral Colors for Mobile UI */
    --color-neutral-0: #ffffff;
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    
    /* Mobile App Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Mobile App Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Mobile App Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Mobile App Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
}

/* Global Mobile App Styles */
* {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: contain;
}

/* Mobile App Components */
.mobile-card {
    @apply bg-white rounded-2xl shadow-lg border border-neutral-100 overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

.mobile-button {
    @apply inline-flex items-center justify-center px-6 py-3 bg-primary-500 text-white font-semibold rounded-full shadow-md transition-all duration-200 hover:bg-primary-600 hover:shadow-lg active:scale-95;
}

.mobile-button-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-500 text-primary-500 font-semibold rounded-full transition-all duration-200 hover:bg-primary-50 active:scale-95;
}

.mobile-input {
    @apply w-full px-4 py-3 bg-neutral-50 border border-neutral-200 rounded-xl text-neutral-900 placeholder-neutral-400 focus:outline-none focus:border-primary-500 focus:bg-white transition-all duration-200;
}

.mobile-nav-item {
    @apply flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:text-primary-600 hover:bg-primary-50 rounded-xl transition-all duration-200 cursor-pointer;
}

.mobile-nav-item.active {
    @apply text-primary-600 bg-primary-50 font-semibold;
}

.mobile-icon {
    @apply flex items-center justify-center w-12 h-12 rounded-full text-xl transition-all duration-200;
}

.mobile-badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
}

.mobile-divider {
    @apply border-t border-neutral-100 my-6;
}

/* Mobile App Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-slide-in-up {
    animation: slideInUp 0.5s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile-first Responsive Utilities */
.mobile-container {
    @apply max-w-sm mx-auto px-4;
}

@media (min-width: 640px) {
    .mobile-container {
        @apply max-w-2xl px-6;
    }
}

@media (min-width: 1024px) {
    .mobile-container {
        @apply max-w-6xl px-8;
    }
}

/* Custom Scrollbar for Mobile Feel */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400);
}

/* Mobile App Status Colors */
.status-success {
    @apply bg-green-50 text-green-700 border border-green-200;
}

.status-warning {
    @apply bg-yellow-50 text-yellow-700 border border-yellow-200;
}

.status-error {
    @apply bg-red-50 text-red-700 border border-red-200;
}

.status-info {
    @apply bg-blue-50 text-blue-700 border border-blue-200;
}

/* Loading States */
.skeleton {
    @apply bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200 bg-[length:200%_100%] animate-pulse;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        @apply bg-neutral-900 text-neutral-100;
    }
    
    .mobile-card {
        @apply bg-neutral-800 border-neutral-700;
    }
    
    .mobile-input {
        @apply bg-neutral-800 border-neutral-700 text-neutral-100 placeholder-neutral-400;
    }
}