/* ==========================================================================
   Loveform Dashboard Design System
   Mobile-first responsive design for Buggy Transportation Dashboard
   ========================================================================== */

/* CSS Custom Properties (Design System Variables) */
:root {
  /* Typography Scale */
  --lf-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --lf-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Font Sizes - Fluid Typography */
  --lf-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --lf-text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --lf-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --lf-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --lf-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --lf-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --lf-text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem);
  --lf-text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  
  /* Loveform Typography System - Font Weights */
  --lf-font-light: 300;      /* Light weight for subtle text */
  --lf-font-normal: 450;     /* Default reading weight */
  --lf-font-semibold: 600;   /* Strong emphasis weight */
  
  /* Line Heights - Optimized for Reading */
  --lf-leading-tight: 1.2;   /* Headings - compact spacing */
  --lf-leading-medium: 1.4;  /* Sub-headings - balanced */
  --lf-leading-normal: 1.75; /* Body text - optimal reading */
  --lf-leading-relaxed: 1.875;
  
  /* Letter Spacing - Loveform Standards */
  --lf-tracking-tight: -0.025em;  /* Primary headings */
  --lf-tracking-medium: -0.015em; /* Secondary headings */
  --lf-tracking-normal: 0;        /* Body text */
  --lf-tracking-wide: 0.025em;
  
  /* Color Palette */
  --lf-color-primary-50: #fff7ed;
  --lf-color-primary-100: #ffedd5;
  --lf-color-primary-200: #fed7aa;
  --lf-color-primary-300: #fdba74;
  --lf-color-primary-400: #fb923c;
  --lf-color-primary-500: #f97316;
  --lf-color-primary-600: #ea580c;
  --lf-color-primary-700: #c2410c;
  --lf-color-primary-800: #9a3412;
  --lf-color-primary-900: #7c2d12;
  
  --lf-color-secondary-50: #f8fafc;
  --lf-color-secondary-100: #f1f5f9;
  --lf-color-secondary-200: #e2e8f0;
  --lf-color-secondary-300: #cbd5e1;
  --lf-color-secondary-400: #94a3b8;
  --lf-color-secondary-500: #64748b;
  --lf-color-secondary-600: #475569;
  --lf-color-secondary-700: #334155;
  --lf-color-secondary-800: #1e293b;
  --lf-color-secondary-900: #0f172a;
  
  --lf-color-success: #10b981;
  --lf-color-warning: #f59e0b;
  --lf-color-error: #ef4444;
  --lf-color-info: #3b82f6;
  
  /* Spacing Scale */
  --lf-space-1: 0.25rem;
  --lf-space-2: 0.5rem;
  --lf-space-3: 0.75rem;
  --lf-space-4: 1rem;
  --lf-space-5: 1.25rem;
  --lf-space-6: 1.5rem;
  --lf-space-8: 2rem;
  --lf-space-10: 2.5rem;
  --lf-space-12: 3rem;
  --lf-space-16: 4rem;
  --lf-space-20: 5rem;
  --lf-space-24: 6rem;
  
  /* Border Radius */
  --lf-radius-sm: 0.375rem;
  --lf-radius-md: 0.5rem;
  --lf-radius-lg: 0.75rem;
  --lf-radius-xl: 1rem;
  --lf-radius-2xl: 1.5rem;
  
  /* Shadows */
  --lf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --lf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --lf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --lf-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Container Widths */
  --lf-container-sm: 640px;
  --lf-container-md: 768px;
  --lf-container-lg: 1024px;
  --lf-container-xl: 1280px;
  --lf-container-2xl: 1400px;
  
  /* Grid System */
  --lf-grid-cols-1: repeat(1, minmax(0, 1fr));
  --lf-grid-cols-2: repeat(2, minmax(0, 1fr));
  --lf-grid-cols-3: repeat(3, minmax(0, 1fr));
  --lf-grid-cols-4: repeat(4, minmax(0, 1fr));
  --lf-grid-cols-6: repeat(6, minmax(0, 1fr));
  --lf-grid-cols-12: repeat(12, minmax(0, 1fr));
  
  /* Animation Timing Functions */
  --lf-ease-entry: cubic-bezier(0.25, 0.8, 0.25, 1);
  --lf-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
  --lf-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --lf-ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  
  /* Animation Durations */
  --lf-duration-immediate: 150ms;
  --lf-duration-standard: 400ms;
  --lf-duration-content: 600ms;
  --lf-duration-slow: 800ms;
  
  /* Animation Delays */
  --lf-delay-stagger: 0.2s;
  --lf-delay-base: 0s;
  --lf-delay-1: 0.2s;
  --lf-delay-2: 0.4s;
  --lf-delay-3: 0.6s;
  --lf-delay-4: 0.8s;
  --lf-delay-5: 1s;
  --lf-delay-6: 1.2s;
  
  /* Legacy Transitions (kept for compatibility) */
  --lf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --lf-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --lf-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Reset and Base Typography */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--lf-font-family-primary);
  font-weight: var(--lf-font-normal); /* 450 - Loveform default */
  line-height: var(--lf-leading-normal); /* 1.75 - optimal reading */
  letter-spacing: var(--lf-tracking-normal); /* 0 - body text standard */
  color: var(--lf-color-secondary-900);
  background-color: var(--lf-color-secondary-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

/* Dashboard Container */
.lf-dashboard {
  min-height: 100vh;
  padding: var(--lf-space-4);
  background: linear-gradient(135deg, var(--lf-color-secondary-50) 0%, var(--lf-color-primary-50) 100%);
}

/* Responsive Container */
.lf-container {
  width: 100%;
  max-width: var(--lf-container-2xl);
  margin: 0 auto;
  padding: 0 var(--lf-space-4);
}

/* ==========================================================================
   Loveform Typography System - Enhanced Implementation
   ========================================================================== */

/* Primary Headings - 600 weight, -0.025em tracking, 1.2 line height */
.lf-heading-primary {
  font-size: var(--lf-text-3xl);
  font-weight: var(--lf-font-semibold); /* 600 */
  letter-spacing: var(--lf-tracking-tight); /* -0.025em */
  line-height: var(--lf-leading-tight); /* 1.2 */
  color: var(--lf-color-secondary-900);
  margin: 0;
  font-family: var(--lf-font-family-primary);
}

/* Secondary Headings - 450 weight, -0.015em tracking, 1.4 line height */
.lf-heading-secondary {
  font-size: var(--lf-text-xl);
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-medium); /* -0.015em */
  line-height: var(--lf-leading-medium); /* 1.4 */
  color: var(--lf-color-secondary-800);
  margin: 0;
  font-family: var(--lf-font-family-primary);
}

