/* RentEasy Custom Theme System */
/* Note: TailwindCSS is loaded via CDN in base.html */

/* CSS Variables for Theme System */
:root {
  --color-primary: #0D9488;
  --color-primary-dark: #0F766E;
  --color-secondary: #4B5563;
  --color-secondary-dark: #374151;
  --color-accent: #6366F1;
  /* Indigo accent instead of purple */
  --color-accent-dark: #4F46E5;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-background: #FBFCFD;
  --color-surface: #FFFFFF;
  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #9CA3AF;
  --color-border: #E5E7EB;
}

[data-theme="dark"] {
  --color-primary: #2DD4BF;
  --color-primary-dark: #0D9488;
  --color-secondary: #9CA3AF;
  --color-secondary-dark: #D1D5DB;
  --color-accent: #818CF8;
  --color-accent-dark: #6366F1;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-background: #0B0F1A;
  --color-surface: #1F2937;
  --color-text-primary: #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-tertiary: #9CA3AF;
  --color-border: #374151;
}

/* Base Styles */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

/* Custom Component Classes */
.btn {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm;
}

/* Fix for old button classes */
.btn-lg {
  @apply px-6 py-3 text-base;
}

.btn-accent {
  @apply bg-indigo-500 text-white hover:bg-indigo-600 focus:ring-indigo-500;
}

.btn-outline {
  @apply border-2 border-current bg-transparent hover:bg-current hover:text-white;
}

.btn-primary {
  @apply bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500;
}

.btn-secondary {
  @apply bg-secondary-500 text-white hover:bg-secondary-600 focus:ring-secondary-500;
}

.btn-accent {
  @apply bg-accent-500 text-white hover:bg-accent-600 focus:ring-accent-500;
}

.btn-success {
  @apply bg-success-500 text-white hover:bg-success-600 focus:ring-success-500;
}

.btn-warning {
  @apply bg-warning-500 text-white hover:bg-warning-600 focus:ring-warning-500;
}

.btn-error {
  @apply bg-error-500 text-white hover:bg-error-600 focus:ring-error-500;
}

.btn-ghost {
  @apply bg-transparent text-secondary-700 hover:bg-secondary-100 focus:ring-secondary-500;
}

[data-theme="dark"] .btn-ghost {
  @apply text-secondary-300 hover:bg-secondary-800;
}

.btn-outline {
  @apply border-2 border-current bg-transparent hover:bg-current hover:text-white;
}

.btn-sm {
  @apply px-3 py-1.5 text-xs;
}

.btn-lg {
  @apply px-6 py-3 text-base;
}

.btn-circle {
  @apply rounded-full p-2 aspect-square;
}

.btn-disabled {
  @apply opacity-50 cursor-not-allowed pointer-events-none;
}

/* Card Component */
.card {
  @apply bg-white rounded-xl shadow-sm border border-secondary-200 overflow-hidden;
}

[data-theme="dark"] .card {
  @apply bg-secondary-800 border-secondary-700;
}

.card-body {
  @apply p-6;
}

