/* JSON Tree View Styles */

.json-tree {
    font-size: var(--app-font-size) !important;
    line-height: 1.6;
}

.json-node {
    margin-left: 20px;
}

/* Light Mode Syntax Highlighting */
.json-key { color: #ea580c; font-weight: 500; }
.json-string { color: #16a34a; }
.json-number { color: #7c3aed; }
.json-boolean { color: #2563eb; font-weight: 600; }
.json-null { color: #64748b; font-style: italic; } /* Improved contrast from #94a3b8 */
.json-bracket { color: #475569; }

/* Dark Mode Syntax Highlighting */
.dark .json-key { color: #fb923c; }
.dark .json-string { color: #4ade80; }
.dark .json-number { color: #a78bfa; }
.dark .json-boolean { color: #60a5fa; }
.dark .json-null { color: #94a3b8; } /* Improved contrast for dark mode */
.dark .json-bracket { color: #94a3b8; }

/* Type & Index Indicators */
.json-type-hint {
    font-size: 0.85em;
    color: #475569; /* Improved contrast from #64748b */
    font-style: italic;
    margin-left: 8px;
    opacity: 1;
    font-weight: 500;
    user-select: none;
    background: rgba(100, 116, 139, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
}

.dark .json-type-hint {
    color: #cbd5e1; /* Improved contrast from #94a3b8 */
    background: rgba(148, 163, 184, 0.2);
}

.json-index-hint {
    font-size: 0.9em;
    color: #ea580c;
    font-weight: 600;
    margin-right: 8px;
    opacity: 1;
    user-select: none;
    background: rgba(234, 88, 12, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.dark .json-index-hint {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.15);
}

/* Collapsible Nodes */
.collapsible-caret {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    color: #64748b;
    transition: transform 0.2s, color 0.2s;
}

.dark .collapsible-caret {
    color: #94a3b8;
}

.collapsible-caret:hover,
.collapsible-caret:focus {
    color: #0f172a;
}

.collapsible-caret:focus-visible {
    outline: 2px solid #ea580c;
    outline-offset: 1px;
    border-radius: 2px;
}

.dark .collapsible-caret:hover,
.dark .collapsible-caret:focus {
    color: #f8fafc;
}

.dark .collapsible-caret:focus-visible {
    outline-color: #fb923c;
}

.collapsed .collapsible-caret {
    transform: rotate(-90deg);
}

.collapsed .json-children {
    display: none;
}

.collapsed::after {
    content: "...";
    background: #e2e8f0;
    color: #64748b;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 4px;
}

.dark .collapsed::after {
    background: #334155;
    color: #94a3b8;
}

/* Clickable Values */
.json-key,
.json-string,
.json-number,
.json-boolean,
.json-null {
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.json-key:hover,
.json-string:hover,
.json-number:hover,
.json-boolean:hover,
.json-null:hover {
    background-color: rgba(234, 88, 12, 0.1);
}

.dark .json-key:hover,
.dark .json-string:hover,
.dark .json-number:hover,
.dark .json-boolean:hover,
.dark .json-null:hover {
    background-color: rgba(251, 146, 60, 0.15);
}

/* Links */
.json-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}

.json-link:hover {
    text-decoration-style: solid;
}

.json-image-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: help;
}

/* Value wrapper */
.json-value-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Color swatch */
.color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
    vertical-align: middle;
    margin-left: 4px;
}

.dark .color-swatch {
    border-color: rgba(255,255,255,0.2);
}

/* Validation error highlight */
.json-line.has-error {
    position: relative;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 3px;
}

.json-line.has-error::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #dc2626;
    border-radius: 3px 0 0 3px;
}

.dark .json-line.has-error {
    background: rgba(239, 68, 68, 0.15);
}

.validation-error-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 6px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 10px;
    border-radius: 4px;
    cursor: help;
}

.dark .validation-error-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Toggle button active state */
.toggle-active {
    background-color: rgba(234, 88, 12, 0.15) !important;
    color: #ea580c !important;
}

.dark .toggle-active {
    background-color: rgba(251, 146, 60, 0.2) !important;
    color: #fb923c !important;
}

/* Ensure tree container doesn't overflow and push the resizer */
#viewerContainer {
    min-width: 0;
    overflow-x: auto;
}

/* Prevent long strings from breaking the layout */
.json-line {
    white-space: nowrap;
}

.json-string {
    word-break: break-all;
    white-space: pre-wrap;
    max-width: 100%;
}

/* Right panel should properly contain its content */
#rightPanel {
    min-width: 0;
    overflow: hidden;
}