/* Body Text Variants - Optimized for Reading Experience */
.lf-text-secondary {
  color: var(--lf-color-secondary-600);
  font-size: var(--lf-text-base);
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: var(--lf-leading-normal); /* 1.75 */
  font-family: var(--lf-font-family-primary);
}

.lf-text-tertiary {
  color: var(--lf-color-secondary-500);
  font-size: var(--lf-text-sm);
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: var(--lf-leading-normal); /* 1.75 */
  font-family: var(--lf-font-family-primary);
}

/* Accent Text - For emphasis and branding */
.lf-accent-text {
  color: var(--lf-color-primary-600);
  font-weight: var(--lf-font-semibold); /* 600 */
  letter-spacing: var(--lf-tracking-tight); /* -0.025em */
  font-family: var(--lf-font-family-primary);
}

/* Small Text - Captions, labels, etc. */
.lf-text-small {
  font-size: var(--lf-text-sm);
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: 1.5; /* Tighter for small text readability */
  color: var(--lf-color-secondary-600);
  font-family: var(--lf-font-family-primary);
}

/* Light Text - For subtle content */
.lf-text-light {
  font-weight: var(--lf-font-light); /* 300 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: var(--lf-leading-normal); /* 1.75 */
  color: var(--lf-color-secondary-500);
  font-family: var(--lf-font-family-primary);
}

/* Typography Utility Classes */
.lf-font-light { font-weight: var(--lf-font-light); } /* 300 */
.lf-font-normal { font-weight: var(--lf-font-normal); } /* 450 */
.lf-font-semibold { font-weight: var(--lf-font-semibold); } /* 600 */

.lf-tracking-tight { letter-spacing: var(--lf-tracking-tight); } /* -0.025em */
.lf-tracking-medium { letter-spacing: var(--lf-tracking-medium); } /* -0.015em */
.lf-tracking-normal { letter-spacing: var(--lf-tracking-normal); } /* 0 */

.lf-leading-tight { line-height: var(--lf-leading-tight); } /* 1.2 */
.lf-leading-medium { line-height: var(--lf-leading-medium); } /* 1.4 */
.lf-leading-normal { line-height: var(--lf-leading-normal); } /* 1.75 */

/* Enhanced Reading Experience Classes */
.lf-reading-optimized {
  font-weight: var(--lf-font-normal);
  letter-spacing: var(--lf-tracking-normal);
  line-height: var(--lf-leading-normal);
  font-family: var(--lf-font-family-primary);
}

.lf-heading-optimized {
  font-weight: var(--lf-font-semibold);
  letter-spacing: var(--lf-tracking-tight);
  line-height: var(--lf-leading-tight);
  font-family: var(--lf-font-family-primary);
}

.lf-subheading-optimized {
  font-weight: var(--lf-font-normal);
  letter-spacing: var(--lf-tracking-medium);
  line-height: var(--lf-leading-medium);
  font-family: var(--lf-font-family-primary);
}

