/* ========================================
   TiddlyWiki-Style Dark Theme
   Software Manual Skill
   ======================================== */

[data-theme="dark"] {
  /* Dark Theme Colors */
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --text-primary: #eaeaea;
  --text-secondary: #b8b8b8;
  --text-muted: #888888;
  --border-color: #2d3748;
  --accent-color: #4dabf7;
  --accent-hover: #339af0;
  --success-color: #51cf66;
  --warning-color: #ffd43b;
  --danger-color: #ff6b6b;
  --info-color: #22b8cf;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Dark theme specific overrides */
[data-theme="dark"] .wiki-logo .logo-placeholder {
  background: linear-gradient(135deg, var(--accent-color), #6741d9);
}

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

[data-theme="dark"] .wiki-search input::placeholder {
  color: var(--text-muted);
}

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

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

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

[data-theme="dark"] .result-excerpt mark {
  background-color: rgba(255, 212, 59, 0.3);
  color: var(--warning-color);
}

[data-theme="dark"] .wiki-tags .tag {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .wiki-tags .tag:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

[data-theme="dark"] .wiki-tags .tag.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #1a1a2e;
}

[data-theme="dark"] .wiki-toc a:hover {
  background-color: var(--bg-tertiary);
}

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

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

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

[data-theme="dark"] .header-actions button:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

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

[data-theme="dark"] .tiddler-header {
  border-color: var(--border-color);
}

[data-theme="dark"] .difficulty-badge.beginner {
  background-color: rgba(81, 207, 102, 0.2);
  color: var(--success-color);
}

[data-theme="dark"] .difficulty-badge.intermediate {
  background-color: rgba(255, 212, 59, 0.2);
  color: var(--warning-color);
}

[data-theme="dark"] .difficulty-badge.advanced {
  background-color: rgba(255, 107, 107, 0.2);
  color: var(--danger-color);
}

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

[data-theme="dark"] .tiddler-content code {
  background-color: var(--bg-tertiary);
  color: var(--accent-color);
}

[data-theme="dark"] .tiddler-content pre {
  background-color: #0d1117;
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .tiddler-content pre code {
  color: #e6e6e6;
}

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

[data-theme="dark"] .tiddler-content th {
  background-color: var(--bg-tertiary);
}

[data-theme="dark"] .tiddler-content tr:nth-child(even) {
  background-color: var(--bg-secondary);
}

[data-theme="dark"] .tiddler-content th,
[data-theme="dark"] .tiddler-content td {
  border-color: var(--border-color);
}

[data-theme="dark"] .screenshot img {
  border-color: var(--border-color);
}

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

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

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

[data-theme="dark"] .back-to-top {
  background-color: var(--accent-color);
}

[data-theme="dark"] .back-to-top:hover {
  background-color: var(--accent-hover);
}

/* Scrollbar styling for dark theme */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

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

/* Selection color */
[data-theme="dark"] ::selection {
  background-color: rgba(77, 171, 247, 0.3);
  color: var(--text-primary);
}

/* Focus styles for accessibility */
[data-theme="dark"] :focus {
  outline-color: var(--accent-color);
}

[data-theme="dark"] .wiki-search input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}

/* Link colors */
[data-theme="dark"] .tiddler-content a {
  color: var(--accent-color);
}

[data-theme="dark"] .tiddler-content a:hover {
  color: var(--accent-hover);
}

/* Blockquote styling */
[data-theme="dark"] .tiddler-content blockquote {
  border-left: 4px solid var(--accent-color);
  background-color: var(--bg-tertiary);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
  color: var(--text-secondary);
}

/* Horizontal rule */
[data-theme="dark"] .tiddler-content hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--spacing-lg) 0;
}

/* Alert/Note boxes */
[data-theme="dark"] .note,
[data-theme="dark"] .warning,
[data-theme="dark"] .tip,
[data-theme="dark"] .danger {
  padding: var(--spacing-md);
  border-radius: 6px;
  margin: var(--spacing-md) 0;
}

[data-theme="dark"] .note {
  background-color: rgba(34, 184, 207, 0.1);
  border-left: 4px solid var(--info-color);
}

[data-theme="dark"] .warning {
  background-color: rgba(255, 212, 59, 0.1);
  border-left: 4px solid var(--warning-color);
}

[data-theme="dark"] .tip {
  background-color: rgba(81, 207, 102, 0.1);
  border-left: 4px solid var(--success-color);
}

[data-theme="dark"] .danger {
  background-color: rgba(255, 107, 107, 0.1);
  border-left: 4px solid var(--danger-color);
}