@tailwind base;
@tailwind components;
@tailwind utilities;

/* نفس التصميم من المشروع الحالي - الوضع النهاري */
:root {
  --button-outline: rgba(0,0,0, .10);
  --badge-outline: rgba(0,0,0, .05);

  /* Automatic computation of border around primary / danger buttons */
  --opaque-button-border-intensity: -8; /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);

  --background: 220 5% 98%;

  --foreground: 220 10% 20%;

  --border: 220 8% 88%;

  --card: 220 4% 96%;

  --card-foreground: 220 10% 22%;

  --card-border: 220 8% 90%;

  --sidebar: 220 6% 94%;

  --sidebar-foreground: 220 10% 24%;

  --sidebar-border: 220 8% 86%;

  --sidebar-primary: 210 80% 45%;

  --sidebar-primary-foreground: 220 5% 96%;

  --sidebar-accent: 220 8% 86%;

  --sidebar-accent-foreground: 220 12% 30%;

  --sidebar-ring: 210 80% 45%;

  --popover: 220 6% 92%;

  --popover-foreground: 220 10% 26%;

  --popover-border: 220 8% 84%;

  --primary: 211 100% 45%; /* Logo Blue */

  --primary-foreground: 220 5% 96%;

  --secondary: 220 8% 88%;

  --secondary-foreground: 220 12% 32%;

  --muted: 220 10% 90%;

  --muted-foreground: 220 15% 45%;

  --accent: 220 12% 86%;

  --accent-foreground: 220 15% 35%;

  --destructive: 0 75% 50%;

  --destructive-foreground: 0 0% 98%;

  --input: 220 15% 75%;
  --ring: 210 80% 45%;
  --chart-1: 210 80% 35%;
  --chart-2: 145 70% 40%; /* Logo Green - keep as accent */
  --chart-3: 35 85% 55%;
  --chart-4: 260 70% 45%;
  --chart-5: 300 65% 50%;

  --font-sans: Cairo, Inter, sans-serif;
  --font-serif: Cairo, Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: .5rem; /* 8px */
  --shadow-2xs: 0px 2px 0px 0px hsl(220 15% 25% / 0.05);
  --shadow-xs: 0px 2px 0px 0px hsl(220 15% 25% / 0.08);
  --shadow-sm: 0px 2px 0px 0px hsl(220 15% 25% / 0.05), 0px 1px 2px -1px hsl(220 15% 25% / 0.10);
  --shadow: 0px 2px 0px 0px hsl(220 15% 25% / 0.05), 0px 1px 2px -1px hsl(220 15% 25% / 0.10);
  --shadow-md: 0px 2px 0px 0px hsl(220 15% 25% / 0.05), 0px 2px 4px -1px hsl(220 15% 25% / 0.15);
  --shadow-lg: 0px 2px 0px 0px hsl(220 15% 25% / 0.05), 0px 4px 6px -1px hsl(220 15% 25% / 0.20);
  --shadow-xl: 0px 2px 0px 0px hsl(220 15% 25% / 0.05), 0px 8px 10px -1px hsl(220 15% 25% / 0.25);
  --shadow-2xl: 0px 2px 0px 0px hsl(220 15% 25% / 0.10);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

/* الوضع المظلم */
.dark {
  --button-outline: rgba(255,255,255, .15);
  --badge-outline: rgba(255,255,255, .08);

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .12);

  --background: 220 25% 12%;

  --foreground: 220 10% 90%;

  --border: 220 15% 20%;

  --card: 220 20% 18%;

  --card-foreground: 220 10% 88%;

  --card-border: 220 15% 22%;

  --sidebar: 220 25% 15%;

  --sidebar-foreground: 220 10% 85%;

  --sidebar-border: 220 15% 25%;

  --sidebar-primary: 210 80% 55%;

  --sidebar-primary-foreground: 220 5% 15%;

  --sidebar-accent: 220 15% 25%;

  --sidebar-accent-foreground: 220 12% 80%;

  --sidebar-ring: 210 80% 55%;

  --popover: 220 20% 16%;

  --popover-foreground: 220 10% 82%;

  --popover-border: 220 15% 28%;

  --primary: 210 80% 55%;

  --primary-foreground: 220 5% 15%;

  --secondary: 220 15% 25%;

  --secondary-foreground: 220 12% 80%;

  --muted: 220 15% 20%;

  --muted-foreground: 220 15% 65%;

  --accent: 220 15% 25%;

  --accent-foreground: 220 15% 75%;

  --destructive: 0 75% 60%;

  --destructive-foreground: 0 0% 98%;

  --input: 220 15% 25%;
  --ring: 210 80% 55%;
}