/* ==========================================================================
   Card System
   ========================================================================== */

/* Base Card - Mobile-Optimized */
.lf-card {
  background: white;
  border-radius: var(--lf-radius-xl);
  box-shadow: var(--lf-shadow-sm);
  border: 1px solid var(--lf-color-secondary-200);
  transition: all var(--lf-transition-normal);
  /* Ensure cards don't overflow on small screens */
  width: 100%;
  overflow-x: hidden;
}

.lf-card--elevated {
  box-shadow: var(--lf-shadow-md);
}

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

/* Card Header */
.lf-card-header {
  padding: var(--lf-space-6);
  border-bottom: 1px solid var(--lf-color-secondary-200);
}

/* ==========================================================================
   Welcome Section
   ========================================================================== */

.lf-welcome-section {
  margin-bottom: var(--lf-space-8);
}

.lf-welcome-header {
  margin-bottom: var(--lf-space-6);
}

.lf-welcome-subtitle {
  margin-top: var(--lf-space-2);
  margin-bottom: 0;
}

/* Status Banner */
.lf-status-banner {
  display: inline-flex;
  align-items: center;
  padding: var(--lf-space-3) var(--lf-space-4);
  background: var(--lf-color-secondary-100);
  border: 1px solid var(--lf-color-secondary-200);
  border-radius: var(--lf-radius-lg);
  transition: all var(--lf-transition-normal);
}

.lf-status-banner.lf-status-active {
  background: var(--lf-color-success)/10%;
  border-color: var(--lf-color-success)/20%;
  color: var(--lf-color-success);
}

.lf-status-banner.lf-status-setup {
  background: var(--lf-color-primary-100);
  border-color: var(--lf-color-primary-200);
  color: var(--lf-color-primary-700);
}

.lf-status-content {
  display: flex;
  align-items: center;
  gap: var(--lf-space-2);
}

.lf-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.lf-status-text {
  font-size: var(--lf-text-sm);
  font-weight: var(--lf-font-normal); /* 450 - less aggressive */
  letter-spacing: var(--lf-tracking-normal); /* 0 - improved readability */
  line-height: 1.5;
  font-family: var(--lf-font-family-primary);
  /* Removed text-transform for better readability */
}

/* ==========================================================================
   Statistics Section
   ========================================================================== */

.lf-stats-section {
  margin-bottom: var(--lf-space-8);
}

/* Stats Grid - Mobile First */
.lf-stats-grid {
  display: grid;
  grid-template-columns: var(--lf-grid-cols-1);
  gap: var(--lf-space-4);
}

/* Stat Cards - Reduced Visual Clutter, Enhanced Typography */
.lf-stat-card {
  display: flex;
  align-items: center;
  gap: var(--lf-space-4);
  padding: var(--lf-space-6);
  background: white;
  border-radius: var(--lf-radius-xl);
  /* Simplified shadows - reduced visual noise */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  border: 1px solid var(--lf-color-secondary-100);
  transition: all var(--lf-transition-normal);
  /* Enhanced for reading focus */
  position: relative;
}

.lf-stat-card:hover {
  transform: translateY(-1px); /* Subtle lift */
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.08);
  border-color: var(--lf-color-secondary-200);
}

/* Stat Card Variants - Minimal, Clean Approach */
.lf-stat-card--primary .lf-stat-icon {
  background: var(--lf-color-primary-100);
  color: var(--lf-color-primary-600);
}

.lf-stat-card--secondary .lf-stat-icon {
  background: var(--lf-color-secondary-100);
  color: var(--lf-color-secondary-600);
}

.lf-stat-card--accent .lf-stat-icon {
  background: var(--lf-color-info)/10%;
  color: var(--lf-color-info);
}

.lf-stat-card--success .lf-stat-icon {
  background: var(--lf-color-success)/10%;
  color: var(--lf-color-success);
}

/* Stat Icon - Touch-Optimized */
.lf-stat-icon {
  flex-shrink: 0;
  width: 48px; /* Increased for better touch targets */
  height: 48px; /* Minimum 44px for accessibility */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lf-radius-md);
  font-size: var(--lf-text-base);
  /* Touch-friendly sizing */
  min-width: 44px;
  min-height: 44px;
}

/* Stat Content - Enhanced Typography */
.lf-stat-content {
  min-width: 0;
  flex: 1;
}

.lf-stat-value {
  font-size: var(--lf-text-2xl);
  font-weight: var(--lf-font-semibold); /* 600 */
  letter-spacing: var(--lf-tracking-tight); /* -0.025em */
  line-height: var(--lf-leading-tight); /* 1.2 */
  color: var(--lf-color-secondary-900);
  margin-bottom: var(--lf-space-2); /* Improved spacing */
  font-family: var(--lf-font-family-primary);
}

