@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Import modal enhancements */
@import './modal-enhancements.css';

/* Custom styles for the project management system */
@layer base {
    html {
        font-family: 'Cairo', sans-serif;
    }
}

@layer components {
    /* Enhanced Button Components */
    .btn {
        @apply px-4 py-2 rounded-md font-medium transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2;
    }
    
    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
    
    .btn-secondary {
        @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }
    
    .btn-secondary:hover {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
    }
    
    .btn-outline {
        @apply border-2 border-blue-600 text-blue-600 bg-transparent hover:bg-blue-600 hover:text-white focus:ring-blue-500;
    }
    
    .btn-outline:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    
    /* Enhanced Form Components */
    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-all duration-300 ease-in-out;
    }
    
    .form-input:focus {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-2;
    }
    
    .form-error {
        @apply mt-1 text-sm text-red-600;
    }
    
    /* Enhanced Card Components */
    .card {
        @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out;
    }
    
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
        @apply border-b border-gray-200 pb-4 mb-4;
    }
    
    .card-title {
        @apply text-lg font-semibold text-gray-900;
    }
    
    .card-body {
        @apply text-gray-700;
    }
    
    .card-footer {
        @apply border-t border-gray-200 pt-4 mt-4;
    }
    
    /* Enhanced Alert Components */
    .alert {
        @apply rounded-lg p-4 mb-4 border-l-4;
    }
    
    .alert-success {
        @apply bg-green-50 border-green-400 text-green-800;
    }
    
    .alert-error {
        @apply bg-red-50 border-red-400 text-red-800;
    }
    
    .alert-warning {
        @apply bg-yellow-50 border-yellow-400 text-yellow-800;
    }
    
    .alert-info {
        @apply bg-blue-50 border-blue-400 text-blue-800;
    }
    
    /* Enhanced Modal Components */
    .modal-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    .modal-content {
        @apply relative top-4 mx-auto p-0 border-0 w-full max-w-md shadow-2xl rounded-lg bg-white;
        animation: modalSlideIn 0.3s ease-out;
    }
    
    .modal-header {
        @apply flex items-center justify-between p-6 border-b border-gray-200 rounded-t-lg;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    }
    
    .modal-title {
        @apply text-lg font-semibold text-white;
    }
    
    .modal-body {
        @apply p-6;
    }
    
    .modal-footer {
        @apply flex justify-end space-x-3 space-x-reverse p-6 border-t border-gray-200 bg-gray-50 rounded-b-lg;
    }
    
    /* Enhanced Badge Components */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-primary {
        @apply bg-blue-100 text-blue-800;
    }
    
    .badge-success {
        @apply bg-green-100 text-green-800;
    }
    
    .badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }
    
    .badge-error {
        @apply bg-red-100 text-red-800;
    }
    
    /* Enhanced Loading Components */
    .loading-spinner {
        @apply animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600;
    }
    
    .loading-overlay {
        @apply absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center;
    }
    
    /* Enhanced Table Components */
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table-header {
        @apply bg-gray-50;
    }
    
    .table-header-cell {
        @apply px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table-body {
        @apply bg-white divide-y divide-gray-200;
    }
    
    .table-row {
        @apply hover:bg-gray-50 transition-colors duration-200;
    }
    
    .table-cell {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
    }
    
    /* Enhanced Navigation Components */
    .nav-link {
        @apply flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ease-in-out;
    }
    
    .nav-link-active {
        @apply bg-blue-100 text-blue-700;
    }
    
    .nav-link-inactive {
        @apply text-gray-600 hover:bg-gray-50 hover:text-gray-900;
    }
    
    /* Enhanced Sidebar Components */
    .sidebar-nav-link {
        @apply flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ease-in-out;
    }
    
    .sidebar-nav-link:hover {
        @apply bg-gray-100 text-gray-900;
        transform: translateX(-2px);
    }
    
    .sidebar-nav-link.active {
        @apply bg-blue-100 text-blue-700 border-r-2 border-blue-700;
    }
}

@layer utilities {
    /* Custom utility classes */
    .text-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .shadow-soft {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }
    
    .shadow-medium {
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
    }
    
    .shadow-strong {
        box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15);
    }
    
    .rounded-soft {
        border-radius: 0.75rem;
    }
    
    .rounded-medium {
        border-radius: 1rem;
    }
    
    .rounded-strong {
        border-radius: 1.5rem;
    }
    
    .hover-lift:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease;
    }
    
    .hover-scale:hover {
        transform: scale(1.05);
        transition: transform 0.2s ease;
    }
}

/* Animation keyframes */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notificationSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .modal-content {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer button {
        width: 100%;
    }
    
    .card {
        padding: 1rem;
    }
    
    .table-cell {
        padding: 0.75rem;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .card {
        @apply bg-gray-800 text-white;
    }
    
    .form-input {
        @apply bg-gray-700 border-gray-600 text-white;
    }
    
    .form-label {
        @apply text-gray-300;
    }
}