@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* 
  Tailwind CSS Output for Blazor
  This file contains the compiled Tailwind styles
  Using CDN for Tailwind utilities
*/

:root {
  /* Professional Blue B2B Theme - Enhanced Contrast */
  --background: 210 40% 98%;
  --foreground: 222 47% 8%;
  
  --card: 0 0% 100%;
  --card-foreground: 222 47% 8%;
  
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 8%;
  
  --primary: 217 91% 40%;
  --primary-foreground: 0 0% 100%;
  
  --secondary: 210 40% 94%;
  --secondary-foreground: 222 47% 8%;
  
  --muted: 210 40% 94%;
  --muted-foreground: 215 20% 40%;
  
  --accent: 210 40% 90%;
  --accent-foreground: 222 47% 8%;
  
  --destructive: 0 84% 55%;
  --destructive-foreground: 0 0% 100%;
  
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;
  
  --warning: 38 92% 45%;
  --warning-foreground: 0 0% 100%;
  
  --border: 214 32% 85%;
  --input: 214 32% 85%;
  --ring: 217 91% 40%;
  
  --radius: 0.75rem;
  
  /* Sidebar - Enhanced Contrast */
  --sidebar-background: 222 47% 8%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 217 91% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 217 40% 15%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 217 40% 18%;
  --sidebar-ring: 217 91% 55%;
}

.dark {
  --background: 222 47% 6%;
  --foreground: 0 0% 98%;
  
  --card: 222 47% 10%;
  --card-foreground: 0 0% 98%;
  
  --popover: 222 47% 10%;
  --popover-foreground: 0 0% 98%;
  
  --primary: 217 91% 55%;
  --primary-foreground: 0 0% 100%;
  
  --secondary: 217 33% 15%;
  --secondary-foreground: 0 0% 98%;
  
  --muted: 217 33% 15%;
  --muted-foreground: 215 20% 70%;
  
  --accent: 217 33% 18%;
  --accent-foreground: 0 0% 98%;
  
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  
  --success: 142 71% 40%;
  --success-foreground: 0 0% 100%;
  
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;
  
  --border: 217 33% 25%;
  --input: 217 33% 25%;
  --ring: 217 91% 55%;
  
  --sidebar-background: 222 47% 4%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 217 91% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 217 40% 12%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 217 40% 15%;
  --sidebar-ring: 217 91% 55%;
}

* {
  border-color: hsl(var(--border));
}

/* Direction is controlled by HTML dir attribute via JavaScript */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="ltr"] {
  direction: ltr;
}

/* Font families for different languages */
html.font-arabic body {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

html.font-english body {
  font-family: 'Inter', system-ui, sans-serif;
}

html.font-hindi body {
  font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Large touch targets for less tech-savvy users */
button, 
[role="button"],
input,
select,
textarea {
  min-height: 44px;
}

/* Clear focus states */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* Status colors */
.status-pending {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / 0.2);
}

.status-confirmed {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.2);
}

.status-shipped {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.2);
}

.status-delivered {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.2);
}

.status-cancelled {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.2);
}

