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

:root {
  /* Modern neutral palette */
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222, 15%, 11%);
  --muted: hsl(220, 13%, 96%);
  --muted-foreground: hsl(220, 9%, 46%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222, 15%, 11%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222, 15%, 11%);
  --border: hsl(220, 13%, 91%);
  --input: hsl(220, 13%, 91%);
  
  /* Modern dark theme palette */
  --primary: hsl(220, 13%, 18%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(220, 13%, 95%);
  --secondary-foreground: hsl(220, 13%, 18%);
  --accent: hsl(220, 13%, 95%);
  --accent-foreground: hsl(220, 13%, 18%);
  
  /* Status colors */
  --destructive: hsl(0, 72%, 51%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --success: hsl(142, 69%, 45%);
  --success-foreground: hsl(0, 0%, 98%);
  --warning: hsl(38, 92%, 50%);
  --warning-foreground: hsl(0, 0%, 98%);
  --info: hsl(210, 100%, 56%);
  --info-foreground: hsl(0, 0%, 98%);
  
  /* Interactive elements */
  --ring: hsl(220, 13%, 18%);
  --radius: 0.375rem;
  
  /* Gradient colors */
  --gradient-from: hsl(232, 97%, 59%);
  --gradient-to: hsl(262, 100%, 59%);
  --gradient-accent: hsl(282, 100%, 59%);
}

.dark {
  /* Dark neutral palette */
  --background: hsl(222, 20%, 4%);
  --foreground: hsl(210, 40%, 95%);
  --muted: hsl(222, 15%, 8%);
  --muted-foreground: hsl(215, 20%, 65%);
  --popover: hsl(222, 15%, 6%);
  --popover-foreground: hsl(210, 40%, 95%);
  --card: hsl(222, 15%, 6%);
  --card-foreground: hsl(210, 40%, 95%);
  --border: hsl(215, 28%, 17%);
  --input: hsl(215, 28%, 17%);
  
  /* Dark mode palette */
  --primary: hsl(0, 0%, 98%);
  --primary-foreground: hsl(222, 20%, 4%);
  --secondary: hsl(215, 28%, 17%);
  --secondary-foreground: hsl(210, 40%, 95%);
  --accent: hsl(215, 28%, 17%);
  --accent-foreground: hsl(210, 40%, 95%);
  
  /* Dark status colors */
  --destructive: hsl(0, 85%, 65%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --success: hsl(142, 71%, 55%);
  --success-foreground: hsl(0, 0%, 98%);
  --warning: hsl(38, 92%, 60%);
  --warning-foreground: hsl(0, 0%, 98%);
  --info: hsl(210, 100%, 65%);
  --info-foreground: hsl(0, 0%, 98%);
  
  --ring: hsl(0, 0%, 98%);
}

/* Modern Design Utilities */
.modern-card {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.modern-button {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.modern-button:hover {
  background: hsl(var(--muted));
  border-color: hsl(var(--primary));
}

.modern-button-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary));
}

.modern-button-primary:hover {
  background: hsl(var(--primary) / 0.9);
}

.modern-input {
  border: 2px solid hsl(220, 13%, 75%);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border-radius: 0;
}

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

.modern-input:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.modern-section {
  border: 2px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.modern-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid hsl(var(--border));
  font-weight: 600;
  font-size: 16px;
}

.modern-icon-container {
  width: 40px;
  height: 40px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid hsl(var(--primary));
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
}

/* Section-specific styles */
.modern-section-vendor {
  border-left: 4px solid hsl(262, 83%, 58%);
  background: hsl(262, 83%, 98%);
}

.modern-section-product {
  border-left: 4px solid hsl(210, 100%, 50%);
  background: hsl(210, 100%, 98%);
}

.modern-section-customer {
  border-left: 4px solid hsl(142, 69%, 45%);
  background: hsl(142, 69%, 98%);
}

.modern-section-identity {
  border-left: 4px solid hsl(38, 92%, 50%);
  background: hsl(38, 92%, 98%);
}

.modern-select-trigger {
  border: 2px solid hsl(220, 13%, 75%);
  background: hsl(var(--background));
  padding: 10px 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border-radius: 0;
}

.modern-select-trigger:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.modern-select-trigger:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* Modern filter card styles */
.modern-filter-card {
  border: 2px solid hsl(220, 13%, 85%);
  background: hsl(220, 13%, 96%);
  padding: 16px;
  border-radius: 0;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

/* Enhanced keyframes for mobile animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mobileModalEnter {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileModalExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

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

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    letter-spacing: -0.01em;
    /* Optimize for mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
  }
  
  /* Enhanced mobile viewport handling */
  html {
    /* Prevent zoom on double tap */
    touch-action: manipulation;
    /* Smooth scrolling */
    scroll-behavior: smooth;
  }
  
  /* Disable text selection for UI elements */
  .select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Improve touch interactions */
  button, 
  [role="button"], 
  input[type="submit"], 
  input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Focus styles for accessibility */
  *:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
  
  /* Smooth scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: hsl(var(--muted));
  }
  
  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
  }
}

@layer components {
  /* Mobile-first responsive utilities */
  .mobile-container {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .mobile-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6;
  }
  
  .mobile-stack {
    @apply flex flex-col space-y-4 sm:space-y-6;
  }
  
  .mobile-row {
    @apply flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center;
  }
  
  /* Responsive spacing */
  .mobile-spacing {
    @apply space-y-4 sm:space-y-6 lg:space-y-8;
  }
  
  .mobile-padding {
    @apply p-4 sm:p-6 lg:p-8;
  }
  
  .mobile-margin {
    @apply m-4 sm:m-6 lg:m-8;
  }
  
  /* Touch-friendly interactions */
  .touch-target {
    @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
  }
  
  .touch-button {
    @apply touch-target px-4 py-2 sm:px-6 sm:py-3 rounded-lg font-medium transition-all duration-200 ease-out;
    -webkit-tap-highlight-color: transparent;
  }
  
  .touch-input {
    @apply h-12 sm:h-10 px-4 text-base sm:text-sm transition-all duration-200 ease-out;
    -webkit-appearance: none;
  }
  
  /* Modern animations with mobile optimization */
  .slide-in-right {
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .slide-in-left {
    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .slide-in-up {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .slide-in-down {
    animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .fade-in {
    animation: fadeIn 0.3s ease-out;
  }
  
  .fade-in-up {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .smooth-transform {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-smooth {
    transition: all 0.2s ease-out;
  }
  
  /* Mobile-optimized states */
  .mobile-hover {
    @apply transition-all duration-200 ease-out;
  }
  
  .mobile-hover:hover {
    @apply transform scale-[1.02];
  }
  
  .mobile-active {
    @apply transition-all duration-100 ease-out;
  }
  
  .mobile-active:active {
    @apply transform scale-[0.98];
  }
  
  /* Card animations */
  .card-appear {
    animation: cardAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .card-hover {
    @apply transition-all duration-300 ease-out hover:shadow-lg hover:scale-[1.01];
  }

  /* Modern gradients */
  .gradient-bg {
    background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
  }
  
  .gradient-text {
    background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Mobile navigation */
  .mobile-nav {
    @apply fixed bottom-0 left-0 right-0 bg-white bg-opacity-95 backdrop-blur-sm border-t border-border z-50;
    @apply flex items-center justify-around py-2 sm:hidden;
  }
  
  .mobile-nav-item {
    @apply flex flex-col items-center space-y-1 px-3 py-2 rounded-lg transition-all duration-200;
  }
  
  .mobile-nav-item.active {
    @apply bg-primary bg-opacity-10 text-primary;
  }
  
  /* Typography responsive */
  .responsive-title {
    @apply text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold;
  }
  
  .responsive-subtitle {
    @apply text-base sm:text-lg lg:text-xl font-semibold;
  }
  
  .responsive-body {
    @apply text-sm sm:text-base;
  }
  
  .responsive-caption {
    @apply text-xs sm:text-sm;
  }
  
  /* Form responsive styles */
  .mobile-form {
    @apply space-y-4 sm:space-y-6;
  }
  
  .mobile-form-group {
    @apply space-y-2 sm:space-y-3;
  }
  
  .mobile-form-row {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6;
  }
  
  .mobile-form-section {
    @apply p-4 sm:p-6 bg-muted bg-opacity-30 rounded-xl space-y-4 sm:space-y-6;
  }
  
  /* Table responsive */
  .mobile-table {
    @apply overflow-x-auto -mx-4 sm:mx-0;
  }
  
  .mobile-table table {
    @apply min-w-full;
  }
  
  .mobile-table-cell {
    @apply px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm;
  }
  
  /* Modal responsive */
  .mobile-modal {
    @apply fixed inset-0 z-50 flex items-end sm:items-center justify-center;
  }
  
  .mobile-modal-content {
    @apply w-full sm:w-auto sm:max-w-lg mx-4 sm:mx-0 bg-white rounded-t-xl sm:rounded-xl;
    @apply max-h-[90vh] overflow-y-auto;
  }
  
  .mobile-modal-enter {
    animation: mobileModalEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-modal-exit {
    animation: mobileModalExit 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Glass morphism */
  .glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Modern card styles */
  .modern-card {
    @apply bg-card border border-border rounded-xl shadow-sm hover:shadow-lg smooth-transition backdrop-blur-sm;
  }
  
  .modern-card-elevated {
    @apply modern-card shadow-lg hover:shadow-xl;
  }
  
  /* Status styles */
  .status-success {
    @apply bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800;
  }
  
  .status-warning {
    @apply bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800;
  }
  
  .status-error {
    @apply bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800;
  }
  
  .status-info {
    @apply bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
  }

  /* Camera preview */
  .camera-preview {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  /* Mobile responsive utilities */
  .mobile-padding {
    @apply px-3 sm:px-4 md:px-6 lg:px-8;
  }

  .mobile-text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
  }

  .mobile-header-responsive {
    @apply text-lg sm:text-xl lg:text-2xl;
  }

  .mobile-button-responsive {
    @apply text-xs sm:text-sm lg:text-base px-3 sm:px-4 py-2 sm:py-2.5;
  }

  .mobile-grid-responsive {
    @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
  }

  .mobile-gap-responsive {
    @apply gap-2 sm:gap-4 lg:gap-6;
  }

  .mobile-form-responsive {
    @apply space-y-4 sm:space-y-6 lg:space-y-8;
  }

  /* Touch-friendly interactive elements */
  .touch-friendly {
    @apply min-h-[44px] min-w-[44px];
  }

  .touch-friendly-button {
    @apply h-11 sm:h-10 lg:h-9 px-4 sm:px-3 lg:px-4;
  }

  /* Responsive text sizes */
  .responsive-title {
    @apply text-xl sm:text-2xl lg:text-3xl;
  }

  .responsive-subtitle {
    @apply text-sm sm:text-base lg:text-lg;
  }

  .responsive-body {
    @apply text-sm sm:text-base;
  }

  .responsive-caption {
    @apply text-xs sm:text-sm;
  }

  /* Mobile-first form improvements */
  .mobile-form-section {
    @apply p-4 sm:p-6 lg:p-8;
  }

  .mobile-card-header {
    @apply p-4 sm:p-6 lg:p-8;
  }

  .mobile-card-content {
    @apply p-6 sm:p-8 lg:p-10;
  }

  /* Additional utility classes */
  .mobile-form-responsive {
    @apply space-y-6 sm:space-y-8;
  }

  .mobile-gap-responsive {
    @apply gap-4 sm:gap-6;
  }

  .mobile-header-responsive {
    @apply text-base sm:text-lg lg:text-xl;
  }

  .touch-friendly-button {
    @apply min-h-[44px] touch-target;
  }

  /* Modal responsive */
  .mobile-modal-content {
    @apply m-4 sm:m-6 max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)];
  }

  /* Form group mobile */
  .mobile-form-group {
    @apply space-y-2;
  }

  /* Touch input */
  .touch-input {
    @apply min-h-[44px] px-3 py-2;
  }

  /* Responsive subtitle */
  .responsive-subtitle {
    @apply text-sm sm:text-base lg:text-lg font-semibold;
  }
}