/* Islamic-Inspired CSS File - Professional HR System */

/* Google Fonts Import - Tajawal for Arabic & Inter for English */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Tailwind CSS Base */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Component Imports */
@import './components/navbar.css';
@import './components/sidebar.css';
@import './components/footer.css';
@import './components/layout.css';
@import './responsive.css';

/* Base Styles */
@layer base {
    html {
        @apply scroll-smooth;
    }
    
    body {
        font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        @apply text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-900 antialiased;
    }
    
    /* English Text */
    [lang="en"], .en {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    /* Arabic Text */
    [lang="ar"], .ar {
        font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        @apply font-semibold leading-tight;
    }
    
    h1 {
        @apply text-3xl lg:text-4xl;
    }
    
    h2 {
        @apply text-2xl lg:text-3xl;
    }
    
    h3 {
        @apply text-xl lg:text-2xl;
    }
    
    h4 {
        @apply text-lg lg:text-xl;
    }
    
    h5 {
        @apply text-base lg:text-lg;
    }
    
    h6 {
        @apply text-sm lg:text-base;
    }
    
    /* Links */
    a {
        @apply transition-colors duration-200;
    }
    
    /* Focus Styles */
    *:focus {
        @apply outline-none;
    }
    
    /* Selection Styles */
    ::selection {
        @apply bg-blue-600 text-white;
    }
    
    ::-moz-selection {
        @apply bg-blue-600 text-white;
    }
}

/* Custom Component Styles */
@layer components {
    /* Islamic-Inspired Color Palette */
    .text-primary {
        @apply text-emerald-600 dark:text-emerald-400;
    }
    
    .text-secondary {
        @apply text-teal-600 dark:text-teal-400;
    }
    
    .bg-primary {
        @apply bg-emerald-600 dark:bg-emerald-500;
    }
    
    .bg-secondary {
        @apply bg-teal-50 dark:bg-teal-800;
    }
    
    .border-primary {
        @apply border-emerald-600 dark:border-emerald-400;
    }
    
    /* Islamic-inspired clean backgrounds */
    .bg-islamic {
        @apply bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20;
    }
    
    .bg-islamic-alt {
        @apply bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20;
    }
    
    /* Islamic pattern backgrounds */
    .bg-islamic-pattern {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic-bg" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="4" fill="%23059669" opacity="0.1"/><path d="M20,8 L32,20 L20,32 L8,20 Z" fill="none" stroke="%23059669" stroke-width="1" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23islamic-bg)"/></svg>');
    }
    
    .bg-islamic-pattern-light {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic-bg-light" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="3" fill="%23059669" opacity="0.05"/><path d="M15,6 L24,15 L15,24 L6,15 Z" fill="none" stroke="%23059669" stroke-width="0.8" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23islamic-bg-light)"/></svg>');
    }
    
    /* Editorial-inspired clean shadows */
    .shadow-editorial {
        @apply shadow-sm shadow-gray-200/20 dark:shadow-gray-900/20;
    }
    
    .shadow-editorial-lg {
        @apply shadow-md shadow-gray-200/30 dark:shadow-gray-900/30;
    }
    
    .shadow-card {
        @apply shadow-sm shadow-gray-200/20 dark:shadow-gray-900/20;
    }
    
    /* Islamic-inspired beautiful gradients */
    .gradient-primary {
        @apply bg-gradient-to-r from-emerald-500 to-emerald-600 shadow-lg;
    }
    
    .gradient-secondary {
        @apply bg-gradient-to-r from-teal-500 to-teal-600 shadow-lg;
    }
    
    .gradient-success {
        @apply bg-gradient-to-r from-emerald-500 to-teal-600 shadow-lg;
    }
    
    .gradient-warning {
        @apply bg-gradient-to-r from-amber-500 to-orange-600 shadow-lg;
    }
    
    .gradient-danger {
        @apply bg-gradient-to-r from-red-500 to-red-600 shadow-lg;
    }
    
    .gradient-islamic {
        @apply bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 shadow-2xl;
    }
    
    .gradient-islamic-alt {
        @apply bg-gradient-to-br from-teal-600 via-emerald-600 to-green-600 shadow-2xl;
    }
    
    .gradient-premium {
        @apply bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500 shadow-2xl;
    }
    
    /* Editorial-inspired subtle animations */
    .animate-fade-in {
        animation: fadeIn 0.3s ease-in-out;
    }
    
    .animate-slide-up {
        animation: slideUp 0.3s ease-out;
    }
    
    .animate-slide-down {
        animation: slideDown 0.3s ease-out;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.2s ease-out;
    }
    
    /* Islamic-inspired hover effects */
    .hover-lift {
        @apply transition-transform duration-150 hover:-translate-y-0.5;
    }
    
    .hover-glow {
        @apply transition-shadow duration-150 hover:shadow-md hover:shadow-emerald-500/20;
    }
    
    .hover-islamic {
        @apply transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20 hover:scale-105;
    }
    
    .hover-gradient {
        @apply transition-all duration-300 hover:bg-gradient-to-r hover:from-emerald-500 hover:to-teal-500 hover:shadow-lg hover:shadow-emerald-500/20;
    }
    
    .hover-premium {
        @apply transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/25 hover:scale-105 hover:brightness-110;
    }
    
    .hover-glow-premium {
        @apply transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/30 hover:ring-2 hover:ring-emerald-400/50 hover:ring-offset-2 hover:ring-offset-transparent;
    }
    
    /* Islamic-inspired status indicators */
    .status-active {
        @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-emerald-100 to-teal-100 text-emerald-800 dark:from-emerald-900/20 dark:to-teal-900/20 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-700 shadow-sm;
    }
    
    .status-inactive {
        @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-red-100 to-pink-100 text-red-800 dark:from-red-900/20 dark:to-pink-900/20 dark:text-red-300 border border-red-200 dark:border-red-700 shadow-sm;
    }
    
    .status-pending {
        @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 dark:from-amber-900/20 dark:to-orange-900/20 dark:text-amber-300 border border-amber-200 dark:border-amber-700 shadow-sm;
    }
    
    .status-draft {
        @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-900/20 dark:to-slate-900/20 dark:text-gray-300 border border-gray-200 dark:border-gray-700 shadow-sm;
    }
    
    /* Editorial-inspired tooltips */
    .tooltip {
        @apply relative;
    }
    
    .tooltip::before {
        @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 text-xs text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm opacity-0 pointer-events-none transition-opacity duration-150;
        content: attr(data-tooltip);
    }
    
    .tooltip:hover::before {
        @apply opacity-100;
    }
    
    /* Editorial-inspired loading states */
    .skeleton {
        @apply animate-pulse bg-gray-100 dark:bg-gray-800 rounded;
    }
    
    .skeleton-text {
        @apply h-4 bg-gray-100 dark:bg-gray-800 rounded;
    }
    
    .skeleton-avatar {
        @apply w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-full;
    }
    
    /* Editorial-inspired form styles */
    .form-floating {
        @apply relative;
    }
    
    .form-floating input {
        @apply pt-6 pb-2;
    }
    
    .form-floating label {
        @apply absolute top-2 left-3 text-xs text-gray-500 dark:text-gray-400 transition-all duration-150;
    }
    
    /* Islamic-inspired data visualization */
    .chart-container {
        @apply bg-gradient-to-br from-white to-emerald-50 dark:from-gray-900 dark:to-emerald-900/20 rounded-xl p-6 shadow-lg border border-emerald-200/50 dark:border-emerald-700/50 hover-islamic;
    }
    
    .metric-card {
        @apply bg-gradient-to-br from-white to-teal-50 dark:from-gray-900 dark:to-teal-900/20 rounded-xl p-6 shadow-lg border border-teal-200/50 dark:border-teal-700/50 hover-islamic;
    }
    
    .islamic-card {
        @apply bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 rounded-xl p-6 shadow-lg border border-emerald-200/50 dark:border-emerald-700/50 hover-islamic bg-islamic-pattern-light;
    }
    
    .islamic-card-alt {
        @apply bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 rounded-xl p-6 shadow-xl border border-teal-200/50 dark:border-teal-700/50 hover-premium bg-islamic-pattern-light backdrop-blur-sm;
    }
    
    .premium-card {
        @apply bg-gradient-to-br from-white via-emerald-50/50 to-teal-50/50 dark:from-gray-900 dark:via-emerald-900/10 dark:to-teal-900/10 rounded-2xl p-8 shadow-2xl border border-emerald-200/30 dark:border-emerald-700/30 hover-glow-premium bg-islamic-pattern-light backdrop-blur-md;
    }
    
    .glass-card {
        @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-2xl p-6 shadow-2xl border border-white/20 dark:border-gray-700/20 hover-premium;
    }
    
    /* Islamic-inspired navigation */
    .nav-pills {
        @apply flex space-x-1 rtl:space-x-reverse bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 rounded-xl p-2 shadow-sm border border-emerald-200/50 dark:border-emerald-700/50;
    }
    
    .nav-pill {
        @apply px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300;
    }
    
    .nav-pill.active {
        @apply bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg border border-emerald-400/50;
    }
    
    .nav-pill:not(.active) {
        @apply text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 hover:bg-emerald-100/50 dark:hover:bg-emerald-800/30;
    }
}

/* RTL polish for charts and cards */
@layer utilities {
    [dir="rtl"] .apexcharts-tooltip {
        text-align: right;
    }
    [dir="rtl"] .apexcharts-legend {
        direction: rtl;
    }
}

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utility Classes */
@layer utilities {
    /* RTL Support */
    .rtl-flip {
        transform: scaleX(-1);
    }
    
    [dir="rtl"] .rtl-flip {
        transform: scaleX(1);
    }
    
    /* Islamic-inspired spacing */
    .space-islamic {
        @apply space-y-6 lg:space-y-8;
    }
    
    /* Islamic-inspired borders */
    .border-islamic {
        @apply border border-emerald-200/50 dark:border-emerald-700/50;
    }
    
    .border-islamic-alt {
        @apply border border-teal-200/50 dark:border-teal-700/50;
    }
    
    /* Islamic-inspired backgrounds */
    .bg-islamic {
        @apply bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20;
    }
    
    .bg-islamic-alt {
        @apply bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20;
    }
    
    /* Islamic-inspired text */
    .text-islamic {
        @apply text-emerald-900 dark:text-emerald-100;
    }
    
    .text-islamic-muted {
        @apply text-emerald-700 dark:text-emerald-300;
    }
    
    .text-islamic-light {
        @apply text-emerald-600 dark:text-emerald-400;
    }
    
    /* Islamic-inspired scrollbars */
    .scrollbar-islamic::-webkit-scrollbar {
        @apply w-2 h-2;
    }
    
    .scrollbar-islamic::-webkit-scrollbar-track {
        @apply bg-emerald-50 dark:bg-emerald-900/20 rounded-full;
    }
    
    .scrollbar-islamic::-webkit-scrollbar-thumb {
        @apply bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-emerald-500;
    }
    
    /* Islamic-inspired shadows */
    .shadow-islamic {
        @apply shadow-lg shadow-emerald-500/15 dark:shadow-emerald-500/25;
    }
    
    .shadow-islamic-lg {
        @apply shadow-xl shadow-emerald-500/20 dark:shadow-emerald-500/30;
    }
    
    .shadow-premium {
        @apply shadow-2xl shadow-emerald-500/25 dark:shadow-emerald-500/35;
    }
    
    .shadow-glow {
        @apply shadow-2xl shadow-emerald-500/30 dark:shadow-emerald-500/40 ring-1 ring-emerald-400/20 dark:ring-emerald-400/30;
    }
}

/* Print Styles */
@media print {
    @page {
        margin: 1in;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    .no-print {
        @apply hidden;
    }
    
    .print-break {
        page-break-after: always;
    }
    
    .print-avoid-break {
        page-break-inside: avoid;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .card {
        @apply border-2 border-gray-900 dark:border-white;
    }
    
    .btn {
        @apply border-2;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}