/* JSON Converter - Tree View Styles */

/* ===== 双栏面板容器 ===== */
.json-panel {
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

/* ===== 工具栏 ===== */
.json-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative !important;
  overflow: visible !important;
  z-index: 200 !important;
}
.dark .json-toolbar {
  border-bottom-color: #374151;
  background: #1f2937;
}
.json-toolbar-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-right: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.dark .json-toolbar-label { color: #9ca3af; }

/* Toolbar buttons */
.json-tool-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  color: #4b5563;
  background: transparent;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}
.json-tool-btn:hover {
  background: #e5e7eb;
  color: #111827;
}
.dark .json-tool-btn { color: #d1d5db; }
.dark .json-tool-btn:hover { background: #374151; color: #f9fafb; }
.json-tool-btn--active {
  background: #eff6ff !important;
  color: #2563eb !important;
}
.dark .json-tool-btn--active {
  background: rgba(37,99,235,0.15) !important;
  color: #60a5fa !important;
}
.json-tool-btn--sep {
  width: 1px;
  height: 16px;
  background: #e5e7eb;
  margin: 0 4px;
  flex-shrink: 0;
}
.dark .json-tool-btn--sep { background: #374151; }
.json-tool-btn--spacer {
  flex: 1;
  min-width: 16px;
}

/* ===== 文本输入区 ===== */
.json-textarea-wrapper {
  flex: 1;
  position: relative;
  min-height: 400px;
}
.json-textarea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 28px; /* leave space for status bar */
  width: 100%;
  padding: 16px;
  font-size: 12px;
  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  line-height: 1.6;
  background: transparent;
  color: #1f2937;
  border: none;
  outline: none;
  resize: none;
  tab-size: 2;
  overflow: auto;
}
.dark .json-textarea { color: #f3f4f6; }
.json-textarea::placeholder { color: #9ca3af; }

/* ===== 树视图 / 代码视图 ===== */
.json-view-wrapper {
  flex: 1;
  position: relative;
  min-height: 400px;
  overflow: hidden;
}
.json-tree-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 28px;
  overflow: auto;
  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  background: #fff;
  color: #1f2937;
}
.dark .json-tree-view { background: #0f172a; color: #e5e7eb; }
.json-code-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 28px;
  overflow: auto;
  padding: 16px;
  font-size: 12px;
  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  line-height: 1.6;
  white-space: pre;
  background: #fff;
  color: #1f2937;
  margin: 0;
}
.dark .json-code-view { background: #0f172a; color: #e5e7eb; }

/* ===== 状态栏 ===== */
.json-statusbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 11px;
  color: #9ca3af;
  background: rgba(255,255,255,0.9);
  border-top: 1px solid #f3f4f6;
  backdrop-filter: blur(4px);
}
.dark .json-statusbar {
  background: rgba(15,23,42,0.9);
  border-top-color: #374151;
  color: #6b7280;
}
.json-statusbar .ok { color: #059669; }
.dark .json-statusbar .ok { color: #34d399; }
.json-statusbar .err { color: #dc2626; }
.dark .json-statusbar .err { color: #f87171; }

/* ===== 树视图内容 ===== */
.json-tree-inner {
  counter-reset: line;
  padding: 8px 0;
}
.json-tree-line {
  display: flex;
  align-items: flex-start;
  padding: 0 12px;
  min-height: 20px;
}
.json-tree-line:hover { background: rgba(59,130,246,0.05); }
.dark .json-tree-line:hover { background: rgba(59,130,246,0.1); }

/* 行号 */
.json-tree-line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 12px;
  margin-right: 8px;
  color: #9ca3af;
  user-select: none;
  border-right: 1px solid #f3f4f6;
}
.dark .json-tree-line::before {
  color: #6b7280;
  border-right-color: #374151;
}

/* 树节点 */
.json-tree-node {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 缩进 */
.json-indent-0 { padding-left: 0; }
.json-indent-1 { padding-left: 16px; }
.json-indent-2 { padding-left: 32px; }
.json-indent-3 { padding-left: 48px; }
.json-indent-4 { padding-left: 64px; }
.json-indent-5 { padding-left: 80px; }
.json-indent-6 { padding-left: 96px; }

/* 折叠箭头 */
.json-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  cursor: pointer;
  user-select: none;
  color: #6b7280;
  transition: transform 120ms ease;
  flex-shrink: 0;
  margin-right: 4px;
  font-size: 10px;
}
.json-toggle:hover { color: #2563eb; }
.dark .json-toggle:hover { color: #60a5fa; }
.json-toggle.collapsed { transform: rotate(-90deg); }
.json-toggle.leaf { visibility: hidden; }

/* 语法高亮 */
.json-key { color: #1f2937; font-weight: 500; }
.dark .json-key { color: #f3f4f6; }
.json-colon { color: #9ca3af; margin: 0 2px; }
.json-string { color: #059669; }
.dark .json-string { color: #34d399; }
.json-number { color: #7c3aed; }
.dark .json-number { color: #c4b5fd; }
.json-boolean { color: #d97706; }
.dark .json-boolean { color: #fbbf24; }
.json-null { color: #6b7280; font-style: italic; }
.json-punct { color: #9ca3af; }
.json-indicator { color: #9ca3af; font-size: 11px; margin-left: 2px; }
.json-summary { color: #9ca3af; font-size: 11px; margin-left: 6px; font-style: italic; }

/* ===== 更多下拉菜单 ===== */
.json-dropdown { position: relative; flex-shrink: 0; z-index: 100; }
.json-dropdown-toggle { display: inline-flex; align-items: center; }
.json-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15);
  padding: 6px;
  z-index: 1000;
  display: none;
}
.json-dropdown-menu.is-open { display: block; animation: jsonFadeIn 120ms ease; }
.json-dropdown-menu.is-open.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.dark .json-dropdown-menu {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
@keyframes jsonFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.json-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  user-select: none;
  transition: background-color 100ms ease, color 100ms ease;
}
.json-dropdown-item:hover {
  background: #eff6ff;
  color: #2563eb;
}
.dark .json-dropdown-item { color: #d1d5db; }
.dark .json-dropdown-item:hover { background: rgba(37,99,235,0.12); color: #60a5fa; }
.json-dropdown-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.json-dropdown-sep {
  height: 1px;
  background: #f3f4f6;
  margin: 4px 2px;
}
.dark .json-dropdown-sep { background: #374151; }
.json-dropdown-item--check { cursor: pointer; }
.json-dropdown-item--check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.json-checkbox-mock {
  width: 14px;
  height: 14px;
  margin-left: auto;
  border-radius: 3px;
  border: 1.5px solid #d1d5db;
  position: relative;
  flex-shrink: 0;
}
.json-dropdown-item--check input[type="checkbox"]:checked ~ .json-checkbox-mock {
  background: #2563eb;
  border-color: #2563eb;
}
.json-dropdown-item--check input[type="checkbox"]:checked ~ .json-checkbox-mock::after {
  content: '✓';
  color: #fff;
  font-size: 10px;
  position: absolute;
  top: -1px;
  left: 2px;
}

/* ===== 设置面板 ===== */
.json-settings-panel {
  position: absolute;
  top: 50px;
  right: 12px;
  width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.18);
  z-index: 70;
  overflow: hidden;
  animation: jsonFadeIn 150ms ease;
}
.dark .json-settings-panel {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.5);
}
.json-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.dark .json-settings-header {
  background: #111827;
  border-bottom-color: #374151;
  color: #f9fafb;
}
.json-settings-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.json-settings-close:hover { color: #374151; }
.dark .json-settings-close:hover { color: #f3f4f6; }
.json-settings-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}
.json-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #374151;
}
.dark .json-settings-row { color: #d1d5db; }
.json-settings-row > label {
  width: 64px;
  flex-shrink: 0;
  font-weight: 500;
  color: #6b7280;
}
.dark .json-settings-row > label { color: #9ca3af; }
.json-settings-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.json-size-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.json-size-btn:hover { background: #f3f4f6; }
.dark .json-size-btn { background: #111827; border-color: #374151; color: #d1d5db; }
.dark .json-size-btn:hover { background: #374151; }
.json-size-label {
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.json-select {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  outline: none;
}
.json-select:focus { border-color: #2563eb; }
.dark .json-select { background: #111827; border-color: #374151; color: #d1d5db; }
.json-color-row { display: flex; align-items: center; gap: 6px; flex: 1; }
.json-color-picker {
  width: 28px;
  height: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: #fff;
}
.dark .json-color-picker { border-color: #374151; background: #111827; }
.json-hex-input {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  color: #374151;
  font-family: monospace;
  outline: none;
}
.json-hex-input:focus { border-color: #2563eb; }
.dark .json-hex-input { background: #111827; border-color: #374151; color: #d1d5db; }
.json-settings-presets {
  flex-direction: column;
  align-items: flex-start;
}
.json-settings-presets > label { width: auto; }
.json-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.json-preset {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 120ms ease;
}
.json-preset:hover { transform: translateY(-1px); }
.json-preset--light { background: #f3f4f6; color: #374151; }
.json-preset--dark { background: #1f2937; color: #f3f4f6; }
.json-preset--solarized { background: #fdf6e3; color: #586e75; }
.json-preset--github { background: #f6f8fa; color: #24292e; }
.json-settings-actions { justify-content: flex-end; }
.json-settings-actions .json-tool-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
}
.dark .json-settings-actions .json-tool-btn {
  border-color: #374151;
  background: #111827;
}

/* 行号显示/隐藏 */
.json-tree-line.no-line-number::before { display: none; }

/* 当下拉菜单打开时，禁用 textarea 指针事件以避免点击拦截 */
body:has(.json-dropdown-menu.is-open) .json-textarea {
  pointer-events: none !important;
}

/* ===== 历史记录面板 ===== */
.json-history-panel {
  position: absolute;
  top: 50px;
  right: 12px;
  width: 360px;
  max-height: 420px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.18);
  z-index: 70;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: jsonFadeIn 150ms ease;
}
.dark .json-history-panel {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.5);
}
.json-history-body {
  overflow-y: auto;
  max-height: 360px;
  padding: 6px;
}
.json-history-body::-webkit-scrollbar { width: 6px; }
.json-history-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dark .json-history-body::-webkit-scrollbar-thumb { background: #4b5563; }
.json-history-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid transparent;
}
.json-history-item:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.dark .json-history-item:hover {
  background: #111827;
  border-color: #374151;
}
.json-history-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.json-history-time {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
}
.json-history-chars {
  font-size: 10px;
  color: #d1d5db;
}
.dark .json-history-chars { color: #6b7280; }
.json-history-preview {
  font-size: 12px;
  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.dark .json-history-preview { color: #9ca3af; }
.json-history-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #d1d5db;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 120ms ease;
}
.json-history-item:hover .json-history-del { opacity: 1; }
.json-history-del:hover { color: #ef4444; background: #fef2f2; }
.dark .json-history-del:hover { color: #f87171; background: rgba(239,68,68,0.15); }
.json-history-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}