@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Medical/Professional Color Palette from Design Reference */
  --background: hsl(210, 40%, 96%);
  --foreground: hsl(210, 40%, 8%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(210, 40%, 8%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(210, 40%, 8%);
  
  /* Medical Primary - Professional Blue from design */
  --primary: hsl(213, 94%, 68%);
  --primary-foreground: hsl(0, 0%, 100%);
  
  /* Medical Secondary - Clean Gray */
  --secondary: hsl(210, 40%, 94%);
  --secondary-foreground: hsl(210, 40%, 8%);
  
  /* Muted backgrounds for cards and sections */
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215, 16%, 47%);
  
  /* Accent for highlights and active states */
  --accent: hsl(210, 40%, 94%);
  --accent-foreground: hsl(210, 40%, 8%);
  
  /* Medical Emergency Red from design */
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(0, 0%, 100%);
  
  /* Borders and inputs from design */
  --border: hsl(214, 32%, 91%);
  --input: hsl(214, 32%, 91%);
  --ring: hsl(213, 94%, 68%);
  
  /* Chart colors for medical data visualization */
  --chart-1: hsl(12, 76%, 61%);
  --chart-2: hsl(173, 58%, 39%);
  --chart-3: hsl(197, 37%, 24%);
  --chart-4: hsl(43, 74%, 66%);
  --chart-5: hsl(27, 87%, 67%);
  
  /* Sidebar for medical dashboards */
  --sidebar-background: hsl(0, 0%, 100%);
  --sidebar-foreground: hsl(210, 40%, 8%);
  --sidebar-primary: hsl(213, 94%, 68%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(210, 40%, 94%);
  --sidebar-accent-foreground: hsl(213, 94%, 68%);
  --sidebar-border: hsl(214, 32%, 91%);
  --sidebar-ring: hsl(213, 94%, 68%);
  
  /* Typography - Inter font from design */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular;
  
  /* Border radius from design */
  --radius: 8px;
  
  /* Medical-grade shadows for depth */
  --shadow-2xs: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00), 0px 1px 2px -1px hsl(213, 94%, 68%, 0.00);
  --shadow: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00), 0px 1px 2px -1px hsl(213, 94%, 68%, 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00), 0px 2px 4px -1px hsl(213, 94%, 68%, 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00), 0px 4px 6px -1px hsl(213, 94%, 68%, 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00), 0px 8px 10px -1px hsl(213, 94%, 68%, 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(213, 94%, 68%, 0.00);
  
  --spacing: 0.25rem;
}

.dark {
  /* Dark theme for medical interfaces */
  --background: hsl(0, 0%, 0%);
  --foreground: hsl(200, 6.6667%, 91.1765%);
  --card: hsl(228, 9.8039%, 10%);
  --card-foreground: hsl(0, 0%, 85.0980%);
  --popover: hsl(0, 0%, 0%);
  --popover-foreground: hsl(200, 6.6667%, 91.1765%);
  
  /* Dark theme primary - Medical Blue */
  --primary: hsl(203.7736, 87.6033%, 52.5490%);
  --primary-foreground: hsl(0, 0%, 100%);
  
  --secondary: hsl(195, 15.3846%, 94.9020%);
  --secondary-foreground: hsl(210, 25%, 7.8431%);
  
  --muted: hsl(0, 0%, 9.4118%);
  --muted-foreground: hsl(210, 3.3898%, 46.2745%);
  
  --accent: hsl(205.7143, 70%, 7.8431%);
  --accent-foreground: hsl(203.7736, 87.6033%, 52.5490%);
  
  --destructive: hsl(356.3033, 90.5579%, 54.3137%);
  --destructive-foreground: hsl(0, 0%, 100%);
  
  --border: hsl(210, 5.2632%, 14.9020%);
  --input: hsl(207.6923, 27.6596%, 18.4314%);
  --ring: hsl(202.8169, 89.1213%, 53.1373%);
  
  --sidebar-background: hsl(228, 9.8039%, 10%);
  --sidebar-foreground: hsl(0, 0%, 85.0980%);
  --sidebar-primary: hsl(202.8169, 89.1213%, 53.1373%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(205.7143, 70%, 7.8431%);
  --sidebar-accent-foreground: hsl(203.7736, 87.6033%, 52.5490%);
  --sidebar-border: hsl(205.7143, 15.7895%, 26.0784%);
  --sidebar-ring: hsl(202.8169, 89.1213%, 53.1373%);
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold text-foreground;
  }
}