.lf-stat-value--text {
  font-size: var(--lf-text-lg);
  font-weight: var(--lf-font-normal); /* 450 */
  color: var(--lf-color-secondary-700);
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: var(--lf-leading-medium); /* 1.4 */
}

.lf-stat-label {
  font-size: var(--lf-text-sm);
  color: var(--lf-color-secondary-500); /* Softer color */
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: 1.5; /* Optimized for small text */
  font-family: var(--lf-font-family-primary);
  margin: 0;
}

/* ==========================================================================
   Actions Section
   ========================================================================== */

.lf-actions-section {
  margin-bottom: var(--lf-space-8);
}

/* Actions Grid - Mobile First */
.lf-actions-grid {
  display: grid;
  grid-template-columns: var(--lf-grid-cols-1);
  gap: var(--lf-space-4);
  padding: var(--lf-space-6);
}

/* Action Buttons - Mobile-First Touch-Optimized Design */
.lf-action-button {
  display: flex;
  align-items: center;
  gap: var(--lf-space-3);
  padding: var(--lf-space-4) var(--lf-space-5);
  background: white;
  border: 1px solid var(--lf-color-secondary-100);
  border-radius: var(--lf-radius-lg);
  text-decoration: none;
  color: var(--lf-color-secondary-800);
  transition: all var(--lf-transition-normal);
  font-weight: var(--lf-font-normal); /* 450 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  /* Touch-friendly sizing */
  min-height: 44px;
  /* Better mobile interaction */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.lf-action-button:hover {
  background: var(--lf-color-secondary-50);
  border-color: var(--lf-color-primary-200);
  color: var(--lf-color-primary-700);
  transform: translateY(-1px); /* Subtle lift instead of slide */
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.06);
  text-decoration: none;
}

.lf-action-button--primary {
  background: var(--lf-color-primary-50);
  border-color: var(--lf-color-primary-200);
  color: var(--lf-color-primary-800);
}

/* Action Icon - Touch-Optimized */
.lf-action-icon {
  flex-shrink: 0;
  width: 44px; /* Touch-friendly minimum size */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lf-color-secondary-100);
  border-radius: var(--lf-radius-sm);
  color: var(--lf-color-secondary-600);
  font-size: var(--lf-text-base);
  transition: all var(--lf-transition-normal);
  /* Ensure minimum touch target */
  min-width: 44px;
  min-height: 44px;
}

.lf-action-button:hover .lf-action-icon {
  background: var(--lf-color-primary-100);
  color: var(--lf-color-primary-600);
  transform: scale(1.02); /* Subtle scale instead of rotation */
}

.lf-action-button--primary .lf-action-icon {
  background: var(--lf-color-primary-200);
  color: var(--lf-color-primary-700);
}

/* Action Content - Enhanced Typography */
.lf-action-content {
  min-width: 0;
  flex: 1;
}

.lf-action-label {
  display: block;
  font-size: var(--lf-text-base);
  font-weight: var(--lf-font-semibold); /* 600 */
  letter-spacing: var(--lf-tracking-tight); /* -0.025em */
  line-height: var(--lf-leading-medium); /* 1.4 */
  color: inherit;
  margin-bottom: var(--lf-space-1);
  font-family: var(--lf-font-family-primary);
}

.lf-action-description {
  display: block;
  font-size: var(--lf-text-sm);
  color: var(--lf-color-secondary-500); /* Softer color */
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: 1.5; /* Optimized for small text */
  font-family: var(--lf-font-family-primary);
  margin: 0;
}

/* ==========================================================================
   Activity Section
   ========================================================================== */

.lf-activity-section {
  margin-bottom: var(--lf-space-8);
}

.lf-activity-content {
  padding: var(--lf-space-6);
}

/* Activity Items - Reduced Visual Clutter */
.lf-activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-3); /* Reduced gap */
  padding: var(--lf-space-3) 0; /* Reduced padding */
  border-bottom: 1px solid var(--lf-color-secondary-100); /* Softer border */
  transition: background-color var(--lf-transition-normal);
}

.lf-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lf-activity-item--empty {
  opacity: 0.7; /* Less transparent for better readability */
}

/* Activity Icons - Touch-Optimized Design */
.lf-activity-icon {
  flex-shrink: 0;
  width: 40px; /* Balanced size for activity context */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lf-radius-sm);
  font-size: var(--lf-text-sm);
  /* Adequate for visual hierarchy but not primary touch targets */
}

.lf-activity-icon--schedule {
  background: var(--lf-color-primary-100);
  color: var(--lf-color-primary-600);
}

.lf-activity-icon--success {
  background: color-mix(in srgb, var(--lf-color-success) 15%, transparent);
  color: var(--lf-color-success);
}

.lf-activity-icon--info {
  background: var(--lf-color-secondary-200);
  color: var(--lf-color-secondary-600);
}

