/* Global Styles */
html,
body {
  font-family: "Cairo", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic Text Optimization */
[dir="rtl"] {
  font-family: "Cairo", sans-serif;
}

/* Focus Styles */
h1:focus {
  outline: none;
}

/* Form Validation Styles */
.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

/* Blazor Error Boundary */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "حدث خطأ غير متوقع.";
}

/* Form Styles for RTL */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

/* Toast Animation */
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* Utility Classes */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* Admin Layout Responsive Fixes */
@media (max-width: 640px) {
  .admin-content {
    padding: 1rem;
  }
  
  .stats-card {
    min-height: auto;
  }
}

/* Ensure footer stays at bottom */
.min-h-screen {
  display: flex;
  flex-direction: column;
}

/* ============================================
   Waddan Company Brand Colors & Design System
   ============================================ */

:root {
  /* Primary Brand Colors - من شعار ودان */
  --waddan-primary: #d4af37;
  --waddan-primary-light: #facc15;
  --waddan-primary-dark: #b8941f;
  --waddan-accent: #fde047;
  
  /* Extended Color Palette */
  --waddan-blue-50: #fefce8;
  --waddan-blue-100: #fef9c3;
  --waddan-blue-200: #fef08a;
  --waddan-blue-300: #fde047;
  --waddan-blue-400: #facc15;
  --waddan-blue-500: #d4af37;
  --waddan-blue-600: #b8941f;
  --waddan-blue-700: #9c7a1a;
  --waddan-blue-800: #7d6216;
  --waddan-blue-900: #654f12;
  
  /* Neutral Colors with proper contrast */
  --waddan-gray-50: #f9fafb;
  --waddan-gray-100: #f3f4f6;
  --waddan-gray-200: #e5e7eb;
  --waddan-gray-300: #d1d5db;
  --waddan-gray-400: #9ca3af;
  --waddan-gray-500: #6b7280;
  --waddan-gray-600: #4b5563;
  --waddan-gray-700: #374151;
  --waddan-gray-800: #1f2937;
  --waddan-gray-900: #111827;
  
  /* Semantic Colors */
  --waddan-success: #10b981;
  --waddan-warning: #f59e0b;
  --waddan-error: #ef4444;
  --waddan-info: #3b82f6;
  
  /* Shadows */
  --waddan-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --waddan-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --waddan-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --waddan-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --waddan-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --waddan-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --waddan-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --waddan-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --waddan-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Background Color Utilities
   ============================================ */

.bg-waddan-primary {
  background-color: var(--waddan-primary);
}

.bg-waddan-primary-light {
  background-color: var(--waddan-primary-light);
}

.bg-waddan-primary-dark {
  background-color: var(--waddan-primary-dark);
}

.bg-waddan-accent {
  background-color: var(--waddan-accent);
}

.bg-waddan-blue-50 { background-color: var(--waddan-blue-50); }
.bg-waddan-blue-100 { background-color: var(--waddan-blue-100); }
.bg-waddan-blue-200 { background-color: var(--waddan-blue-200); }
.bg-waddan-blue-300 { background-color: var(--waddan-blue-300); }
.bg-waddan-blue-400 { background-color: var(--waddan-blue-400); }
.bg-waddan-blue-500 { background-color: var(--waddan-blue-500); }
.bg-waddan-blue-600 { background-color: var(--waddan-blue-600); }
.bg-waddan-blue-700 { background-color: var(--waddan-blue-700); }
.bg-waddan-blue-800 { background-color: var(--waddan-blue-800); }
.bg-waddan-blue-900 { background-color: var(--waddan-blue-900); }

/* ============================================
   Text Color Utilities
   ============================================ */

.text-waddan-primary {
  color: var(--waddan-primary);
}

.text-waddan-primary-light {
  color: var(--waddan-primary-light);
}

.text-waddan-primary-dark {
  color: var(--waddan-primary-dark);
}

.text-waddan-accent {
  color: var(--waddan-accent);
}

.text-waddan-blue-600 { color: var(--waddan-blue-600); }
.text-waddan-blue-700 { color: var(--waddan-blue-700); }
.text-waddan-blue-800 { color: var(--waddan-blue-800); }
.text-waddan-blue-900 { color: var(--waddan-blue-900); }

/* Text colors with proper contrast ratios (WCAG AA compliant) */
.text-waddan-contrast-light {
  color: #ffffff;
}

.text-waddan-contrast-dark {
  color: var(--waddan-gray-900);
}

/* ============================================
   Border Color Utilities
   ============================================ */

.border-waddan-primary {
  border-color: var(--waddan-primary);
}

.border-waddan-primary-light {
  border-color: var(--waddan-primary-light);
}

.border-waddan-accent {
  border-color: var(--waddan-accent);
}

.border-waddan-blue-200 { border-color: var(--waddan-blue-200); }
.border-waddan-blue-300 { border-color: var(--waddan-blue-300); }
.border-waddan-blue-400 { border-color: var(--waddan-blue-400); }

/* ============================================
   Hover State Utilities
   ============================================ */

.hover\:bg-waddan-primary:hover {
  background-color: var(--waddan-primary);
}

.hover\:bg-waddan-primary-light:hover {
  background-color: var(--waddan-primary-light);
}

.hover\:bg-waddan-primary-dark:hover {
  background-color: var(--waddan-primary-dark);
}

.hover\:text-waddan-primary:hover {
  color: var(--waddan-primary);
}

.hover\:text-waddan-primary-light:hover {
  color: var(--waddan-primary-light);
}

.hover\:border-waddan-primary:hover {
  border-color: var(--waddan-primary);
}

/* ============================================
   Gradient Backgrounds
   ============================================ */

.bg-gradient-waddan {
  background: linear-gradient(135deg, var(--waddan-primary) 0%, var(--waddan-primary-light) 100%);
}

.bg-gradient-waddan-vertical {
  background: linear-gradient(180deg, var(--waddan-primary) 0%, var(--waddan-primary-light) 100%);
}

.bg-gradient-waddan-radial {
  background: radial-gradient(circle at top right, var(--waddan-primary-light), var(--waddan-primary));
}

.bg-gradient-waddan-soft {
  background: linear-gradient(135deg, var(--waddan-blue-50) 0%, var(--waddan-blue-100) 100%);
}

.bg-gradient-waddan-overlay {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.9) 0%, rgba(250, 204, 21, 0.9) 100%);
}

