/* LiArt Planner Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --secondary: #10b981;
  --accent: #f59e0b;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  transition: all 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.animate-pulse-subtle {
  animation: pulse 2s infinite;
}

/* Custom buttons */
.btn-primary {
  @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-outline {
  @apply border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Cards */
.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-200;
}

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

/* Forms */
.form-input {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors duration-200;
}

.form-textarea {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none transition-colors duration-200;
}

.form-select {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors duration-200;
}

/* Task status badges */
.status-todo {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200;
}

.status-in-progress {
  @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

.status-completed {
  @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

/* Priority badges */
.priority-low {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200;
}

.priority-medium {
  @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.priority-high {
  @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

/* Sidebar */
.sidebar {
  transition: width 0.3s ease;
}

.sidebar-collapsed {
  width: 80px;
}

.sidebar-expanded {
  width: 280px;
}

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

/* Toast notifications */
.toast {
  @apply fixed top-4 right-4 max-w-sm w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4 z-50;
  animation: slideIn 0.3s ease-out;
}

.toast.success {
  @apply border-l-4 border-green-500;
}

.toast.error {
  @apply border-l-4 border-red-500;
}

.toast.warning {
  @apply border-l-4 border-yellow-500;
}

.toast.info {
  @apply border-l-4 border-blue-500;
}

/* Calendar styles */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: white;
}

.dark .calendar-grid {
  background: #1f2937;
}

.calendar-day {
  @apply aspect-square flex flex-col items-center justify-center text-sm font-medium cursor-pointer border-r border-b border-gray-200 dark:border-gray-700 min-h-[60px] hover:shadow-md;
}

.calendar-day:nth-child(7n) {
  @apply border-r-0;
}

.calendar-day.today {
  @apply bg-indigo-600 text-white shadow-lg;
}

.calendar-day.today:hover {
  @apply bg-indigo-700;
}

.calendar-day.has-tasks {
  @apply bg-indigo-50 dark:bg-indigo-900/30;
}

.calendar-day.selected {
  @apply bg-indigo-100 dark:bg-indigo-800 ring-2 ring-indigo-500;
}

.calendar-day:hover:not(.today) {
  @apply bg-gray-50 dark:bg-gray-700;
}

/* Progress bars */
.progress-bar {
  @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
}

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

/* Drag and drop */
.dragging {
  @apply opacity-50 transform rotate-2;
}

.drop-zone {
  @apply border-2 border-dashed border-indigo-300 dark:border-indigo-600;
}

/* Loading states */
.skeleton {
  @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.mobile-open {
    transform: translateX(0);
  }
}

/* Dark mode toggle */
.dark-mode-toggle {
  transition: all 0.3s ease;
}

/* Chart containers */
.chart-container {
  position: relative;
  height: 300px;
}

/* Wish card styles */
.wish-card {
  @apply relative overflow-hidden rounded-xl shadow-sm hover:shadow-lg transition-all duration-300;
}

.wish-card:hover {
  transform: translateY(-2px);
}

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

/* Custom scrollbars for specific components */
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #6b7280 #f3f4f6;
}

.dark .custom-scroll {
  scrollbar-color: #6b7280 #374151;
}