/* Activity Content - Enhanced Typography */
.lf-activity-content-text {
  min-width: 0;
  flex: 1;
}

.lf-activity-title {
  font-size: var(--lf-text-base);
  font-weight: var(--lf-font-semibold); /* 600 */
  letter-spacing: var(--lf-tracking-tight); /* -0.025em */
  line-height: var(--lf-leading-medium); /* 1.4 */
  color: var(--lf-color-secondary-800);
  margin: 0 0 var(--lf-space-2) 0;
  font-family: var(--lf-font-family-primary);
}

.lf-activity-description {
  font-size: var(--lf-text-sm);
  font-weight: var(--lf-font-normal); /* 450 */
  letter-spacing: var(--lf-tracking-normal); /* 0 */
  line-height: var(--lf-leading-normal); /* 1.75 */
  color: var(--lf-color-secondary-500);
  font-family: var(--lf-font-family-primary);
  margin: 0;
}

/* ==========================================================================
   Loveform Animation System - Progressive Revelation
   ========================================================================== */

/* Animation Keyframes */
@keyframes lf-reveal-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lf-reveal-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lf-reveal-left {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lf-reveal-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lf-reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lf-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes lf-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Progressive Revelation Classes */
.lf-reveal {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: var(--lf-duration-standard);
  animation-timing-function: var(--lf-ease-entry);
}

.lf-reveal--immediate {
  animation-duration: var(--lf-duration-immediate);
}

.lf-reveal--slow {
  animation-duration: var(--lf-duration-slow);
}

/* Reveal Directions */
.lf-reveal--up {
  animation-name: lf-reveal-up;
}

.lf-reveal--down {
  animation-name: lf-reveal-down;
}

.lf-reveal--left {
  animation-name: lf-reveal-left;
}

.lf-reveal--right {
  animation-name: lf-reveal-right;
}

.lf-reveal--scale {
  animation-name: lf-reveal-scale;
}

/* Staggered Delays */
.lf-reveal--delay-1 {
  animation-delay: var(--lf-delay-1);
}

.lf-reveal--delay-2 {
  animation-delay: var(--lf-delay-2);
}

.lf-reveal--delay-3 {
  animation-delay: var(--lf-delay-3);
}

.lf-reveal--delay-4 {
  animation-delay: var(--lf-delay-4);
}

.lf-reveal--delay-5 {
  animation-delay: var(--lf-delay-5);
}

.lf-reveal--delay-6 {
  animation-delay: var(--lf-delay-6);
}

/* Auto-stagger for child elements */
.lf-reveal-stagger > * {
  opacity: 0;
  animation: lf-reveal-up var(--lf-duration-standard) var(--lf-ease-entry) both;
}

.lf-reveal-stagger > *:nth-child(1) { animation-delay: calc(var(--lf-delay-stagger) * 0); }
.lf-reveal-stagger > *:nth-child(2) { animation-delay: calc(var(--lf-delay-stagger) * 1); }
.lf-reveal-stagger > *:nth-child(3) { animation-delay: calc(var(--lf-delay-stagger) * 2); }
.lf-reveal-stagger > *:nth-child(4) { animation-delay: calc(var(--lf-delay-stagger) * 3); }
.lf-reveal-stagger > *:nth-child(5) { animation-delay: calc(var(--lf-delay-stagger) * 4); }
.lf-reveal-stagger > *:nth-child(6) { animation-delay: calc(var(--lf-delay-stagger) * 5); }
.lf-reveal-stagger > *:nth-child(7) { animation-delay: calc(var(--lf-delay-stagger) * 6); }
.lf-reveal-stagger > *:nth-child(8) { animation-delay: calc(var(--lf-delay-stagger) * 7); }

/* Loading States */
.lf-loading {
  position: relative;
  overflow: hidden;
}

.lf-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: lf-shimmer 2s infinite;
  pointer-events: none;
}

/* Skeleton Loading */
.lf-skeleton {
  background: linear-gradient(
    90deg,
    var(--lf-color-secondary-200) 25%,
    var(--lf-color-secondary-100) 50%,
    var(--lf-color-secondary-200) 75%
  );
  background-size: 200% 100%;
  animation: lf-shimmer 1.5s infinite;
  border-radius: var(--lf-radius-md);
}

/* Enhanced Micro-interactions */

/* Card Hover Effects */
.lf-card {
  transform: translateY(0);
  transition: 
    transform var(--lf-duration-standard) var(--lf-ease-standard),
    box-shadow var(--lf-duration-standard) var(--lf-ease-standard),
    border-color var(--lf-duration-standard) var(--lf-ease-standard);
}

.lf-card:hover {
  transform: translateY(-4px);
  border-color: var(--lf-color-primary-200);
}

