@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);
}

/* 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-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)); }

.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); }