/* Source: well_forum/views/css/forum.css */
/* WellCMS Forum Plugin Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Forum Styles */
@layer components {
  /* Forum Index */
  .forum-header {
    @apply bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mb-6;
  }

  .forum-categories {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
  }

  .forum-category {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow;
  }

  .category-icon {
    @apply w-16 h-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center;
  }

  .category-info {
    @apply p-4 text-center;
  }

  .category-stats {
    @apply flex justify-center gap-4 text-sm text-gray-600 dark:text-gray-400 mt-2;
  }

  /* Thread List */
  .forum-threads {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm;
  }

  .thread-item {
    @apply border-b border-gray-200 dark:border-gray-700 p-4 hover:bg-gray-50 dark:hover:bg-gray-700;
  }

  .thread-title {
    @apply text-lg font-medium text-gray-900 dark:text-white hover:text-blue-600;
  }

  .thread-meta {
    @apply flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400 mt-1;
  }

  .thread-stats {
    @apply flex gap-4 text-sm;
  }

  .label-pinned {
    @apply inline-block px-2 py-1 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded;
  }

  .label-feature {
    @apply inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 rounded;
  }

  /* Thread Detail */
  .forum-thread {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6;
  }

  .thread-header {
    @apply border-b border-gray-200 dark:border-gray-700 pb-4 mb-6;
  }

  .thread-content {
    @apply prose dark:prose-invert max-w-none mb-6;
  }

  .thread-actions {
    @apply flex gap-4 border-t border-gray-200 dark:border-gray-700 pt-4;
  }

  /* Reply */
  .forum-replies {
    @apply mt-6;
  }

  .forum-reply {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-4;
  }

  .reply-header {
    @apply flex items-center gap-4 mb-3;
  }

  .reply-floor {
    @apply text-sm font-medium text-gray-500;
  }

  .reply-content {
    @apply prose dark:prose-invert max-w-none mb-3;
  }

  .reply-actions {
    @apply flex gap-2 border-t border-gray-100 dark:border-gray-700 pt-2;
  }

  /* Nested Reply */
  .nested-replies {
    @apply ml-8 mt-4 border-l-2 border-gray-200 dark:border-gray-700 pl-4;
  }

  .nested-reply {
    @apply bg-gray-50 dark:bg-gray-700 rounded p-3 mb-2;
  }

  /* Forms */
  .form-group {
    @apply mb-4;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }

  .form-input {
    @apply block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500;
  }

  .form-textarea {
    @apply block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500;
  }

  .form-select {
    @apply block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500;
  }

  /* 暗黑模式下 datetime-local 原生日历图标不可见修复 */
  .dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

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

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

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

  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
  }

  .btn-sm {
    @apply px-2 py-1 text-xs;
  }

  /* Pagination */
  .pagination {
    @apply flex items-center justify-between mt-6;
  }

  .pagination-info {
    @apply text-sm text-gray-700 dark:text-gray-400;
  }

  .pagination-nav {
    @apply flex gap-2;
  }

  .pagination-btn {
    @apply px-3 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700;
  }

  .pagination-btn-active {
    @apply bg-blue-50 dark:bg-blue-900 border-blue-500 text-blue-600 dark:text-blue-400;
  }

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

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

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

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

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

  .badge-gray {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
  }

  /* Breadcrumb */
  .breadcrumb {
    @apply flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4;
  }

  .breadcrumb-link {
    @apply hover:text-blue-600 dark:hover:text-blue-400;
  }

  .breadcrumb-separator {
    @apply text-gray-400;
  }

  /* User Info */
  .user-avatar {
    @apply w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center;
  }

  .user-name {
    @apply font-medium text-gray-900 dark:text-white;
  }

  .user-title {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }

  /* Stats */
  .stats-grid {
    @apply grid grid-cols-1 md:grid-cols-4 gap-4 mb-6;
  }

  .stat-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 text-center;
  }

  .stat-number {
    @apply text-2xl font-bold text-blue-600 dark:text-blue-400;
  }

  .stat-label {
    @apply text-sm text-gray-600 dark:text-gray-400;
  }

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

  .empty-icon {
    @apply w-12 h-12 mx-auto text-gray-400 mb-4;
  }

  .empty-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-2;
  }

  .empty-description {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
}

/* Custom utilities */
@layer utilities {
  .prose-custom {
    @apply prose dark:prose-invert max-w-none;
  }

  .truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .dark-mode-auto {
    @apply dark;
  }
}