/* Button Press Effect */
.lf-action-button {
  transform: translateX(0) scale(1);
  transition: 
    transform var(--lf-duration-immediate) var(--lf-ease-standard),
    background-color var(--lf-duration-immediate) var(--lf-ease-standard),
    box-shadow var(--lf-duration-immediate) var(--lf-ease-standard);
}

.lf-action-button:active {
  transform: translateX(2px) scale(0.98);
}

/* Focus Ring Animation */
.lf-action-button:focus,
.lf-card:focus-within {
  outline: none;
  position: relative;
}

.lf-action-button:focus::after,
.lf-card:focus-within::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--lf-color-primary-500);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.95);
  animation: lf-focus-ring var(--lf-duration-standard) var(--lf-ease-entry) forwards;
}

@keyframes lf-focus-ring {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Status Indicator Pulse */
.lf-status-indicator {
  position: relative;
}

.lf-status-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transform: translate(-50%, -50%) scale(1);
  animation: lf-pulse 2s infinite;
}

/* Stat Value Count-up Effect */
.lf-stat-value {
  transition: 
    transform var(--lf-duration-immediate) var(--lf-ease-bounce),
    color var(--lf-duration-immediate) var(--lf-ease-standard);
}

.lf-stat-card:hover .lf-stat-value {
  transform: scale(1.05);
  color: var(--lf-color-primary-600);
}

/* Activity Item Hover */
.lf-activity-item {
  transition: 
    background-color var(--lf-duration-immediate) var(--lf-ease-standard),
    transform var(--lf-duration-immediate) var(--lf-ease-standard);
  margin: 0 calc(var(--lf-space-4) * -1);
  padding-left: var(--lf-space-4);
  padding-right: var(--lf-space-4);
}

.lf-activity-item:hover {
  background-color: var(--lf-color-secondary-50);
  transform: translateX(4px);
}

/* Icon Rotation on Hover */
.lf-action-icon,
.lf-stat-icon {
  transition: 
    transform var(--lf-duration-standard) var(--lf-ease-standard),
    background var(--lf-duration-standard) var(--lf-ease-standard);
}

.lf-action-button:hover .lf-action-icon,
.lf-stat-card:hover .lf-stat-icon {
  transform: rotate(5deg) scale(1.1);
}

/* State Transitions */
.lf-state-transition {
  transition: 
    opacity var(--lf-duration-content) var(--lf-ease-standard),
    transform var(--lf-duration-content) var(--lf-ease-standard);
}

.lf-state-enter {
  opacity: 0;
  transform: translateY(10px);
}

.lf-state-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.lf-state-exit {
  opacity: 1;
  transform: translateY(0);
}

.lf-state-exit-active {
  opacity: 0;
  transform: translateY(-10px);
}

/* Error State Animation */
@keyframes lf-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.lf-error-shake {
  animation: lf-shake 0.4s var(--lf-ease-standard);
}

/* Success State Animation */
@keyframes lf-success-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.lf-success-bounce {
  animation: lf-success-bounce 0.6s var(--lf-ease-bounce);
}

/* Scroll-triggered Animations */
.lf-scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity var(--lf-duration-content) var(--lf-ease-entry),
    transform var(--lf-duration-content) var(--lf-ease-entry);
}

.lf-scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Performance Optimizations - Enhanced for Mobile */
.lf-will-animate {
  will-change: transform, opacity;
}

.lf-hardware-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Mobile Performance Optimizations */
@media (max-width: 767px) {
  /* Reduce animation complexity on mobile */
  .lf-reveal,
  .lf-reveal-stagger > * {
    animation-duration: var(--lf-duration-immediate); /* Faster animations */
  }
  
  /* Simplify transformations for better mobile performance */
  .lf-card,
  .lf-stat-card,
  .lf-action-button {
    will-change: auto; /* Let browser optimize */
  }
  
  /* Prevent layout thrashing on touch devices */
  .lf-action-button:active,
  .lf-stat-card:active {
    will-change: transform;
  }
  
  .lf-action-button:not(:active),
  .lf-stat-card:not(:active) {
    will-change: auto;
  }
}

/* Reduce animations on low-end devices */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* Only apply complex animations on capable devices */
  @supports (backdrop-filter: blur(10px)) {
    /* Device likely supports better animations */
    .lf-reveal {
      animation-duration: var(--lf-duration-standard);
    }
  }
}

/* Loading States for Dashboard Components */
.lf-loading-section,
.lf-error-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

.lf-loading-message,
.lf-error-message {
  opacity: 0;
  animation: lf-reveal-up var(--lf-duration-standard) var(--lf-ease-entry) both;
}

.lf-loading-message i,
.lf-error-message i {
  font-size: var(--lf-text-3xl);
  margin-bottom: var(--lf-space-4);
  display: block;
}

.lf-loading-message i {
  color: var(--lf-color-primary-500);
  animation: lf-spin 1s linear infinite;
}

