/* ============================================
   Dark Mode Polish - Complete Theme Consistency
   Applied globally to fix all light/dark mode issues
   ============================================ */

/* ============================================
   1. COMMUNITY PAGE - Hard-coded Colors Fix
   ============================================ */

/* Profile Avatars - Remove hard-coded white borders */
[data-theme="dark"] .profile-img,
[data-theme="dark"] .user-avatar,
[data-theme="dark"] .profile-avatar,
[data-theme="dark"] .create-post-avatar img,
[data-theme="dark"] .comment-avatar img {
  border-color: var(--color-border) !important;
}

/* Community Background Sections */
[data-theme="dark"] .user-profile-widget,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .sidebar-section {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

/* Fix hard-coded white backgrounds */
[data-theme="dark"] .post-card,
[data-theme="dark"] .comment-card,
[data-theme="dark"] .friend-card,
[data-theme="dark"] .group-card,
[data-theme="dark"] .marketplace-listing,
[data-theme="dark"] .chat-room-card {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Fix hard-coded black text on cards */
[data-theme="dark"] .post-card *,
[data-theme="dark"] .comment-card *,
[data-theme="dark"] .friend-card *,
[data-theme="dark"] .group-card * {
  color: var(--color-text);
}

/* Secondary text within cards */
[data-theme="dark"] .post-meta,
[data-theme="dark"] .post-stats,
[data-theme="dark"] .comment-meta,
[data-theme="dark"] .friend-status,
[data-theme="dark"] .listing-details,
[data-theme="dark"] .stat-label {
  color: var(--color-text-secondary) !important;
}

/* ============================================
   2. BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

/* Fix buttons with hard-coded colors */
[data-theme="dark"] .main-tab-btn,
[data-theme="dark"] .forum-tab-btn,
[data-theme="dark"] .social-tab-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .main-tab-btn:hover,
[data-theme="dark"] .forum-tab-btn:hover,
[data-theme="dark"] .social-tab-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

[data-theme="dark"] .main-tab-btn.active,
[data-theme="dark"] .forum-tab-btn.active,
[data-theme="dark"] .social-tab-btn.active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* Action buttons */
[data-theme="dark"] .post-action-btn,
[data-theme="dark"] .comment-action-btn,
[data-theme="dark"] .reaction-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .post-action-btn:hover,
[data-theme="dark"] .comment-action-btn:hover,
[data-theme="dark"] .reaction-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

/* ============================================
   3. FORMS & INPUTS
   ============================================ */

/* All input fields */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select,
[data-theme="dark"] .create-post-input,
[data-theme="dark"] .comment-input,
[data-theme="dark"] .search-input {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .create-post-input:focus,
[data-theme="dark"] .comment-input:focus {
  border-color: var(--color-focus) !important;
  background: var(--color-bg) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .create-post-input::placeholder,
[data-theme="dark"] .comment-input::placeholder {
  color: var(--color-text-tertiary) !important;
}

/* ============================================
   4. MODALS & OVERLAYS
   ============================================ */

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-dialog {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .modal-header {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .modal-footer {
  background: var(--color-bg-secondary);
  border-top-color: var(--color-border);
}

[data-theme="dark"] .modal-close,
[data-theme="dark"] .close-btn {
  color: var(--color-text);
  background: transparent;
}

[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .close-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

/* ============================================
   5. DROPDOWNS & MENUS
   ============================================ */

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .context-menu {
  background: var(--color-bg-elevated) !important;
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .menu-item {
  color: var(--color-text);
  background: transparent;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .menu-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

/* ============================================
   6. SIDEBAR & WIDGETS
   ============================================ */

[data-theme="dark"] .sidebar,
[data-theme="dark"] .widget,
[data-theme="dark"] .sidebar-widget {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .widget-title,
[data-theme="dark"] .widget-header {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .widget-body,
[data-theme="dark"] .widget-content {
  background: var(--color-bg-elevated);
}

/* ============================================
   7. MARKETPLACE LISTINGS
   ============================================ */

[data-theme="dark"] .marketplace-listing,
[data-theme="dark"] .listing-card {
  background: var(--color-bg-elevated) !important;
  border-color: var(--color-border);
}

[data-theme="dark"] .listing-image {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .listing-title {
  color: var(--color-text) !important;
}

[data-theme="dark"] .listing-details,
[data-theme="dark"] .listing-expires {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .listing-price {
  color: var(--color-text) !important;
}

[data-theme="dark"] .listing-badge {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ============================================
   8. CHAT & MESSAGING
   ============================================ */

[data-theme="dark"] .chat-room-card,
[data-theme="dark"] .chat-container {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .chat-header {
  background: var(--color-bg-secondary);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .chat-messages {
  background: var(--color-bg);
}

[data-theme="dark"] .message-bubble {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .message-bubble.own {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

[data-theme="dark"] .chat-input {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ============================================
   9. SEARCH & FILTERS
   ============================================ */

[data-theme="dark"] .search-container,
[data-theme="dark"] .search-bar,
[data-theme="dark"] .search-wrapper {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .search-input {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .search-results {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .search-result-item {
  background: transparent;
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .search-result-item:hover {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .filter-group,
[data-theme="dark"] .filter-section {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

/* ============================================
   10. TABLES & LISTS
   ============================================ */

[data-theme="dark"] table {
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] th {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] td {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] tr:hover td {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .list-group-item {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .list-group-item:hover {
  background: var(--color-bg-secondary);
}

/* ============================================
   11. BADGES & TAGS
   ============================================ */

[data-theme="dark"] .badge,
[data-theme="dark"] .tag,
[data-theme="dark"] .label {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .badge-primary {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ============================================
   12. TOOLTIPS & POPOVERS
   ============================================ */

[data-theme="dark"] .tooltip,
[data-theme="dark"] .tooltip-inner {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .popover {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .popover-header {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .popover-body {
  color: var(--color-text);
}

/* ============================================
   13. ALERTS & NOTIFICATIONS
   ============================================ */

[data-theme="dark"] .alert {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .notification {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .notification:hover {
  background: var(--color-bg-secondary);
}

/* ============================================
   14. PROGRESS BARS & LOADERS
   ============================================ */

[data-theme="dark"] .progress {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .progress-bar {
  background: var(--color-text);
}

[data-theme="dark"] .spinner,
[data-theme="dark"] .loader {
  border-color: var(--color-border);
  border-top-color: var(--color-text);
}

/* ============================================
   15. BREADCRUMBS & PAGINATION
   ============================================ */

[data-theme="dark"] .breadcrumb {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

[data-theme="dark"] .breadcrumb-item {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--color-text);
}

[data-theme="dark"] .pagination {
  background: transparent;
}

[data-theme="dark"] .page-link {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .page-link:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

[data-theme="dark"] .page-item.active .page-link {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* ============================================
   16. ACCORDIONS & COLLAPSIBLES
   ============================================ */

[data-theme="dark"] .accordion,
[data-theme="dark"] .collapse-panel {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .accordion-header {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .accordion-body {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

/* ============================================
   17. TABS (Secondary)
   ============================================ */

[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
  border-bottom-color: var(--color-bg);
}

[data-theme="dark"] .tab-content {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ============================================
   18. CODE BLOCKS & PRE
   ============================================ */

[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] pre code {
  background: transparent;
}

/* ============================================
   19. SCROLLBARS
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-color: var(--color-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}

/* ============================================
   20. HERO SECTIONS & BANNERS
   ============================================ */

[data-theme="dark"] .hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .banner {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg-secondary) 100%
  );
}

[data-theme="dark"] .hero-title,
[data-theme="dark"] .page-hero h1,
[data-theme="dark"] .banner-title {
  color: var(--color-text) !important;
}

[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .page-hero-subtitle,
[data-theme="dark"] .banner-subtitle {
  color: var(--color-text-secondary) !important;
}

/* ============================================
   21. STATS & METRICS
   ============================================ */

[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .stat-number,
[data-theme="dark"] .metric-value {
  color: var(--color-text) !important;
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .metric-label {
  color: var(--color-text-secondary) !important;
}

/* ============================================
   22. DIVIDERS & SEPARATORS
   ============================================ */

[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] .separator {
  border-color: var(--color-border);
  background: var(--color-border);
}

/* ============================================
   23. IMAGES & MEDIA
   ============================================ */

[data-theme="dark"] img {
  opacity: 0.9;
}

[data-theme="dark"] .media-container,
[data-theme="dark"] .image-container {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

/* ============================================
   24. FOOTER
   ============================================ */

[data-theme="dark"] .main-footer,
[data-theme="dark"] .footer {
  background: var(--color-bg-secondary);
  border-top-color: var(--color-border);
}

[data-theme="dark"] .footer-title {
  color: var(--color-text);
}

[data-theme="dark"] .footer-description,
[data-theme="dark"] .footer-text {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .footer-links a {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .footer-links a:hover {
  color: var(--color-text);
}

/* ============================================
   25. EMPTY STATES
   ============================================ */

[data-theme="dark"] .empty-state {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .empty-state-title {
  color: var(--color-text);
}

[data-theme="dark"] .empty-state-description {
  color: var(--color-text-secondary);
}

/* ============================================
   26. LOADING STATES
   ============================================ */

[data-theme="dark"] .skeleton,
[data-theme="dark"] .loading-placeholder {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-secondary) 100%
  );
}

/* ============================================
   27. CRITICAL FIX: Override Any Remaining Hard-coded Values
   ============================================ */

/* Force all backgrounds to use theme variables */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
  background: var(--color-bg-elevated) !important;
}

/* Force all text colors to use theme variables */
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color: #000000"] {
  color: var(--color-text) !important;
}

/* Force all borders to use theme variables */
[data-theme="dark"] [style*="border-color: black"],
[data-theme="dark"] [style*="border-color: #000"],
[data-theme="dark"] [style*="border-color: #000000"],
[data-theme="dark"] [style*="border-color: white"],
[data-theme="dark"] [style*="border-color: #fff"],
[data-theme="dark"] [style*="border-color: #ffffff"] {
  border-color: var(--color-border) !important;
}

/* ============================================
   28. TRANSITIONS
   ============================================ */

/* Smooth theme transitions for all affected elements */
[data-theme="dark"] * {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Prevent transitions on theme toggle to avoid flash */
.theme-transition-disabled * {
  transition: none !important;
}

/* ============================================
   29. AI HELPER DARK MODE FIX
   ============================================ */

/* Fix AI Helper header visibility in dark mode */
[data-theme="dark"] .global-ai-helper-header,
[data-theme="dark"] .ai-helper-header {
  background: linear-gradient(135deg, #ffffff 0%, #e6e6e6 100%) !important;
  color: #000000 !important;
}

[data-theme="dark"] .global-ai-helper-header h3,
[data-theme="dark"] .ai-helper-header h3,
[data-theme="dark"] .global-ai-helper-header *,
[data-theme="dark"] .ai-helper-header * {
  color: #000000 !important;
}

[data-theme="dark"] .global-ai-helper-panel,
[data-theme="dark"] .ai-helper-panel {
  background: #1a1a1a !important;
}

[data-theme="dark"] .global-ai-helper-body,
[data-theme="dark"] .ai-helper-body {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ai-suggestion {
  background: #2d2d2d !important;
}

[data-theme="dark"] .ai-suggestion-title {
  color: #ffffff !important;
}

[data-theme="dark"] .ai-suggestion-desc {
  color: #b0b0b0 !important;
}

[data-theme="dark"] .global-ai-helper-close,
[data-theme="dark"] .ai-helper-close {
  color: #000000 !important;
}