/* Badge Component */
.badge {
  @apply inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-medium rounded-full;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

[data-theme="dark"] .badge-success {
  @apply bg-green-900 text-green-200;
}

/* Simplified Navigation Styles - Using Tailwind classes directly in HTML */

/* Focus states for accessibility */
nav a:focus,
nav button:focus {
  @apply outline-none ring-2 ring-rose-500 ring-offset-2;
}

/* Dark mode focus states */
.dark nav a:focus,
.dark nav button:focus {
  @apply ring-offset-gray-900;
}

/* Enhanced hover effects */
nav a:hover i,
nav button:hover i {
  @apply transform scale-110;
}

/* Smooth transitions for theme switching */
nav * {
  transition-property: background-color, border-color, color, fill, stroke, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Legacy nav-link for backward compatibility */
.nav-link {
  @apply flex items-center gap-2 px-3 py-2 text-sm font-medium text-secondary-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-all duration-200;
}

[data-theme="dark"] .nav-link {
  @apply text-secondary-300 hover:text-primary-400 hover:bg-primary-900/20;
}

.nav-link.active {
  @apply text-primary-600 bg-primary-50;
}

[data-theme="dark"] .nav-link.active {
  @apply text-primary-400 bg-primary-900/20;
}

/* Theme Toggle */
.theme-toggle {
  @apply p-2 rounded-lg text-secondary-600 hover:text-primary-600 hover:bg-primary-50 transition-all duration-200;
}

[data-theme="dark"] .theme-toggle {
  @apply text-secondary-400 hover:text-primary-400 hover:bg-primary-900/20;
}

/* Text Gradient */
.text-gradient {
  @apply bg-gradient-to-r from-primary-600 to-accent-600 bg-clip-text text-transparent;
}

/* Background Gradients */
.bg-gradient-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

/* Color Utilities */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.bg-primary {
  background-color: var(--color-surface);
}

.bg-secondary {
  background-color: var(--color-background);
}

.border-primary {
  border-color: var(--color-border);
}

/* Modal Styles */
.modal {
  @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm;
}

.modal-box {
  @apply bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

[data-theme="dark"] .modal-box {
  @apply bg-secondary-800;
}

/* Join/Pagination Styles */
.join-item {
  @apply border border-secondary-300 -ml-px first:ml-0 first:rounded-l-lg last:rounded-r-lg;
}

[data-theme="dark"] .join-item {
  @apply border-secondary-600;
}

.btn-active {
  @apply bg-primary-500 text-white border-primary-500;
}

/* Form Styles */
input,
textarea,
select {
  @apply bg-white border border-secondary-300 text-secondary-900 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  @apply bg-secondary-800 border-secondary-600 text-secondary-100;
}

/* Smooth transitions for all interactive elements */
button,
a,
.btn,
input,
textarea,
select {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation delays */
.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-3000 {
  animation-delay: 3s;
}

/* Backdrop blur utility */
.backdrop-blur {
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .backdrop-blur {
  background-color: rgba(30, 41, 59, 0.8);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Additional Theme Utilities */
.text-gradient-primary {
  @apply bg-gradient-to-r from-primary-500 to-primary-700 bg-clip-text text-transparent;
}

.text-gradient-accent {
  @apply bg-gradient-to-r from-accent-500 to-accent-700 bg-clip-text text-transparent;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, theme('colors.primary.500') 0%, theme('colors.primary.700') 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, theme('colors.accent.500') 0%, theme('colors.accent.700') 100%);
}

/* Enhanced Card Styles */
.card-hover {
  @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
}

/* Enhanced Form Styles */
.form-input {
  @apply w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200;
}

[data-theme="dark"] .form-input {
  @apply bg-secondary-800 border-secondary-600 text-secondary-100;
}

.form-label {
  @apply block text-sm font-medium text-secondary-700 mb-2;
}

[data-theme="dark"] .form-label {
  @apply text-secondary-300;
}

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

.btn-loading::after {
  content: '';
  @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin ml-2;
}

/* Focus States */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

[data-theme="dark"] .focus-ring {
  @apply focus:ring-offset-secondary-800;
}

/* Responsive Text */
.text-responsive-xl {
  @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
}

.text-responsive-lg {
  @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
}

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

/* Enhanced Shadows */
.shadow-soft {
  box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .shadow-soft {
  box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.3), 0 10px 20px -2px rgba(0, 0, 0, 0.2);
}

/* Improved Backdrop Blur */
.backdrop-blur-card {
  backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .backdrop-blur-card {
  background-color: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.3);
}

/*
 ===== AIRBNB-STYLE COMPONENTS ===== */

/* Modern Card Components */
.card-modern {
  @apply bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

[data-theme="dark"] .card-modern {
  @apply bg-gray-800 border-gray-700;
}

.card-listing {
  @apply bg-white rounded-2xl overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl;
}

[data-theme="dark"] .card-listing {
  @apply bg-gray-800;
}

.card-listing-image {
  @apply aspect-square w-full object-cover group-hover:scale-105 transition-transform duration-700;
}

.card-listing-content {
  @apply p-4 space-y-2;
}

.card-listing-title {
  @apply font-semibold text-gray-900 text-sm line-clamp-2 group-hover:text-gray-700 transition-colors;
}

[data-theme="dark"] .card-listing-title {
  @apply text-gray-100 group-hover:text-gray-300;
}

.card-listing-subtitle {
  @apply text-gray-500 text-sm;
}

[data-theme="dark"] .card-listing-subtitle {
  @apply text-gray-400;
}

.card-listing-price {
  @apply font-semibold text-gray-900 text-sm;
}

[data-theme="dark"] .card-listing-price {
  @apply text-gray-100;
}

/* Modern Button System */
.btn-modern {
  @apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-modern-primary {
  @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500 shadow-sm hover:shadow-emerald-500/20;
}

.btn-modern-secondary {
  @apply bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 focus:ring-slate-500 shadow-sm;
}

[data-theme="dark"] .btn-modern-secondary {
  @apply bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700;
}

.btn-modern-ghost {
  @apply bg-transparent text-slate-700 hover:bg-slate-100 focus:ring-slate-500;
}

[data-theme="dark"] .btn-modern-ghost {
  @apply text-slate-300 hover:bg-slate-800;
}

.btn-modern-outline {
  @apply bg-transparent border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white focus:ring-emerald-500;
}

/* Badge System */
.badge-modern {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-modern-success {
  @apply bg-green-100 text-green-800;
}

[data-theme="dark"] .badge-modern-success {
  @apply bg-green-900 text-green-200;
}

.badge-modern-warning {
  @apply bg-yellow-100 text-yellow-800;
}

[data-theme="dark"] .badge-modern-warning {
  @apply bg-yellow-900 text-yellow-200;
}

.badge-modern-error {
  @apply bg-red-100 text-red-800;
}

[data-theme="dark"] .badge-modern-error {
  @apply bg-red-900 text-red-200;
}

.badge-modern-info {
  @apply bg-blue-100 text-blue-800;
}

[data-theme="dark"] .badge-modern-info {
  @apply bg-blue-900 text-blue-200;
}

.badge-modern-neutral {
  @apply bg-gray-100 text-gray-800;
}

[data-theme="dark"] .badge-modern-neutral {
  @apply bg-gray-800 text-gray-200;
}

/* Avatar System */
.avatar {
  @apply inline-flex items-center justify-center rounded-full bg-gray-500 overflow-hidden;
}

.avatar-sm {
  @apply w-8 h-8 text-sm;
}

.avatar-md {
  @apply w-10 h-10 text-base;
}

.avatar-lg {
  @apply w-12 h-12 text-lg;
}

.avatar-xl {
  @apply w-16 h-16 text-xl;
}

.avatar-gradient {
  @apply bg-gradient-to-r from-rose-500 to-pink-500 text-white font-medium;
}

.avatar-image {
  @apply w-full h-full object-cover;
}

/* Modern Form Components */
.form-modern {
  @apply space-y-6;
}

.form-group-modern {
  @apply space-y-2;
}

.form-label-modern {
  @apply block text-sm font-medium text-gray-700;
}

[data-theme="dark"] .form-label-modern {
  @apply text-gray-300;
}

.form-input-modern {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-colors duration-200 bg-white;
}

[data-theme="dark"] .form-input-modern {
  @apply bg-gray-800 border-gray-600 text-gray-100 focus:border-rose-400 focus:ring-rose-400;
}

.form-input-modern:focus {
  @apply outline-none;
}

.form-textarea-modern {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-colors duration-200 bg-white resize-none;
}

[data-theme="dark"] .form-textarea-modern {
  @apply bg-gray-800 border-gray-600 text-gray-100 focus:border-rose-400 focus:ring-rose-400;
}

.form-select-modern {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-colors duration-200 bg-white;
}

[data-theme="dark"] .form-select-modern {
  @apply bg-gray-800 border-gray-600 text-gray-100 focus:border-rose-400 focus:ring-rose-400;
}

/* Search Bar Component */
.search-bar-modern {
  @apply flex items-center bg-white border border-gray-300 rounded-full shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden;
}

[data-theme="dark"] .search-bar-modern {
  @apply bg-gray-800 border-gray-600;
}

.search-bar-input {
  @apply flex-1 px-6 py-4 text-sm border-none focus:outline-none bg-transparent;
}

.search-bar-divider {
  @apply w-px h-8 bg-gray-300;
}

[data-theme="dark"] .search-bar-divider {
  @apply bg-gray-600;
}

.search-bar-button {
  @apply p-3 bg-emerald-600 text-white hover:bg-emerald-700 transition-colors;
}

/* Modal System */
.modal-modern {
  @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm;
}

.modal-content-modern {
  @apply bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

[data-theme="dark"] .modal-content-modern {
  @apply bg-gray-800;
}

.modal-header-modern {
  @apply flex items-center justify-between p-6 border-b border-gray-200;
}

[data-theme="dark"] .modal-header-modern {
  @apply border-gray-700;
}

.modal-title-modern {
  @apply text-lg font-semibold text-gray-900;
}

[data-theme="dark"] .modal-title-modern {
  @apply text-gray-100;
}

.modal-close-modern {
  @apply p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors;
}

[data-theme="dark"] .modal-close-modern {
  @apply hover:text-gray-300 hover:bg-gray-700;
}

.modal-body-modern {
  @apply p-6;
}

.modal-footer-modern {
  @apply flex items-center justify-end space-x-3 p-6 border-t border-gray-200;
}

[data-theme="dark"] .modal-footer-modern {
  @apply border-gray-700;
}

/* Pagination System */
.pagination-modern {
  @apply flex items-center justify-center space-x-1;
}

.pagination-item-modern {
  @apply px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 transition-colors first:rounded-l-lg last:rounded-r-lg;
}

[data-theme="dark"] .pagination-item-modern {
  @apply text-gray-300 bg-gray-800 border-gray-600 hover:bg-gray-700;
}

.pagination-item-modern.active {
  @apply bg-rose-500 text-white border-rose-500 hover:bg-rose-600;
}

.pagination-item-modern:disabled {
  @apply opacity-50 cursor-not-allowed pointer-events-none;
}

/* Rating System */
.rating-modern {
  @apply flex items-center space-x-1;
}

.rating-star {
  @apply w-4 h-4 text-yellow-400;
}

.rating-text {
  @apply text-sm font-medium text-gray-700 ml-2;
}

[data-theme="dark"] .rating-text {
  @apply text-gray-300;
}

/* Price Display */
.price-modern {
  @apply font-semibold text-gray-900;
}

[data-theme="dark"] .price-modern {
  @apply text-gray-100;
}

.price-currency {
  @apply text-lg;
}

.price-amount {
  @apply text-lg;
}

.price-period {
  @apply text-sm font-normal text-gray-500;
}

[data-theme="dark"] .price-period {
  @apply text-gray-400;
}

/* Loading States */
.loading-spinner {
  @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

.loading-skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

[data-theme="dark"] .loading-skeleton {
  @apply bg-gray-700;
}

/* Utility Classes */
.text-gradient-emerald {
  @apply bg-gradient-to-r from-emerald-500 to-teal-500 bg-clip-text text-transparent;
}

.bg-gradient-emerald {
  @apply bg-gradient-to-r from-emerald-600 to-teal-600;
}

.shadow-modern {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-modern-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-modern-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dark mode navbar */
[data-theme="dark"] nav {
  @apply bg-gray-900/95 border-gray-700;
}

/* Responsive utilities */
.container-modern {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.grid-modern {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.grid-modern-2 {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.grid-modern-3 {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* Fix missing utility classes */
.shadow-modern {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-modern-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Fix form classes */
.form-modern {
  @apply space-y-6;
}

.form-group-modern {
  @apply space-y-2;
}

.form-label-modern {
  @apply block text-sm font-medium text-gray-700;
}

[data-theme="dark"] .form-label-modern {
  @apply text-gray-300;
}

.form-input-modern {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-colors duration-200 bg-white;
}

[data-theme="dark"] .form-input-modern {
  @apply bg-gray-800 border-gray-600 text-gray-100 focus:border-rose-400 focus:ring-rose-400;
}

.form-select-modern {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-colors duration-200 bg-white;
}

[data-theme="dark"] .form-select-modern {
  @apply bg-gray-800 border-gray-600 text-gray-100 focus:border-rose-400 focus:ring-rose-400;
}

.form-textarea-modern {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-colors duration-200 bg-white resize-none;
}

[data-theme="dark"] .form-textarea-modern {
  @apply bg-gray-800 border-gray-600 text-gray-100 focus:border-rose-400 focus:ring-rose-400;
}

/* Fix button classes */
.btn-modern {
  @apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-modern-primary {
  @apply bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500 shadow-sm;
}

.btn-modern-secondary {
  @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-gray-500 shadow-sm;
}

[data-theme="dark"] .btn-modern-secondary {
  @apply bg-gray-800 text-gray-300 border-gray-600 hover:bg-gray-700;
}

/* Fix card classes */
.card-listing {
  @apply bg-white rounded-2xl overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl;
}

[data-theme="dark"] .card-listing {
  @apply bg-gray-800;
}

.card-listing-image {
  @apply aspect-square w-full object-cover group-hover:scale-105 transition-transform duration-700;
}

.card-listing-content {
  @apply p-4 space-y-2;
}

.card-listing-title {
  @apply font-semibold text-gray-900 text-sm line-clamp-2 group-hover:text-gray-700 transition-colors;
}

[data-theme="dark"] .card-listing-title {
  @apply text-gray-100 group-hover:text-gray-300;
}

.card-listing-subtitle {
  @apply text-gray-500 text-sm;
}

[data-theme="dark"] .card-listing-subtitle {
  @apply text-gray-400;
}

/* Fix badge classes */
.badge-modern {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-modern-neutral {
  @apply bg-gray-100 text-gray-800;
}

[data-theme="dark"] .badge-modern-neutral {
  @apply bg-gray-800 text-gray-200;
}

/* Fix rating classes */
.rating-modern {
  @apply flex items-center space-x-1;
}

.rating-star {
  @apply w-4 h-4 text-yellow-400;
}

/* Fix price classes */
.price-modern {
  @apply font-semibold text-gray-900;
}

[data-theme="dark"] .price-modern {
  @apply text-gray-100;
}

.price-currency {
  @apply text-lg;
}

.price-amount {
  @apply text-lg;
}

.price-period {
  @apply text-sm font-normal text-gray-500;
}

[data-theme="dark"] .price-period {
  @apply text-gray-400;
}

/* Fix pagination classes */
.pagination-modern {
  @apply flex items-center justify-center space-x-1;
}

.pagination-item-modern {
  @apply px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 transition-colors first:rounded-l-lg last:rounded-r-lg;
}

[data-theme="dark"] .pagination-item-modern {
  @apply text-gray-300 bg-gray-800 border-gray-600 hover:bg-gray-700;
}

.pagination-item-modern.active {
  @apply bg-rose-500 text-white border-rose-500 hover:bg-rose-600;
}

/* Fix modal classes */
.modal-modern {
  @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm;
}

.modal-content-modern {
  @apply bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

[data-theme="dark"] .modal-content-modern {
  @apply bg-gray-800;
}

.modal-header-modern {
  @apply flex items-center justify-between p-6 border-b border-gray-200;
}

[data-theme="dark"] .modal-header-modern {
  @apply border-gray-700;
}

.modal-title-modern {
  @apply text-lg font-semibold text-gray-900;
}

[data-theme="dark"] .modal-title-modern {
  @apply text-gray-100;
}

.modal-close-modern {
  @apply p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors;
}

[data-theme="dark"] .modal-close-modern {
  @apply hover:text-gray-300 hover:bg-gray-700;
}

.modal-body-modern {
  @apply p-6;
}

.modal-footer-modern {
  @apply flex items-center justify-end space-x-3 p-6 border-t border-gray-200;
}

[data-theme="dark"] .modal-footer-modern {
  @apply border-gray-700;
}

/* Avatar classes */
.avatar {
  @apply inline-flex items-center justify-center rounded-full bg-gray-500 overflow-hidden;
}

.avatar-md {
  @apply w-10 h-10 text-base;
}

/* Line cla
mp utility */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Fix dark mode navbar */
[data-theme="dark"] nav {
  @apply bg-gray-900/95 border-gray-700;
}

/* Fix mobile menu dark mode */
[data-theme="dark"] .md\:hidden .bg-white {
  @apply bg-gray-900;
}

/* Fix dropdown menu dark mode */
[data-theme="dark"] .bg-white.rounded-xl.shadow-lg {
  @apply bg-gray-800 border-gray-700;
}

/* Fix theme toggle in dark mode */
[data-theme="dark"] .theme-toggle {
  @apply text-gray-400 hover:text-gray-200 hover:bg-gray-800;
}

/* Fix search form dark mode */
[data-theme="dark"] .bg-white.rounded-2xl {
  @apply bg-gray-800;
}

/* Fix empty state dark mode */
[data-theme="dark"] .bg-gray-100 {
  @apply bg-gray-700;
}

[data-theme="dark"] .text-gray-400 {
  @apply text-gray-500;
}

/* Fix social buttons dark mode */
[data-theme="dark"] .bg-white.px-2 {
  @apply bg-gray-800;
}

/* Ensure proper contrast in dark mode */
[data-theme="dark"] .text-gray-900 {
  @apply text-gray-100;
}

[data-theme="dark"] .text-gray-700 {
  @apply text-gray-300;
}

[data-theme="dark"] .text-gray-600 {
  @apply text-gray-400;
}

[data-theme="dark"] .text-gray-500 {
  @apply text-gray-500;
}

/* Fix border colors in dark mode */
[data-theme="dark"] .border-gray-300 {
  @apply border-gray-600;
}

[data-theme="dark"] .border-gray-200 {
  @apply border-gray-700;
}

/* Fix background colors in dark mode */
[data-theme="dark"] .bg-gray-50 {
  @apply bg-gray-800;
}

[data-theme="dark"] .bg-gray-100 {
  @apply bg-gray-700;
}

/* Fix hover states in dark mode */
[data-theme="dark"] .hover\:bg-gray-50:hover {
  @apply bg-gray-800;
}

[data-theme="dark"] .hover\:bg-gray-100:hover {
  @apply bg-gray-700;
}

/* E
nhanced Navbar Responsiveness */
@media (max-width: 1024px) {
  .nav-link-enhanced {
    @apply px-3 py-2;
  }
}

@media (max-width: 768px) {
  .user-dropdown {
    @apply w-56 right-0;
  }

  .mobile-menu-btn {
    @apply p-2.5;
  }
}

@media (max-width: 640px) {
  nav .max-w-7xl {
    @apply px-3;
  }

  .user-menu-btn {
    @apply p-1.5 space-x-1;
  }

  .user-avatar {
    @apply w-7 h-7;
  }

  .theme-toggle-btn {
    @apply p-2;
  }
}

/* Smooth transitions for theme switching */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Enhanced hover effects */
.nav-link-enhanced:hover {
  @apply transform -translate-y-0.5;
}

.theme-toggle-btn:hover {
  @apply transform rotate-12;
}

.user-menu-btn:hover {
  @apply transform scale-105;
}

/* Focus states for accessibility */
.nav-link-enhanced:focus,
.theme-toggle-btn:focus,
.user-menu-btn:focus,
.mobile-menu-btn:focus {
  @apply outline-none ring-2 ring-emerald-500 ring-offset-2;
}

[data-theme="dark"] .nav-link-enhanced:focus,
[data-theme="dark"] .theme-toggle-btn:focus,
[data-theme="dark"] .user-menu-btn:focus,
[data-theme="dark"] .mobile-menu-btn:focus {
  @apply ring-offset-gray-900;
}

/* Loading state for theme toggle */
.theme-toggle-btn.loading {
  @apply animate-spin;
}

/* Enhanced mobile menu animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-item {
  animation: slideDown 0.3s ease-out;
}

.mobile-nav-item:nth-child(1) {
  animation-delay: 0.1s;
}

.mobile-nav-item:nth-child(2) {
  animation-delay: 0.2s;
}

.mobile-nav-item:nth-child(3) {
  animation-delay: 0.3s;
}

/* Backdrop blur support check */
@supports (backdrop-filter: blur(8px)) {
  nav {
    @apply bg-white/95;
  }

  [data-theme="dark"] nav {
    @apply bg-gray-900/95;
  }
}

@supports not (backdrop-filter: blur(8px)) {
  nav {
    @apply bg-white;
  }

  [data-theme="dark"] nav {
    @apply bg-gray-900;
  }
}