/*
  Monochrome Dark Theme for Unifieddiff
  Palette: black, gray, white with blue/green/red accents
*/

:root {
  --bg: #0b0f14;
  --bg-2: #0e1319;
  --panel: #11161b;
  --panel-muted: #0f141a;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --border: #2b3037;

  --primary: #3b82f6;    /* blue */
  --primary-strong: #1d4ed8;
  --success: #22c55e;    /* green */
  --error: #ef4444;      /* red */
  --warning: #f59e0b;    /* amber */
}

/* App background and base text */
body {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%) !important;
  color: var(--text);
}

.container {
  background: var(--panel) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

h1 { color: var(--text) !important; font-weight: 500; }
.subtitle { color: var(--muted) !important; }

/* Tabs */
.tabs {
  background: var(--panel-muted) !important;
  border: 1px solid var(--border);
}
.tab { color: var(--muted) !important; }
.tab.active { background: var(--primary) !important; color: #fff !important; }
.tab:hover:not(.active) { background: #151a21 !important; }

/* Clear button */
.clear-btn {
  background: var(--panel-muted) !important;
  border-color: var(--error) !important;
  color: var(--error) !important;
}
.clear-btn:hover {
  background: var(--error) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

/* Labels and helper text */
label { color: var(--text) !important; }
.form-text { color: var(--muted) !important; }

/* JSON Parser Options */
.option-label { color: var(--text) !important; }
.option-label:hover { color: var(--primary) !important; }

/* JSON Parser Results */
.parse-result-success { 
  background: rgba(34, 197, 94, 0.12) !important; 
  border-color: var(--success) !important; 
}
.parse-result-success h4 { color: #d1fae5 !important; }
.parse-info { 
  background: rgba(34, 197, 94, 0.08) !important; 
}
.parse-mode, .parse-types { color: #a7f3d0 !important; }
.parse-output h5 { color: #d1fae5 !important; }
.json-output { 
  background: var(--panel-muted) !important; 
  border-color: var(--border) !important; 
  color: var(--text) !important; 
}
.parse-details { border-color: var(--success) !important; }
.parse-details h5 { color: #d1fae5 !important; }
.object-details span { 
  background: rgba(34, 197, 94, 0.15) !important; 
  color: #a7f3d0 !important; 
}

/* Enhanced Parser Features - Dark Theme */
.auto-detect-notice {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
  border-color: var(--primary) !important;
}
.intermediate-step {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: var(--warning) !important;
}
.intermediate-step h5 { color: #fbbf24 !important; }
.json-intermediate {
  background: var(--panel-muted) !important;
  border-color: var(--warning) !important;
  color: #fcd34d !important;
}

/* Inputs (textarea) */
.textarea-container {
  background: var(--panel-muted) !important;
  border-color: var(--border) !important;
}
.textarea-container:focus-within { border-color: var(--primary) !important; }
.textarea-container.has-error { border-color: var(--error) !important; }
textarea { color: var(--text) !important; }

/* Gutter line numbers */
.line-numbers {
  background: #0e1319 !important;
  border-right: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.line-numbers .error-line { background: var(--error) !important; }
.line-numbers .error-line::after { color: var(--error) !important; }

.error-highlight { background: rgba(239, 68, 68, 0.18) !important; border-color: var(--error) !important; }

/* File upload */
.file-label {
  background: var(--panel-muted) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
.file-label:hover { border-color: var(--primary) !important; background: rgba(59, 130, 246, 0.08) !important; }
.file-label.has-file { border-color: var(--success) !important; background: rgba(34, 197, 94, 0.12) !important; color: #a7f3d0 !important; }

/* Buttons */
.btn {
  background: linear-gradient(45deg, var(--primary), var(--primary-strong)) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35) !important;
}
.btn:hover { box-shadow: 0 10px 30px rgba(59, 130, 246, 0.45) !important; }
.btn:disabled { background: #3a3f47 !important; box-shadow: none !important; }

/* Result notices */
.result { color: var(--text) !important; }
.result.success { background: rgba(34, 197, 94, 0.12) !important; border-color: var(--success) !important; color: #d1fae5 !important; }
.result.error { background: rgba(239, 68, 68, 0.12) !important; border-color: var(--error) !important; color: #fecaca !important; }

/* Enhanced Comparison Display - Dark Theme */
.comparison-result { background: var(--panel) !important; border-color: var(--border) !important; }
.comparison-header { background: var(--panel-muted) !important; border-color: var(--border) !important; }
.comparison-header h3 { color: var(--text) !important; }

/* View Controls */
.view-label { color: var(--muted) !important; }
.view-btn { 
  background: var(--panel-muted) !important; 
  border-color: var(--border) !important; 
  color: var(--text) !important; 
}
.view-btn:hover { 
  border-color: var(--primary) !important; 
  background: rgba(59, 130, 246, 0.1) !important; 
}
.view-btn.active { 
  border-color: var(--primary) !important; 
  background: var(--primary) !important; 
  color: #fff !important; 
}

/* Summary View */
.summary-stats { 
  background: rgba(59, 130, 246, 0.15) !important; 
  border-color: var(--primary) !important; 
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}
.stat-item { 
  color: #93c5fd !important; 
  font-weight: 600 !important;
}
.stat-type { 
  color: var(--muted) !important; 
  font-size: 0.85em !important;
  background: var(--panel) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
}

.diff-group {
  margin-bottom: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.diff-group-header {
  background: var(--panel-muted) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.95em !important;
}

.diff-item { 
  background: var(--panel-muted) !important; 
  border-color: var(--border) !important; 
}
.diff-item:hover { 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; 
  background: var(--panel) !important;
}
.diff-item-header { 
  background: var(--panel-muted) !important; 
  color: var(--text) !important;
}
.diff-item-header:hover { background: #151a21 !important; }
.diff-item.expanded .diff-item-header { background: rgba(59, 130, 246, 0.15) !important; }

.diff-label { color: var(--text) !important; }
.diff-path { 
  background: var(--panel) !important; 
  border-color: var(--border) !important; 
  color: var(--muted) !important; 
}
.diff-content { background: var(--panel) !important; border-color: var(--border) !important; }
.diff-changes { color: var(--text) !important; }

.change-path { color: var(--text) !important; }
.old-value { 
  background: rgba(239, 68, 68, 0.15) !important; 
  border-color: var(--error) !important; 
  color: #fca5a5 !important;
}
.new-value { 
  background: rgba(34, 197, 94, 0.15) !important; 
  border-color: var(--success) !important; 
  color: #86efac !important;
}
.value-label { font-weight: bold !important; }
.old-value .value-label { color: #f87171 !important; }
.new-value .value-label { color: #4ade80 !important; }

.diff-changes .change-value,
.change-value { 
  background: var(--panel-muted) !important; 
  border-color: var(--border) !important; 
  color: var(--text) !important; 
}

.change-item { 
  background: transparent !important;
  border-color: var(--border) !important;
}

/* Ensure all comparison content uses dark theme */
.comparison-result * {
  background-color: inherit;
}

.diff-content *,
.diff-changes *,
.comparison-view * {
  color: inherit;
}

/* Force override any white/light backgrounds */
.diff-content pre,
.diff-changes pre,
.change-value pre {
  background: var(--panel-muted) !important;
  color: var(--text) !important;
}

/* Additional array/object content styling */
.diff-item .diff-content,
.diff-changes,
.change-item,
.change-value {
  background: var(--panel-muted) !important;
  color: var(--text) !important;
}

/* Side-by-Side View */
.side-by-side-container { border-color: var(--border) !important; }
.side-by-side-header { background: var(--panel-muted) !important; border-color: var(--border) !important; }
.side-header { color: var(--text) !important; border-color: var(--border) !important; }
.side-original, .side-modified { border-color: var(--border) !important; }
.side-original pre { 
  background: var(--panel-muted) !important; 
  color: var(--text) !important;
  border-left: 3px solid var(--warning) !important;
}
.side-modified pre { 
  background: var(--panel-muted) !important; 
  color: var(--text) !important;
  border-left: 3px solid var(--primary) !important;
}
.side-original.has-differences pre { 
  background: rgba(239, 68, 68, 0.10) !important; 
  border-left: 3px solid var(--error) !important;
}
.side-modified.has-differences pre { 
  background: rgba(59, 130, 246, 0.10) !important; 
  border-left: 3px solid var(--primary) !important;
}

/* Unified View */
.unified-header { 
  background: var(--panel-muted) !important; 
  color: var(--text) !important; 
}
.unified-section { border-color: var(--border) !important; }
.unified-section-header { 
  background: var(--panel-muted) !important; 
  color: var(--text) !important; 
  border-color: var(--border) !important;
}
.unified-path { 
  background: rgba(59, 130, 246, 0.15) !important; 
  color: #93c5fd !important; 
}
.unified-line.removed { 
  background: rgba(239, 68, 68, 0.15) !important; 
  color: #fca5a5 !important; 
}
.unified-line.added { 
  background: rgba(34, 197, 94, 0.15) !important; 
  color: #86efac !important; 
}
.unified-line.changed { 
  background: rgba(245, 158, 11, 0.15) !important; 
  color: #fbbf24 !important; 
}

/* Tree View */
.tree-header { 
  background: var(--panel-muted) !important; 
  color: var(--text) !important; 
}
.tree-container { 
  background: var(--panel) !important; 
  border-color: var(--border) !important; 
  color: var(--text) !important;
}
.tree-node:hover { background: rgba(255, 255, 255, 0.05) !important; }
.tree-node.changed { 
  background: rgba(245, 158, 11, 0.15) !important; 
  border-color: var(--warning) !important; 
}
.tree-change-details { 
  background: var(--panel-muted) !important; 
  border-color: var(--border) !important; 
}
.tree-old-value { color: #fca5a5 !important; }
.tree-new-value { color: #86efac !important; }

.no-differences { 
  color: var(--muted) !important; 
  text-align: center !important; 
  padding: 20px !important; 
}

/* Legacy diff styles */
.diff-container { background: var(--panel-muted) !important; }
.diff-added { background: rgba(34, 197, 94, 0.10) !important; border-color: var(--success) !important; }
.diff-removed { background: rgba(239, 68, 68, 0.10) !important; border-color: var(--error) !important; }
.diff-changed { background: rgba(245, 158, 11, 0.10) !important; border-color: var(--warning) !important; }
.diff-type { background: rgba(148, 163, 184, 0.10) !important; border-color: #64748b !important; }

/* Loading */
.spinner { border: 3px solid #1f2937 !important; border-top: 3px solid var(--primary) !important; }
.loading p { color: var(--muted) !important; }

/* SEO/content panel */
.seo-content {
  background: var(--panel-muted) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.seo-content h2 { color: var(--text) !important; }
.seo-content h3 { color: #d2d5d9 !important; }
.seo-content p, .seo-content ul, .seo-content ol { color: var(--muted) !important; }
.seo-content strong { color: #d2d5d9 !important; }

/* Enhanced Parser Multi-Format Output - Dark Theme */
.output-formats {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: var(--primary) !important;
}

.format-options {
  color: var(--text) !important;
}

.format-option {
  color: var(--text) !important;
}

.format-option:hover {
  color: var(--primary) !important;
}

.multi-format-outputs {
  background: var(--panel-muted) !important;
}

.format-section {
  background: var(--panel-muted) !important;
  border-color: var(--border) !important;
}

.format-section h5 {
  background: var(--panel-muted) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.output-container {
  background: var(--panel-muted) !important;
}

.js-output {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #fbbf24 !important;
}

.python-output {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #86efac !important;
}

.copy-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.copy-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Responsive tweaks remain consistent; inherit overrides */