/* دعم RTL كامل للعربية */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] body {
  font-family: 'Cairo', 'Inter', sans-serif;
}

/* تحسينات للخط العربي */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* أنماط مخصصة للمنصة الطبية */
.medical-gradient {
  /* Updated gradient to match the logo's blue and green */
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--chart-2)) 100%);
}

/* New style for primary hover color to use the green accent */
.hover-text-accent:hover {
  color: hsl(var(--chart-2)); /* Use the green color for hover effect */
  font-weight: 600; /* Make the text slightly bolder on hover for better user experience */
}

.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* تأثيرات التفاعل */
.hover-elevate {
  transition: all 0.2s ease;
}

.hover-elevate:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background-color: hsl(var(--background) / calc(1 + var(--elevate-1)));
}

.active-elevate-2:active {
  transform: translateY(0);
  background-color: hsl(var(--background) / calc(1 + var(--elevate-2)));
}

/* أنماط البطاقات */
.medical-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.medical-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* أزرار مخصصة */
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary-border));
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--secondary-border));
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: hsl(var(--secondary) / 0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* نماذج جميلة */
.medical-input {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.medical-input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
}

/* تخطيط الشبكة */
.medical-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (min-width: 768px) {
  .medical-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

/* أنماط النص العربي */
.arabic-text {
  font-family: 'Cairo', sans-serif;
  line-height: 1.8;
}

.arabic-heading {
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  line-height: 1.4;
}

/* شريط التنقل الطبي */
.medical-navbar {
  /* Enhanced professional look: Fully white background, subtle border, and a more pronounced shadow for a "floating" effect */
  /* Fully white background as requested, with a subtle shadow for professional look */
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* تأثيرات التحميل */
.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/* شارات الحالة */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-pending {
  background: hsl(var(--chart-3) / 0.1);
  color: hsl(var(--chart-3));
  border: 1px solid hsl(var(--chart-3) / 0.2);
}

.status-approved {
  background: hsl(var(--chart-2) / 0.1);
  color: hsl(var(--chart-2));
  border: 1px solid hsl(var(--chart-2) / 0.2);
}

.status-rejected {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.2);
}

/* إضافات للتصميم التجاوبي */
@media (max-width: 768px) {
  .medical-grid {
    grid-template-columns: 1fr;
  }
  
  .medical-card {
    margin: 0 1rem;
  }
}

/* تحسينات للطباعة */
@media print {
  .no-print {
    display: none !important;
  }
  
  .medical-card {
    break-inside: avoid;
  }
}

/* أنماط الفئات */
.category-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.category-primary {
    @apply bg-blue-100 text-blue-800;
}

.category-secondary {
    @apply bg-green-100 text-green-800;
}

/* تحسينات للنماذج */
.form-label {
    @apply block text-sm font-medium text-foreground mb-2;
}

.form-input {
    @apply medical-input w-full;
}

.form-select {
    @apply medical-input w-full;
}

.form-textarea {
    @apply medical-input w-full resize-none;
}

.form-error {
    @apply text-destructive text-sm mt-1;
}

/* زر الحذف */
.btn-destructive {
    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

/* شارة الترويج */
.promoted-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* تأثير عند التمرير على العناصر المروجة */
.medical-card.promoted {
    border: 2px solid #f59e0b;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
}