@import "tailwindcss";

@theme {
  --color-primary: #1A3A6B;
  --color-primary-light: #2B5EA7;
  --color-primary-dark: #122848;
  --color-secondary: #D4A843;
  --color-secondary-light: #E0BC6A;
  --color-accent: #2E7D32;
  --color-accent-light: #4CAF50;
  --color-background: #F8F9FA;
  --color-surface: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-secondary: #6B7280;
  --color-text-light: #9CA3AF;
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-dark: #0f2547;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}

/* ═══════════════════ DARK THEME ═══════════════════ */
html.dark {
  --color-background: #0b1120;
  --color-surface: #1a2332;
  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-light: #94a3b8;
  --color-border: #3b4f6b;
  --color-border-light: #253347;
}

html.dark body {
  background-color: #0b1120;
  color: #f1f5f9;
}

/* ═══ Backgrounds - clear层次感 ═══ */
html.dark .bg-white { background-color: #1a2332 !important; }
html.dark .bg-gray-50 { background-color: #111927 !important; }
html.dark .bg-gray-100 { background-color: #1e2d42 !important; }
html.dark .bg-gray-200 { background-color: #2a3d56 !important; }
html.dark .bg-gray-50\/60 { background-color: rgba(17,25,39,0.6) !important; }
html.dark .bg-gray-100\/80 { background-color: rgba(30,45,66,0.8) !important; }
html.dark .bg-gray-50\/80 { background-color: rgba(17,25,39,0.8) !important; }

/* ═══ Text Colors - تباين عالي ═══ */
html.dark .text-gray-900 { color: #ffffff !important; }
html.dark .text-gray-800 { color: #f1f5f9 !important; }
html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .text-gray-600 { color: #cbd5e1 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #7a8ba3 !important; }

/* ═══ Border Colors - مرئية ═══ */
html.dark .border-gray-100 { border-color: #1e2d42 !important; }
html.dark .border-gray-200 { border-color: #3b4f6b !important; }
html.dark .border-gray-300 { border-color: #4a6380 !important; }
html.dark .border-gray-200\/50 { border-color: rgba(59,79,107,0.5) !important; }

/* ═══ Divide ═══ */
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e2d42 !important; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #3b4f6b !important; }

/* ═══ Shadows ═══ */
html.dark .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5) !important; }
html.dark .shadow { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5), 0 1px 3px 0 rgba(0,0,0,0.4) !important; }
html.dark .shadow-md { box-shadow: 0 4px 8px -1px rgba(0,0,0,0.6), 0 2px 4px -2px rgba(0,0,0,0.5) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 20px -3px rgba(0,0,0,0.7), 0 4px 8px -4px rgba(0,0,0,0.6) !important; }
html.dark .shadow-xl { box-shadow: 0 20px 30px -5px rgba(0,0,0,0.7), 0 8px 12px -6px rgba(0,0,0,0.6) !important; }
html.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8) !important; }

/* ═══ Hover Backgrounds ═══ */
html.dark .hover\:bg-gray-50:hover { background-color: #1e2d42 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #2a3d56 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #3b5475 !important; }
html.dark .hover\:bg-gray-50\/50:hover { background-color: rgba(30,45,66,0.5) !important; }
html.dark .hover\:bg-blue-50:hover { background-color: rgba(37,99,235,0.2) !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgba(16,185,129,0.2) !important; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(220,38,38,0.2) !important; }
html.dark .hover\:bg-purple-50:hover { background-color: rgba(139,92,246,0.2) !important; }
html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 8px -1px rgba(0,0,0,0.6) !important; }

/* ═══ Focus Rings ═══ */
html.dark .focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6 !important; }
html.dark .focus\:ring-gray-300:focus { --tw-ring-color: #4a6380 !important; }

/* ═══ Form Inputs - واضح جداً ═══ */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
  background-color: #111927 !important;
  border-color: #3b4f6b !important;
  color: #f1f5f9 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #7a8ba3 !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.3) !important;
}

/* ═══ Tables ═══ */
html.dark table { color: #f1f5f9 !important; }
html.dark thead { background-color: #111927 !important; }
html.dark thead tr { background-color: transparent !important; }
html.dark tbody tr { border-color: #253347 !important; }
html.dark tr:hover { background-color: rgba(30,45,66,0.6) !important; }
html.dark td { border-color: #253347 !important; }
html.dark th { color: #cbd5e1 !important; font-weight: 600 !important; }

/* ═══ Select ═══ */
html.dark option { background-color: #1a2332; color: #f1f5f9; }

/* ═══ Scrollbar ═══ */
html.dark ::-webkit-scrollbar-track { background: #0b1120; }
html.dark ::-webkit-scrollbar-thumb { background: #3b4f6b; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a6380; }

/* ═══ Card patterns ═══ */
html.dark .bg-white.rounded-2xl { background-color: #1a2332 !important; }
html.dark .bg-white.rounded-xl { background-color: #1a2332 !important; }
html.dark .bg-white.rounded-lg { background-color: #1a2332 !important; }

/* ═══ Modal overlays ═══ */
html.dark .bg-black\/50 { background-color: rgba(0,0,0,0.75) !important; }

/* ═══ Badge overrides ═══ */
html.dark .bg-blue-100 { background-color: rgba(59,130,246,0.25) !important; }
html.dark .text-blue-800 { color: #60a5fa !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .bg-green-100 { background-color: rgba(16,185,129,0.25) !important; }
html.dark .text-green-800 { color: #34d399 !important; }
html.dark .text-green-600 { color: #34d399 !important; }
html.dark .bg-red-100 { background-color: rgba(220,38,38,0.25) !important; }
html.dark .text-red-800 { color: #f87171 !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .bg-yellow-100 { background-color: rgba(245,158,11,0.25) !important; }
html.dark .text-yellow-800 { color: #fbbf24 !important; }
html.dark .text-yellow-600 { color: #fbbf24 !important; }
html.dark .bg-purple-100 { background-color: rgba(139,92,246,0.25) !important; }
html.dark .text-purple-800 { color: #a78bfa !important; }

/* ═══ Action button hovers ═══ */
html.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.2) !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgba(16,185,129,0.2) !important; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(220,38,38,0.2) !important; }
html.dark .hover\:bg-purple-50:hover { background-color: rgba(139,92,246,0.2) !important; }
html.dark .hover\:text-blue-600:hover { color: #60a5fa !important; }
html.dark .hover\:text-red-600:hover { color: #f87171 !important; }
html.dark .hover\:text-green-600:hover { color: #34d399 !important; }

/* ═══ Misc ═══ */
html.dark .ring-gray-300 { --tw-ring-color: #4a6380 !important; }
html.dark .border-black\/5 { border-color: rgba(255,255,255,0.1) !important; }
html.dark .text-black { color: #f1f5f9 !important; }
html.dark .placeholder-gray-400::placeholder { color: #7a8ba3 !important; }
html.dark .placeholder-gray-500::placeholder { color: #94a3b8 !important; }

/* ═══ Fixed header/sidebar ═══ */
html.dark .bg-white\/80 { background-color: rgba(26,35,50,0.85) !important; }
html.dark .backdrop-blur-md { backdrop-filter: blur(12px) !important; }

::selection {
  background-color: var(--color-primary);
  color: white;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-count-up {
  animation: countUp 0.5s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse 3s ease-in-out infinite;
}

[dir="rtl"] .animate-slide-in-right {
  animation-name: slideInLeft;
}

[dir="rtl"] .animate-slide-in-left {
  animation-name: slideInRight;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}