/* Dark mode color variables - WCAG compliant */
.dark {
  --text-primary: #f4f4f5;     /* Higher contrast white text */
  --text-secondary: #d4d4d8;   /* Better contrast for secondary text */
  --text-tertiary: #a1a1aa;    /* Accessible tertiary text */

  --bg-primary: #0a0a0b;       /* Deeper black for main background */
  --bg-secondary: #1a1a1b;     /* Dark gray for cards/sidebars */
  --bg-tertiary: #2a2a2b;      /* Medium gray for hover states */
  --bg-hover: #3a3a3b;         /* Lighter gray for active hover */

  --border-color: #404040;     /* Higher contrast borders */
  --border-light: #2a2a2b;     /* Subtle borders */
  --border-dark: #8D8D8F;      /* Light border for modals in dark mode*/
  --border-input: #525252;     /* Input field borders */

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
}

/* Dark mode specific styles */
.dark body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.dark .sidebar {
  background: var(--bg-secondary);
  border-right-color: var(--border-color);
}

.dark .chat-item {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.dark .chat-item:hover {
  background: var(--bg-hover);
}

.dark .chat-item.active {
  background: var(--bg-tertiary);
  border-color: var(--primary-color);
}

.dark .main-content {
  background: var(--bg-primary);
}

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

.dark .message.user {
  background: var(--bg-tertiary);
}

.dark .message.assistant {
  background: var(--bg-secondary);
}

.dark pre {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color);
}

.dark code {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark .modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
}

.dark .tag {
  border-color: var(--border-color);
}

.dark .search-input {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark .search-input::placeholder {
  color: var(--text-tertiary);
}

.dark .date-input {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
  color-scheme: dark; /* Makes calendar icon visible in dark mode */
}

/* Dark mode button text fixes */
.dark .import-button,
.dark .manage-tags-button,
.dark .btn-primary {
  color: white;
}

.dark .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark .btn-secondary:hover {
  background: var(--bg-hover);
}

/* Dark mode chat-date styling */
.dark .chat-date {
  color: var(--text-tertiary);
}

.dark .chat-item .chat-date {
  color: var(--text-tertiary);
}

.dark .chat-date-edited {
  color: var(--text-secondary);
}

/* Dark mode assistant filter buttons */
.dark .assistant-filter-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.dark .assistant-filter-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dark .assistant-filter-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Dark mode tag filter buttons */
.dark .tag-filter-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.dark .tag-filter-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dark .tag-filter-btn.active {
  background: var(--primary-color);
  color: white;
}

/* Dark mode trash icon - make it lighter */
.dark .tag-delete-btn:hover {
  background: rgba(220, 38, 38, 0.1); /* Light red background */
  color: #ef4444; /* Lighter red color */
}

/* Remove background-color from message-header in dark mode */
.dark .message-header {
  background-color: transparent;
  border-color: var(--border-color);
  border-color: bisque;
}

.dark .message-edit-textarea {
  background: var(--bg-primary);
  border-color: var(--primary-color);
  color: var(--text-primary);
}

.dark .cancel-message-edit-btn {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.dark .cancel-message-edit-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dark .dark-mode-toggle {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.dark .message-content a {
  color: #60a5fa;
}

.dark .message-content a:hover {
  color: #93c5fd;
}

/* Dark mode overlay */
.dark .sidebar-overlay {
  background: rgba(0, 0, 0, 0.7);
}


/* Login page dark mode */
.dark .form-input {
    background: var(--bg-secondary);
    color: var(--text-primary);
}