/* Custom styles for RJAA Tasks Management System */

/* RTL Support */

/* Custom component styles */
.task-card {
    transition: all 0.2s ease-in-out;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.meeting-card {
    transition: all 0.2s ease-in-out;
}

.meeting-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

.status-in-progress {
    @apply bg-blue-100 text-blue-800;
}

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

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

.status-scheduled {
    @apply bg-blue-100 text-blue-800;
}

/* Priority badges */
.priority-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.priority-low {
    @apply bg-gray-100 text-gray-800;
}

.priority-medium {
    @apply bg-yellow-100 text-yellow-800;
}

.priority-high {
    @apply bg-orange-100 text-orange-800;
}

.priority-urgent {
    @apply bg-red-100 text-red-800;
}

/* Notification styles */
.notification-unread {
    @apply bg-blue-50 border-l-4 border-blue-400;
}

.notification-read {
    @apply bg-gray-50;
}

/* Form styles */
.form-input {
    @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm;
}

.form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm;
}

/* Button styles */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
}

.btn-danger {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
}

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full h-4 w-4 border-b-2 border-primary;
}

/* File upload area */
.file-upload-area {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
}

.file-upload-area.dragover {
    @apply border-primary bg-blue-50;
}

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

/* RTL table fixes */

/* Modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-md w-full max-h-screen overflow-y-auto;
}

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

.pagination-info {
    @apply flex flex-1 justify-between sm:hidden;
}

.pagination-nav {
    @apply hidden sm:flex sm:flex-1 sm:items-center sm:justify-between;
}

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

/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

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