/* ═══════════════════════════════════════════════════════════════════
 * Order Status Badges - Professional palette
 * Use: <span class="order-status order-status--{status}"> 
 * ═══════════════════════════════════════════════════════════════════ */
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* مسودة - رمادي */
.order-status--draft {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.dark .order-status--draft {
  background-color: #1e293b;
  color: #cbd5e1;
  border-color: #475569;
}

/* جديد - سماوي/سيان */
.order-status--new {
  background-color: #ecfeff;
  color: #0e7490;
  border-color: #67e8f9;
}
.dark .order-status--new {
  background-color: #083344;
  color: #67e8f9;
  border-color: #0e7490;
}

/* مؤكد - نيلي */
.order-status--confirmed {
  background-color: #eef2ff;
  color: #4338ca;
  border-color: #a5b4fc;
}
.dark .order-status--confirmed {
  background-color: #1e1b4b;
  color: #a5b4fc;
  border-color: #4338ca;
}

/* تم السداد - زمردي */
.order-status--paid {
  background-color: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}
.dark .order-status--paid {
  background-color: #022c22;
  color: #6ee7b7;
  border-color: #047857;
}

/* قيد التنفيذ - أزرق */
.order-status--processing {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.dark .order-status--processing {
  background-color: #172554;
  color: #93c5fd;
  border-color: #1d4ed8;
}

/* تم الشحن - بنفسجي */
.order-status--shipped {
  background-color: #faf5ff;
  color: #6b21a8;
  border-color: #d8b4fe;
}
.dark .order-status--shipped {
  background-color: #2e1065;
  color: #d8b4fe;
  border-color: #6b21a8;
}

/* تم التسليم / مكتمل - أخضر */
.order-status--delivered,
.order-status--completed {
  background-color: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
}
.dark .order-status--delivered,
.dark .order-status--completed {
  background-color: #052e16;
  color: #86efac;
  border-color: #15803d;
}

/* ملغي / مرفوض - أحمر */
.order-status--cancelled,
.order-status--rejected {
  background-color: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.dark .order-status--cancelled,
.dark .order-status--rejected {
  background-color: #450a0a;
  color: #fca5a5;
  border-color: #b91c1c;
}

/* مسترد - كهرماني */
.order-status--refunded {
  background-color: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}
.dark .order-status--refunded {
  background-color: #451a03;
  color: #fcd34d;
  border-color: #b45309;
}

/* Stock colors */
.stock-available {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
}

.stock-low {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
}

.stock-out {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

.stock-negative {
  background-color: hsl(var(--destructive) / 0.15);
  color: hsl(var(--destructive));
}

/* Animation utilities */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

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

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

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

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* Utility classes for HSL colors */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-destructive\/10 { background-color: hsl(var(--destructive) / 0.1); }
.bg-success { background-color: hsl(var(--success)); }
.bg-warning { background-color: hsl(var(--warning)); }
.bg-warning\/5 { background-color: hsl(var(--warning) / 0.05); }
.bg-warning\/10 { background-color: hsl(var(--warning) / 0.1); }

.text-foreground { color: hsl(var(--foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.text-success { color: hsl(var(--success)); }
.text-warning { color: hsl(var(--warning)); }

/* Hover variants — معرّفة يدوياً حتى يعمل الـ hover بدون الاعتماد على Tailwind Play CDN
   (كل أصناف hover كانت تأتي من الـ CDN فقط؛ عند عدم تحميله تتعطّل تأثيرات المرور) */
.hover\:bg-muted:hover { background-color: hsl(var(--muted)); }
.hover\:bg-accent:hover { background-color: hsl(var(--accent)); }
.hover\:bg-primary:hover { background-color: hsl(var(--primary)); }
.hover\:bg-primary\/10:hover { background-color: hsl(var(--primary) / 0.1); }
.hover\:bg-destructive:hover { background-color: hsl(var(--destructive)); }
.hover\:bg-destructive\/10:hover { background-color: hsl(var(--destructive) / 0.1); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }
.hover\:text-accent-foreground:hover { color: hsl(var(--accent-foreground)); }
.hover\:text-primary:hover { color: hsl(var(--primary)); }
.hover\:text-destructive:hover { color: hsl(var(--destructive)); }
.hover\:opacity-70:hover { opacity: 0.7; }

.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2); }
.border-destructive { border-color: hsl(var(--destructive)); }
.border-destructive\/20 { border-color: hsl(var(--destructive) / 0.2); }
.border-warning { border-color: hsl(var(--warning)); }
.border-warning\/20 { border-color: hsl(var(--warning) / 0.2); }
.border-warning\/50 { border-color: hsl(var(--warning) / 0.5); }
.border-success { border-color: hsl(var(--success)); }
.border-success\/20 { border-color: hsl(var(--success) / 0.2); }

.text-success-foreground { color: hsl(var(--success-foreground)); }

/* Ring utilities */
.ring-ring { --tw-ring-color: hsl(var(--ring)); }
.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }

/* ========================================
   COMPONENT CLASSES - Reusable Patterns
   ======================================== */

/* Card Component Styles */
.card-base {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.card-interactive {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.card-interactive:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border-color: hsl(var(--ring));
}

/* Input Component Styles */
.input-base {
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-base:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input-base:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Component Styles */
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

.btn-outline {
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  color: hsl(var(--foreground));
}

.btn-outline:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.btn-ghost {
  background-color: transparent;
  color: hsl(var(--foreground));
}

.btn-ghost:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.btn-destructive:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

/* Badge Component Styles */
.badge-base {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  transition: background-color 0.2s;
}

/* Dropdown/Popover Styles */
.popover-content {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Table Component Styles */
.table-header {
  background-color: hsl(var(--muted));
}

.table-row {
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: hsl(var(--muted) / 0.5);
}

/* Success/Warning/Error States */
.state-success {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.2);
}

.state-warning {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / 0.2);
}

.state-destructive {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.2);
}

/* Loading States */
.skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted) / 0.5) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Purple variant for shipped status */
.bg-purple-100 { background-color: rgb(243 232 255); }
.dark .dark\:bg-purple-900\/30 { background-color: rgb(88 28 135 / 0.3); }
.text-purple-700 { color: rgb(126 34 206); }
.dark .dark\:text-purple-400 { color: rgb(192 132 252); }

/* Amber/Warning semantic variant classes for dark mode support */
.bg-warning-soft {
  background-color: hsl(var(--warning) / 0.1);
}
.dark .bg-warning-soft {
  background-color: hsl(var(--warning) / 0.15);
}
.border-warning-soft {
  border-color: hsl(var(--warning) / 0.3);
}
.text-warning-emphasis {
  color: hsl(var(--warning));
}

/* Success semantic variant classes for dark mode support */
.bg-success-soft {
  background-color: hsl(var(--success) / 0.1);
}
.dark .bg-success-soft {
  background-color: hsl(var(--success) / 0.15);
}
.border-success-soft {
  border-color: hsl(var(--success) / 0.3);
}
.text-success-emphasis {
  color: hsl(var(--success));
}

/* Destructive/Error semantic variant classes for dark mode support */
.bg-destructive-soft {
  background-color: hsl(var(--destructive) / 0.1);
}
.dark .bg-destructive-soft {
  background-color: hsl(var(--destructive) / 0.15);
}
.border-destructive-soft {
  border-color: hsl(var(--destructive) / 0.3);
}
.text-destructive-emphasis {
  color: hsl(var(--destructive));
}

/* Primary semantic variant classes */
.bg-primary-soft {
  background-color: hsl(var(--primary) / 0.1);
}
.dark .bg-primary-soft {
  background-color: hsl(var(--primary) / 0.15);
}
.border-primary-soft {
  border-color: hsl(var(--primary) / 0.3);
}

/* Background utilities for summary cards */
.bg-success\/10 { background-color: hsl(var(--success) / 0.1); }
.bg-success\/20 { background-color: hsl(var(--success) / 0.2); }
.bg-warning\/20 { background-color: hsl(var(--warning) / 0.2); }
.bg-destructive\/20 { background-color: hsl(var(--destructive) / 0.2); }

/* ═══════════════════════════════════════════════════════════════════
   طبقات النوافذ وخلفياتها المعتِمة — معرّفة يدوياً لا من Tailwind Play CDN
   ═══════════════════════════════════════════════════════════════════
   نفس علّة أصناف hover أعلاه: الـ CDN محرّك JIT يولّد الصنف عند أول ظهوره
   في الصفحة. وأصناف التعتيم لا تُستعمل إلا داخل النوافذ نفسها، فأوّل مرة
   تُفتح فيها نافذة يظهر الغلاف بلا تعتيم ولا ترتيب طبقات — يرى المستخدم
   الصفحة كاملة الإضاءة وحولها ظلّ النافذة فقط («الشادو مقصوص»).
   تعريفها هنا يجعل التعتيم جاهزاً في أول إطار ولا يعتمد على شبكة ولا توقيت. */
.bg-black\/5   { background-color: rgb(0 0 0 / 0.05); }
.bg-black\/40  { background-color: rgb(0 0 0 / 0.40); }
.bg-black\/50  { background-color: rgb(0 0 0 / 0.50); }
.bg-black\/75  { background-color: rgb(0 0 0 / 0.75); }
.bg-black\/90  { background-color: rgb(0 0 0 / 0.90); }

.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.z-50            { z-index: 50; }
.z-\[100\]       { z-index: 100; }
.z-\[200\]       { z-index: 200; }
.z-\[9999\]      { z-index: 9999; }
.z-\[100000\]    { z-index: 100000; }
.z-\[100001\]    { z-index: 100001; }