.lf-error-message i {
  color: var(--lf-color-error);
}

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

/* Loading Placeholders */
.lf-loading-placeholder,
.lf-error-placeholder {
  display: inline-block;
  min-width: 3ch;
}

.lf-loading-placeholder {
  animation: lf-pulse 1.5s ease-in-out infinite;
  color: var(--lf-color-secondary-400);
}

.lf-error-placeholder {
  color: var(--lf-color-secondary-400);
}

/* Status Banner Animations */
.lf-status-loading .lf-status-indicator {
  animation: lf-pulse 2s infinite;
}

.lf-status-error {
  background: color-mix(in srgb, var(--lf-color-error) 10%, transparent);
  border-color: color-mix(in srgb, var(--lf-color-error) 20%, transparent);
  color: var(--lf-color-error);
}

.lf-status-error .lf-status-indicator {
  animation: lf-shake 0.5s ease-in-out;
}

/* Smooth Content Transitions */
[dmx-show] {
  transition: opacity var(--lf-duration-standard) var(--lf-ease-standard);
}

[dmx-show="false"] {
  opacity: 0 !important;
  pointer-events: none;
}

[dmx-show="true"] {
  opacity: 1;
}

/* Activity Feed Animation */
.lf-activity-item {
  opacity: 0;
  animation: lf-reveal-left var(--lf-duration-standard) var(--lf-ease-entry) both;
}

.lf-activity-item:nth-child(1) { animation-delay: calc(var(--lf-delay-stagger) * 0); }
.lf-activity-item:nth-child(2) { animation-delay: calc(var(--lf-delay-stagger) * 1); }
.lf-activity-item:nth-child(3) { animation-delay: calc(var(--lf-delay-stagger) * 2); }
.lf-activity-item:nth-child(4) { animation-delay: calc(var(--lf-delay-stagger) * 3); }
.lf-activity-item:nth-child(5) { animation-delay: calc(var(--lf-delay-stagger) * 4); }

/* ==========================================================================
   Mobile-Specific Optimizations
   ========================================================================== */

/* Extra Small Screens (320px and up) - Critical Mobile Base */
@media (min-width: 320px) and (max-width: 479px) {
  .lf-dashboard {
    padding: var(--lf-space-3) var(--lf-space-2);
  }
  
  .lf-container {
    padding: 0 var(--lf-space-2);
  }
  
  /* Single column layout for very small screens */
  .lf-stats-grid,
  .lf-actions-grid {
    grid-template-columns: 1fr;
    gap: var(--lf-space-3);
  }
  
  /* Compact stat cards for tiny screens */
  .lf-stat-card {
    padding: var(--lf-space-4);
    gap: var(--lf-space-3);
  }
  
  /* Smaller but still touch-friendly action buttons */
  .lf-action-button {
    padding: var(--lf-space-4);
    min-height: 48px;
    gap: var(--lf-space-2);
  }
  
  /* Compact typography */
  .lf-heading-primary {
    font-size: var(--lf-text-2xl);
    line-height: 1.25;
  }
  
  .lf-stat-value {
    font-size: var(--lf-text-lg);
  }
  
  /* Reduce visual complexity on tiny screens */
  .lf-card {
    border-radius: var(--lf-radius-lg);
    box-shadow: var(--lf-shadow-sm);
  }
}

/* Enhanced Mobile Touch Targets */
@media (max-width: 767px) {
  /* Increase touch targets on mobile */
  .lf-action-button {
    min-height: 52px;
    padding: var(--lf-space-5) var(--lf-space-4);
    margin-bottom: var(--lf-space-2); /* Prevent accidental touches */
  }
  
  /* Larger stat cards on mobile for better readability */
  .lf-stat-card {
    padding: var(--lf-space-6) var(--lf-space-5);
    margin-bottom: var(--lf-space-3); /* Better spacing */
  }
  
  /* Optimize activity items for mobile scrolling */
  .lf-activity-item {
    padding: var(--lf-space-4) var(--lf-space-3);
    margin: 0 calc(var(--lf-space-3) * -1);
    padding-left: var(--lf-space-3);
    padding-right: var(--lf-space-3);
  }
  
  /* Better mobile typography scaling */
  .lf-stat-value {
    font-size: var(--lf-text-xl); /* Slightly smaller on mobile */
  }
  
  /* Improve card hover states for touch */
  .lf-card:hover,
  .lf-stat-card:hover,
  .lf-action-button:hover {
    transform: none; /* Remove transforms that don't work on touch */
  }
  
  /* Add active states for touch feedback */
  .lf-action-button:active {
    background: var(--lf-color-primary-50);
    transform: scale(0.98);
  }
  
  .lf-stat-card:active {
    background: var(--lf-color-secondary-25);
  }
}