@layer components {
  /* Medical Emergency SOS Button - matching design reference */
  .btn-sos {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    transform: translateY(0);
    transition: all 0.2s ease;
    @apply text-white font-bold rounded-lg px-6 py-3;
  }
  
  .btn-sos:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
  }

  /* Medical Status Badges - from design reference */
  .status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-weight: 600;
    @apply inline-flex items-center gap-1;
  }

  /* Medical Professional Wallet Cards - matching design gradient */
  .wallet-card {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    @apply shadow-lg;
  }

  /* Medical Map Container - from design reference */
  .map-container {
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
    @apply bg-muted;
  }

  /* Navigation styling from design reference */
  .nav-link {
    color: var(--muted-foreground);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
    @apply flex items-center gap-2 font-medium;
  }
  
  .nav-link:hover, .nav-link.active {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  /* Medical Timeline for Order Progress - from design reference */
  .timeline {
    position: relative;
    padding-left: 2rem;
  }
  
  .timeline::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 2rem;
  }
  
  .timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .timeline-content {
    margin-left: 1rem;
  }
  
  .timeline-item.completed .timeline-marker {
    background: var(--primary);
  }
  
  .timeline-item.active .timeline-marker {
    background: hsl(45, 90%, 60%);
    animation: pulse 2s infinite;
  }
  
  .timeline-item.pending .timeline-marker {
    background: var(--muted);
  }

  /* Medical Form Enhancements */
  .medical-form-group {
    @apply space-y-2;
  }
  
  .medical-form-label {
    @apply flex items-center gap-2 text-sm font-medium text-foreground;
  }
  
  .medical-form-input {
    @apply w-full px-3 py-2 border border-input rounded-md shadow-sm;
    @apply focus:ring-2 focus:ring-ring focus:border-transparent;
    @apply transition-colors duration-200;
  }

  /* Medical Emergency Alerts */
  .medical-alert {
    @apply flex items-start gap-3 p-4 rounded-lg border;
  }
  
  .medical-alert.emergency {
    @apply bg-red-50 border-red-200 text-red-800;
  }
  
  .medical-alert.warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }
  
  .medical-alert.success {
    @apply bg-green-50 border-green-200 text-green-800;
  }
  
  .medical-alert.info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }

  /* Sidebar styling from design reference */
  .sidebar {
    background: var(--card);
    border-right: 1px solid var(--border);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    z-index: 1000;
  }
  
  .main-content {
    margin-left: 250px;
    padding: 2rem;
  }
}

/* Animation keyframes from design reference */
@keyframes pulse {
  0%, 100% { 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 0 0 rgba(255, 193, 7, 0.7); 
  }
  70% { 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 0 10px rgba(255, 193, 7, 0); 
  }
  100% { 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 0 0 rgba(255, 193, 7, 0); 
  }
}

/* Leaflet Map Overrides for Medical Theme */
.leaflet-container {
  font-family: var(--font-sans);
  border-radius: 12px;
}

.leaflet-popup-content-wrapper {
  @apply rounded-lg border border-border shadow-lg;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

.leaflet-popup-tip {
  background: hsl(var(--card));
}

/* Custom Map Markers for Medical Context */
.custom-div-icon {
  background: transparent !important;
  border: none !important;
}

.pharmacy-marker {
  @apply bg-red-500 border-2 border-white rounded-full shadow-lg;
}

.courier-marker {
  @apply bg-yellow-500 border-2 border-white rounded-full shadow-lg animate-pulse;
}

.client-marker {
  @apply bg-green-500 border-2 border-white rounded-full shadow-lg;
}

/* Mobile responsive design from reference */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar.show {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
    padding: 1rem;
  }

  .mobile-medical-nav {
    @apply fixed inset-0 z-50 bg-black bg-opacity-50;
  }
  
  .mobile-medical-sidebar {
    @apply fixed left-0 top-0 h-full w-64 shadow-xl transform transition-transform duration-300;
    background: var(--sidebar-background);
  }
  
  .mobile-medical-sidebar.closed {
    @apply -translate-x-full;
  }
}

/* Medical Print Styles */
@media print {
  .medical-no-print {
    @apply hidden;
  }
  
  .medical-print-only {
    @apply block;
  }
  
  .medical-card {
    @apply shadow-none border border-gray-300;
  }
}

/* Additional utility classes for the medical theme */
.medical-gradient-primary {
  background: linear-gradient(135deg, hsl(213, 94%, 68%) 0%, hsl(213, 94%, 58%) 100%);
}

.medical-gradient-emergency {
  background: linear-gradient(135deg, hsl(0, 84%, 60%) 0%, hsl(0, 84%, 50%) 100%);
}

.medical-gradient-success {
  background: linear-gradient(135deg, hsl(120, 70%, 50%) 0%, hsl(120, 70%, 40%) 100%);
}

.medical-text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.medical-backdrop-blur {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
}

.dark .medical-backdrop-blur {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Hero section gradient from design reference */
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, hsl(210, 100%, 97%) 0%, hsl(213, 100%, 93%) 100%);
}

/* Card styling consistency */
.medical-card {
  @apply bg-card border border-border rounded-xl shadow-sm;
  @apply hover:shadow-md transition-shadow duration-200;
}

.medical-card-header {
  @apply p-6 border-b border-border;
}

.medical-card-content {
  @apply p-6;
}

.medical-card-title {
  @apply text-lg font-semibold text-card-foreground;
}