/* ============================================
   Shadow Utilities
   ============================================ */

.shadow-waddan-sm { box-shadow: var(--waddan-shadow-sm); }
.shadow-waddan { box-shadow: var(--waddan-shadow); }
.shadow-waddan-md { box-shadow: var(--waddan-shadow-md); }
.shadow-waddan-lg { box-shadow: var(--waddan-shadow-lg); }
.shadow-waddan-xl { box-shadow: var(--waddan-shadow-xl); }
.shadow-waddan-2xl { box-shadow: var(--waddan-shadow-2xl); }

.shadow-waddan-primary {
  box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.3), 0 8px 10px -6px rgba(212, 175, 55, 0.2);
}

.hover\:shadow-waddan-primary:hover {
  box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.3), 0 8px 10px -6px rgba(212, 175, 55, 0.2);
}

.hover\:shadow-waddan-lg:hover {
  box-shadow: var(--waddan-shadow-lg);
}

.hover\:shadow-waddan-xl:hover {
  box-shadow: var(--waddan-shadow-xl);
}

/* ============================================
   Animation & Transition Utilities
   ============================================ */

.transition-waddan-fast {
  transition: all var(--waddan-transition-fast);
}

.transition-waddan {
  transition: all var(--waddan-transition-base);
}

.transition-waddan-slow {
  transition: all var(--waddan-transition-slow);
}

.transition-colors-waddan {
  transition: color var(--waddan-transition-base), background-color var(--waddan-transition-base), border-color var(--waddan-transition-base);
}

.transition-transform-waddan {
  transition: transform var(--waddan-transition-base);
}

.transition-shadow-waddan {
  transition: box-shadow var(--waddan-transition-base);
}

/* Hover Effects */
.hover-lift {
  transition: transform var(--waddan-transition-base), box-shadow var(--waddan-transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--waddan-shadow-lg);
}

.hover-scale {
  transition: transform var(--waddan-transition-base);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-scale-sm:hover {
  transform: scale(1.02);
}

/* ============================================
   Enhanced Animations
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes fadeInDown {
  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 scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-waddan {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

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

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

.animate-scale-in {
  animation: scaleIn 0.4s ease-out;
}

.animate-pulse-waddan {
  animation: pulse-waddan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

/* Animation Delays */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* ============================================
   Button Styles with Waddan Colors
   ============================================ */

.btn-waddan-primary {
  background-color: var(--waddan-primary);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--waddan-transition-base);
  border: none;
  cursor: pointer;
}

.btn-waddan-primary:hover {
  background-color: var(--waddan-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--waddan-shadow-lg);
}

.btn-waddan-primary:active {
  transform: translateY(0);
}

.btn-waddan-outline {
  background-color: transparent;
  color: var(--waddan-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--waddan-transition-base);
  border: 2px solid var(--waddan-primary);
  cursor: pointer;
}

.btn-waddan-outline:hover {
  background-color: var(--waddan-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--waddan-shadow-lg);
}

.btn-waddan-ghost {
  background-color: transparent;
  color: var(--waddan-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--waddan-transition-base);
  border: none;
  cursor: pointer;
}

.btn-waddan-ghost:hover {
  background-color: var(--waddan-blue-50);
  color: var(--waddan-primary-dark);
}

/* ============================================
   Card Styles with Waddan Design
   ============================================ */

.card-waddan {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--waddan-shadow);
  transition: all var(--waddan-transition-base);
}

.card-waddan:hover {
  box-shadow: var(--waddan-shadow-lg);
  transform: translateY(-4px);
}

.card-waddan-bordered {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 2px solid var(--waddan-blue-200);
  transition: all var(--waddan-transition-base);
}

.card-waddan-bordered:hover {
  border-color: var(--waddan-primary);
  box-shadow: var(--waddan-shadow-md);
}

/* ============================================
   Overlay Utilities
   ============================================ */

.overlay-waddan {
  position: relative;
}

.overlay-waddan::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.8) 0%, rgba(250, 204, 21, 0.8) 100%);
  opacity: 0;
  transition: opacity var(--waddan-transition-base);
  border-radius: inherit;
}

.overlay-waddan:hover::before {
  opacity: 1;
}

/* ============================================
   Text Contrast & Accessibility
   ============================================ */

/* Ensure proper contrast for text on colored backgrounds */
.bg-waddan-primary,
.bg-waddan-primary-light,
.bg-waddan-primary-dark,
.bg-waddan-blue-700,
.bg-waddan-blue-800,
.bg-waddan-blue-900 {
  color: white;
}

.bg-waddan-blue-50,
.bg-waddan-blue-100,
.bg-waddan-blue-200 {
  color: var(--waddan-gray-900);
}

/* High contrast text for accessibility */
.text-high-contrast-light {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.text-high-contrast-dark {
  color: var(--waddan-gray-900);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* ============================================
   Focus States for Accessibility
   ============================================ */

.focus-waddan:focus {
  outline: 2px solid var(--waddan-primary);
  outline-offset: 2px;
}

.focus-waddan-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

/* ============================================
   Responsive Utilities
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}