@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');


body, html {
    font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Form Elements */
.form-input {
    @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm transition-colors duration-200;
}

.form-select {
    @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm transition-colors duration-200;
}

.form-checkbox {
    @apply focus:ring-yellow-500 h-4 w-4 text-yellow-600 border-gray-300 rounded transition-colors duration-200;
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 transition-all duration-200 shadow-sm;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 transition-all duration-200 shadow-sm;
}

/* Cards */
.card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100 transition-all duration-300;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

/* Animations */
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Animation */
.loading {
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Fix for RTL layout */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4 {
    margin-right: 0.5rem;
    margin-left: 0 !important;
}

[dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4 {
    margin-left: 0.5rem;
    margin-right: 0 !important;
}

[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

/* User dropdown menu */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 50;
}

.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
} 

/* === RTL Layout for Arabic Only === */
/* These styles only apply when html has dir="rtl" (Arabic language) */

[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .flex {
    flex-direction: row-reverse;
}

[dir="rtl"] .flex-row {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .flex-col {
    flex-direction: column !important;
}

/* Flip spacing classes for RTL */
[dir="rtl"] .space-x-1 > * + * {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-2 > * + * {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-3 > * + * {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-4 > * + * {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-6 > * + * {
    margin-right: 1.5rem !important;
    margin-left: 0 !important;
}

/* Flip margin classes for RTL */
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; }

/* Flip padding classes for RTL */
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; }
[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; }
[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; }

/* Flip text alignment for RTL */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }

/* Flip justify content for RTL */
[dir="rtl"] .justify-start { justify-content: flex-end !important; }
[dir="rtl"] .justify-end { justify-content: flex-start !important; }

/* Flip items alignment for RTL */
[dir="rtl"] .items-start { align-items: flex-end !important; }
[dir="rtl"] .items-end { align-items: flex-start !important; }

/* Flip border radius for RTL */
[dir="rtl"] .rounded-l-md { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
[dir="rtl"] .rounded-r-md { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }

/* Flip absolute positioning for RTL */
[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; }
[dir="rtl"] .left-0 { left: auto !important; right: 0 !important; }

/* Flip order for RTL */
[dir="rtl"] .order-1 { order: 2 !important; }
[dir="rtl"] .order-2 { order: 1 !important; }

/* Ensure proper RTL layout for containers */
[dir="rtl"] .container {
    direction: rtl;
}

[dir="rtl"] .grid {
    direction: rtl;
}

/* RTL specific hover effects */
[dir="rtl"] .hover\:bg-primary-600:hover {
    background-color: rgb(202 138 4) !important;
}

/* RTL specific transitions */
[dir="rtl"] .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
}