/* Enhanced styles matching wireframes */

/* Risk indicator badges */
.risk-badge {
  @apply px-2 py-1 rounded text-xs font-semibold uppercase;
}

.risk-badge-high {
  @apply bg-red-600 text-white;
}

.risk-badge-medium {
  @apply bg-yellow-600 text-white;
}

.risk-badge-low {
  @apply bg-green-600 text-white;
}

.risk-badge-good {
  @apply bg-green-600 text-white;
}

/* Risk containers */
.risk-container-high {
  @apply bg-red-50 border-2 border-red-200 rounded-lg;
}

.risk-container-medium {
  @apply bg-yellow-50 border-2 border-yellow-200 rounded-lg;
}

.risk-container-low {
  @apply bg-green-50 border-2 border-green-200 rounded-lg;
}

/* Contract text highlighting */
.contract-highlight {
  @apply bg-white p-3 rounded border font-mono text-sm;
}

.contract-highlight-original {
  @apply line-through text-red-600;
}

.contract-highlight-suggested {
  @apply text-green-800 bg-green-100 border-green-300;
}

/* Step indicators */
.step-circle {
  @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold;
}

.step-circle-active {
  @apply bg-blue-600 text-white;
}

.step-circle-inactive {
  @apply bg-gray-200 text-gray-600;
}

/* Upload area states */
.upload-area-default {
  @apply border-2 border-dashed border-gray-300 rounded-lg bg-gray-50;
}

.upload-area-hover {
  @apply border-blue-500 bg-blue-50;
}

.upload-area-dragover {
  @apply border-blue-600 bg-blue-100;
}

.upload-area-success {
  @apply border-green-500 bg-green-50;
}

/* Progress indicators */
.progress-bar {
  @apply bg-gray-200 rounded-full h-3;
}

.progress-bar-fill {
  @apply bg-blue-600 h-3 rounded-full transition-all duration-300;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .mobile-upload-area {
    @apply p-8;
  }
  
  .mobile-risk-grid {
    @apply grid-cols-3 gap-2;
  }
  
  .mobile-risk-item {
    @apply p-2 text-center;
  }
}

/* Analysis status indicators */
.analysis-step {
  @apply flex items-center text-sm mb-2;
}

.analysis-step-complete {
  @apply text-green-600;
}

.analysis-step-active {
  @apply text-blue-600;
}

.analysis-step-pending {
  @apply text-gray-400;
}

/* Export format cards */
.export-card {
  @apply border-2 rounded-lg p-6 text-center cursor-pointer transition-all;
}

.export-card-selected {
  @apply border-blue-500 bg-blue-50;
}

.export-card-default {
  @apply border-gray-300 hover:border-blue-500;
}

/* Suggestion panel */
.suggestion-item {
  @apply border p-3 rounded mb-3;
}

.suggestion-item-high {
  @apply bg-red-50 border-red-200;
}

.suggestion-item-medium {
  @apply bg-yellow-50 border-yellow-200;
}

.suggestion-item-low {
  @apply bg-green-50 border-green-200;
}

/* Loading spinner */
.loading-spinner {
  @apply w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin;
}

/* Contract editor highlighting */
.editor-highlight-problematic {
  @apply bg-red-100 border-l-4 border-red-500 p-3 my-4;
}

.editor-highlight-suggestion {
  @apply bg-green-100 border border-green-300 rounded mt-2 p-2;
}

/* Button styles matching wireframes */
.btn-primary {
  @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition;
}

.btn-secondary {
  @apply border border-gray-300 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition;
}

.btn-success {
  @apply bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition;
}

.btn-sm {
  @apply px-3 py-1 text-sm rounded;
}

/* Dashboard stats cards */
.stats-card {
  @apply p-6 rounded-lg border;
}

.stats-card-blue {
  @apply bg-blue-50 border-blue-200;
}

.stats-card-red {
  @apply bg-red-50 border-red-200;
}

.stats-card-yellow {
  @apply bg-yellow-50 border-yellow-200;
}

.stats-card-green {
  @apply bg-green-50 border-green-200;
}

/* Screen container for wireframe-like appearance */
.screen-container {
  @apply border-3 border-gray-800 rounded-lg bg-white shadow-xl;
}

/* Flow arrows */
.flow-arrow {
  border-left: 2px solid #3b82f6;
  border-bottom: 2px solid #3b82f6;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  margin: 10px auto;
}

/* Platform logo animations */
.platform-logo {
  @apply transition-all duration-300 ease-in-out;
}

.platform-logo:hover {
  transform: translateY(-2px) scale(1.05);
}

.platform-logo-icon {
  @apply transition-transform duration-200;
}

.platform-logo:hover .platform-logo-icon {
  transform: scale(1.1);
}

/* Platform specific hover colors */
.platform-youtube:hover {
  @apply bg-red-50 border-red-200;
}

.platform-twitch:hover {
  @apply bg-purple-50 border-purple-200;
}

.platform-tiktok:hover {
  @apply bg-gray-100 border-gray-300;
}

.platform-instagram:hover {
  @apply bg-pink-50 border-pink-200;
}

.platform-twitter:hover {
  @apply bg-blue-50 border-blue-200;
}

.platform-onlyfans:hover {
  @apply bg-blue-50 border-blue-200;
}

.platform-patreon:hover {
  @apply bg-orange-50 border-orange-200;
}

.platform-linkedin:hover {
  @apply bg-blue-50 border-blue-200;
}

/* Floating animation for platform logos */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

.platform-float {
  animation: float 3s ease-in-out infinite;
}

.platform-float:nth-child(2) {
  animation-delay: 0.5s;
}

.platform-float:nth-child(3) {
  animation-delay: 1s;
}

.platform-float:nth-child(4) {
  animation-delay: 1.5s;
}

/* Platform recognition section */
.platform-showcase {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.platform-card {
  @apply bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
}