/**
 * Custom CSS for WA Scheduler Frontend
 * Additional styles to complement Tailwind CSS
 */

/* Custom component styles */
.wascheduler-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Custom button styles */
.btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
    @apply bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Custom 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-transparent;
}

.form-textarea {
    @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-transparent resize-vertical;
}

.form-select {
    @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-transparent;
}

/* Custom card styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.card-header {
    @apply border-b border-gray-200 pb-4 mb-4;
}

.card-title {
    @apply text-xl font-semibold text-gray-800;
}

/* Custom status badges */
.status-badge {
    @apply px-3 py-1 rounded-full text-sm font-medium;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.status-completed {
    @apply bg-green-100 text-green-800;
}

.status-cancelled {
    @apply bg-red-100 text-red-800;
}

/* Custom loading spinner */
.spinner {
    @apply inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent;
}

/* Custom table styles */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 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-900;
}

.table tbody tr:hover {
    @apply bg-gray-50;
}

/* Custom pagination */
.pagination {
    @apply flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6;
}

.pagination-button {
    @apply relative inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md;
}

.pagination-button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Custom modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white;
}

/* Custom notification styles */
.notification {
    @apply fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 max-w-sm;
}

.notification-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.notification-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.notification-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.notification-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Focus styles for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

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