/* Rank Automator - Custom Styles */

/* Smooth animations and transitions */
* {
  transition: all 0.3s ease;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Glassmorphism effects */
.glass {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animated gradient backgrounds */
.animated-gradient {
  background: linear-gradient(-45deg, #1e293b, #334155, #475569, #1e40af);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Loading animations */
.pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom input styles */
.input-field {
  @apply bg-dark-800 border border-dark-600 rounded-lg px-4 py-3 text-white placeholder-dark-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-all;
}

.input-field:focus {
  box-shadow: 0 0 0 1px #3b82f6;
}

/* Custom button styles */
.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500/50;
}

.btn-secondary {
  @apply bg-dark-700 hover:bg-dark-600 text-white border border-dark-600 hover:border-dark-500 px-6 py-3 rounded-lg font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-dark-500/50;
}

.btn-accent {
  @apply bg-accent-600 hover:bg-accent-700 text-white px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent-500/50;
}

/* Card styles */
.card {
  @apply bg-dark-800/50 backdrop-blur-sm border border-dark-700 rounded-xl p-6 hover:border-dark-600 transition-all;
}

.card-hover {
  @apply transform hover:scale-105 hover:shadow-2xl;
}

/* Progress indicators */
.progress-step {
  @apply w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg transition-all;
}

.progress-step.active {
  @apply bg-primary-600 text-white;
}

.progress-step.completed {
  @apply bg-accent-600 text-white;
}

.progress-step.inactive {
  @apply bg-dark-700 text-dark-400;
}

/* Tooltip styles */
.tooltip {
  @apply absolute z-50 px-3 py-2 text-sm bg-dark-800 text-white rounded-lg shadow-lg border border-dark-600;
}

/* Notification styles */
.notification {
  @apply fixed top-4 right-4 z-50 max-w-md p-4 rounded-lg shadow-lg border transition-all transform translate-x-full;
}

.notification.show {
  @apply translate-x-0;
}

.notification.success {
  @apply bg-accent-900 border-accent-600 text-accent-100;
}

.notification.error {
  @apply bg-red-900 border-red-600 text-red-100;
}

.notification.info {
  @apply bg-primary-900 border-primary-600 text-primary-100;
}

/* Modal styles */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* Responsive design helpers */
@media (max-width: 768px) {
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
}

/* Keyword tag styles */
.keyword-tag {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary-900/50 text-primary-200 border border-primary-700/50;
}

/* SEO score indicators */
.seo-score {
  @apply inline-flex items-center justify-center w-12 h-12 rounded-full font-bold text-lg;
}

.seo-score.excellent {
  @apply bg-accent-600 text-white;
}

.seo-score.good {
  @apply bg-yellow-600 text-white;
}

.seo-score.needs-work {
  @apply bg-red-600 text-white;
}

/* Content editor styles */
.content-editor {
  @apply bg-dark-900 border border-dark-700 rounded-lg p-4 text-white min-h-32 resize-y focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none;
}

/* Drag and drop styles */
.drag-zone {
  @apply border-2 border-dashed border-dark-600 rounded-lg p-8 text-center hover:border-primary-500 transition-all;
}

.drag-zone.active {
  @apply border-primary-500 bg-primary-500/10;
}

/* Search result styles */
.search-result {
  @apply block p-4 border-b border-dark-700 hover:bg-dark-800/50 transition-colors;
}

.search-result:last-child {
  @apply border-b-0;
}

/* Breadcrumb styles */
.breadcrumb {
  @apply flex items-center space-x-2 text-sm text-dark-400;
}

.breadcrumb a {
  @apply hover:text-primary-400 transition-colors;
}

.breadcrumb-separator {
  @apply text-dark-600;
}

/* Syntax highlighting for code blocks */
.code-block {
  @apply bg-dark-900 border border-dark-700 rounded-lg p-4 font-mono text-sm overflow-x-auto;
}

/* Performance meter styles */
.performance-meter {
  @apply w-full bg-dark-700 rounded-full h-2;
}

.performance-meter-fill {
  @apply h-2 rounded-full transition-all duration-500;
}

.performance-meter-fill.excellent {
  @apply bg-accent-500;
}

.performance-meter-fill.good {
  @apply bg-yellow-500;
}

.performance-meter-fill.poor {
  @apply bg-red-500;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

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

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

/* Focus styles for accessibility */
.focus-visible:focus-visible {
  @apply outline-2 outline-primary-500 outline-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card {
    @apply border-2;
  }
  
  .btn-primary {
    @apply border-2 border-primary-400;
  }
}

/* Dashboard-specific styles */
.dashboard-nav-btn {
  @apply px-4 py-2 text-sm font-medium text-dark-400 hover:text-white transition-colors rounded-lg;
}

.dashboard-nav-btn.active {
  @apply bg-primary-600 text-white;
}

.dashboard-nav-btn:hover:not(.active) {
  @apply bg-dark-700;
}

/* Stats card enhancements */
.stats-card {
  @apply bg-dark-800/50 p-6 rounded-xl border border-dark-700 hover:border-dark-600 transition-all;
}

.stats-card:hover {
  @apply transform translate-y-[-2px] shadow-lg;
}

/* Opportunity card styles */
.opportunity-card {
  @apply bg-dark-800/50 p-6 rounded-xl border border-dark-700 hover:border-primary-600 transition-all cursor-pointer;
}

.opportunity-card:hover {
  @apply shadow-lg transform translate-y-[-1px];
}

/* Difficulty badges */
.difficulty-low {
  @apply text-green-400 bg-green-400/20 px-2 py-1 rounded text-xs font-medium;
}

.difficulty-medium {
  @apply text-yellow-400 bg-yellow-400/20 px-2 py-1 rounded text-xs font-medium;
}

.difficulty-high {
  @apply text-red-400 bg-red-400/20 px-2 py-1 rounded text-xs font-medium;
}

/* Status badges */
.status-pending {
  @apply bg-yellow-600 text-white px-2 py-1 rounded text-xs font-medium;
}

.status-in-progress {
  @apply bg-blue-600 text-white px-2 py-1 rounded text-xs font-medium;
}

.status-completed {
  @apply bg-green-600 text-white px-2 py-1 rounded text-xs font-medium;
}

.status-draft {
  @apply bg-gray-600 text-white px-2 py-1 rounded text-xs font-medium;
}

.status-published {
  @apply bg-primary-600 text-white px-2 py-1 rounded text-xs font-medium;
}

/* Modal overlay enhancements */
.modal-overlay {
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Empty state styles */
.empty-state {
  @apply text-center py-12;
}

.empty-state-icon {
  @apply text-6xl text-dark-600 mb-4;
}

.empty-state-title {
  @apply text-xl font-semibold text-white mb-2;
}

.empty-state-description {
  @apply text-dark-400 mb-6;
}

/* Form enhancements */
.checkbox-custom {
  @apply appearance-none w-4 h-4 bg-dark-700 border border-dark-600 rounded checked:bg-primary-600 checked:border-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500/50;
}

.checkbox-custom:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
}

/* Button loading states */
.btn-loading {
  @apply opacity-75 cursor-not-allowed;
}

.btn-loading .btn-icon {
  @apply animate-spin;
}

/* Google OAuth button styling */
.google-signin-btn {
  @apply transition-all duration-200 hover:shadow-md;
}

.google-signin-btn:hover {
  @apply transform translate-y-[-1px];
}

.google-signin-btn .fab.fa-google {
  color: #4285f4;
}

.google-signin-btn:disabled {
  @apply opacity-50 cursor-not-allowed transform-none;
}

/* Divider styling */
.auth-divider {
  @apply relative flex items-center justify-center my-6;
}

.auth-divider::before {
  content: '';
  @apply absolute left-0 right-0 top-1/2 h-px bg-dark-600;
}

.auth-divider span {
  @apply bg-dark-900 px-4 text-sm text-dark-400;
}

/* Responsive dashboard */
@media (max-width: 768px) {
  .dashboard-nav-btn {
    @apply px-3 py-2 text-xs;
  }
  
  .stats-card {
    @apply p-4;
  }
  
  .opportunity-card {
    @apply p-4;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .modal-overlay {
    animation: none;
  }
}