/* Custom styles that extend Tailwind */
@layer components {
    /* Custom button styles */
    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200;
    }
    
    .btn-outline {
        @apply border border-blue-600 text-blue-600 hover:bg-blue-50 font-bold py-2 px-4 rounded transition duration-200;
    }

    /* Form styles */
    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    }

    /* Alert messages */
    .alert-success {
        @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded;
    }
    
    .alert-error {
        @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded;
    }

    /* Table styles */
    .table-responsive {
        @apply overflow-x-auto shadow-md rounded-lg;
    }
    
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table th {
        @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
    }
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Print styles for receipts */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .receipt-container {
        box-shadow: none !important;
        border: none !important;
    }
}