/* Landscape Mobile Optimization */
@media (max-width: 767px) and (orientation: landscape) {
  .lf-dashboard {
    padding: var(--lf-space-3);
  }
  
  .lf-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lf-space-3);
  }
  
  .lf-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lf-space-3);
  }
}

/* ==========================================================================
   Responsive Design - Mobile First Approach
   ========================================================================== */

/* Small screens (480px and up) - Enhanced Mobile Layout */
@media (min-width: 30rem) {
  .lf-stats-grid {
    grid-template-columns: var(--lf-grid-cols-2);
    gap: var(--lf-space-5); /* Better spacing on larger mobile */
  }
  
  .lf-actions-grid {
    grid-template-columns: var(--lf-grid-cols-2);
    gap: var(--lf-space-5);
  }
  
  /* Enhanced touch targets on small tablets */
  .lf-action-button {
    padding: var(--lf-space-5) var(--lf-space-6);
    min-height: 48px; /* Larger touch targets */
  }
  
  .lf-stat-card {
    padding: var(--lf-space-8); /* More breathing room */
  }
}

/* Medium screens (768px and up) */
@media (min-width: 48rem) {
  .lf-dashboard {
    padding: var(--lf-space-6);
  }
  
  .lf-container {
    padding: 0 var(--lf-space-6);
  }
  
  .lf-stats-grid {
    grid-template-columns: var(--lf-grid-cols-4);
    gap: var(--lf-space-6);
  }
  
  .lf-actions-grid {
    grid-template-columns: var(--lf-grid-cols-3);
    gap: var(--lf-space-6);
  }
  
  .lf-welcome-section {
    margin-bottom: var(--lf-space-10);
  }
  
  .lf-stats-section {
    margin-bottom: var(--lf-space-10);
  }
  
  .lf-actions-section {
    margin-bottom: var(--lf-space-10);
  }
}

/* Large screens (1024px and up) */
@media (min-width: 64rem) {
  .lf-dashboard {
    padding: var(--lf-space-8);
  }
  
  .lf-container {
    padding: 0 var(--lf-space-8);
  }
  
  .lf-stats-grid {
    gap: var(--lf-space-8);
  }
  
  .lf-actions-grid {
    gap: var(--lf-space-8);
  }
}

/* Extra large screens (1280px and up) */
@media (min-width: 80rem) {
  .lf-dashboard {
    padding: var(--lf-space-10);
  }
  
  .lf-welcome-section {
    margin-bottom: var(--lf-space-12);
  }
  
  .lf-stats-section {
    margin-bottom: var(--lf-space-12);
  }
  
  .lf-actions-section {
    margin-bottom: var(--lf-space-12);
  }
}

/* ==========================================================================
   Accessibility & Motion
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    animation-delay: 0s !important;
  }
  
  /* Preserve essential feedback */
  .lf-reveal,
  .lf-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Remove pulse animations */
  .lf-status-indicator::after {
    animation: none !important;
  }
}

/* Focus states for keyboard navigation */
.lf-action-button:focus {
  outline: 2px solid var(--lf-color-primary-500);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .lf-card {
    border-width: 2px;
  }
  
  .lf-action-button {
    border-width: 2px;
  }
  
  .lf-status-banner {
    border-width: 2px;
  }
  
  /* Enhanced typography contrast */
  .lf-heading-primary,
  .lf-heading-secondary {
    font-weight: var(--lf-font-semibold);
    color: var(--lf-color-secondary-900);
  }
  
  .lf-text-secondary,
  .lf-text-tertiary {
    color: var(--lf-color-secondary-700);
  }
}

/* ==========================================================================
   Mobile Utility Classes
   ========================================================================== */

/* Mobile-only visibility */
.lf-show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .lf-show-mobile {
    display: block;
  }
  
  .lf-hide-mobile {
    display: none !important;
  }
}

/* Touch-specific optimizations */
@media (pointer: coarse) {
  /* Increase all touch targets on touch devices */
  .lf-action-button,
  .lf-stat-card,
  [role="button"] {
    min-height: 44px;
  }
  
  /* Improve thumb navigation zones */
  .lf-actions-grid {
    padding-bottom: var(--lf-space-8); /* Safe area for thumb reach */
  }
}

/* Safe area optimizations for mobile browsers */
@supports (padding: env(safe-area-inset-bottom)) {
  .lf-dashboard {
    padding-left: max(var(--lf-space-4), env(safe-area-inset-left));
    padding-right: max(var(--lf-space-4), env(safe-area-inset-right));
    padding-bottom: max(var(--lf-space-4), env(safe-area-inset-bottom));
  }
}

/* High DPI mobile screens */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  .lf-stat-icon,
  .lf-action-icon {
    /* Ensure crisp rendering on high DPI screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Print styles */
@media print {
  .lf-dashboard {
    background: white;
    padding: 0;
  }
  
  .lf-card {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .lf-action-button {
    display: none;
  }
}