/*
 * NVR JSONEditor overrides
 * Dark mode + layout fixes for jsoneditor.js
 */

/* ── Layout fix: context menu text padding ──
   Vendor CSS memberi button `padding: 0 8px 0 0` yang bikin spacing
   kanan tidak simetris (8px button + 24px text = 32px) vs kiri (24px icon).
   Reset button padding jadi 0 agar kiri-kanan seimbang. */
.jsoneditor-contextmenu .jsoneditor-menu button {
    padding: 0;
}
.jsoneditor-contextmenu .jsoneditor-text {
    padding: 4px 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin {
    padding: 4px 24px;
}

html.dark .jsoneditor {
    border-color: #475569;
}
html.dark .jsoneditor-frame {
    background-color: #1e293b;
}
html.dark .jsoneditor-tree {
    background-color: #1e293b;
}
html.dark .jsoneditor textarea.jsoneditor-text {
    background-color: #0f172a;
    color: #e2e8f0;
}
html.dark div.jsoneditor-field,
html.dark div.jsoneditor-value,
html.dark div.jsoneditor td,
html.dark div.jsoneditor th,
html.dark div.jsoneditor textarea,
html.dark pre.jsoneditor-preview,
html.dark .jsoneditor-schema-error,
html.dark .jsoneditor-popover {
    color: #e2e8f0;
}
html.dark div.jsoneditor-value.jsoneditor-string {
    color: #4ade80;
}
html.dark div.jsoneditor-value.jsoneditor-number {
    color: #f87171;
}
html.dark div.jsoneditor-value.jsoneditor-boolean {
    color: #fb923c;
}
html.dark div.jsoneditor-value.jsoneditor-null {
    color: #60a5fa;
}
html.dark div.jsoneditor-value.jsoneditor-url,
html.dark a.jsoneditor-value.jsoneditor-url {
    color: #4ade80;
}
html.dark a.jsoneditor-value.jsoneditor-url:hover,
html.dark a.jsoneditor-value.jsoneditor-url:focus {
    color: #f87171;
}
html.dark .jsoneditor-navigation-bar {
    background-color: #0f172a;
    border-bottom-color: #475569;
    color: #94a3b8;
}
html.dark .jsoneditor-statusbar {
    background-color: #0f172a;
    border-top-color: #475569;
    color: #94a3b8;
}
html.dark .jsoneditor-search input {
    color: #e2e8f0;
    background-color: #0f172a;
}
html.dark .jsoneditor-results {
    color: #cbd5e1;
}
html.dark div.jsoneditor-readonly {
    color: #64748b;
}
html.dark div.jsoneditor-empty {
    border-color: #475569;
}
html.dark div.jsoneditor-field.jsoneditor-empty::after,
html.dark div.jsoneditor-value.jsoneditor-empty::after {
    color: #475569;
}
html.dark div.jsoneditor-default {
    color: #64748b;
}
html.dark div.jsoneditor td.jsoneditor-separator {
    color: #64748b;
}
html.dark .jsoneditor-anchor .jsoneditor-contextmenu {
    z-index: 100;
}
html.dark .jsoneditor-contextmenu .jsoneditor-menu {
    background-color: #1e293b;
    border-color: #475569;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
}
html.dark .jsoneditor-contextmenu .jsoneditor-menu button {
    color: #cbd5e1;
}
html.dark .jsoneditor-contextmenu .jsoneditor-menu button:hover,
html.dark .jsoneditor-contextmenu .jsoneditor-menu button:focus {
    color: #f1f5f9;
    background-color: #334155;
}
html.dark .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
html.dark .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover,
html.dark .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus {
    color: #ffffff;
    background-color: #dc2626;
}
html.dark .jsoneditor-contextmenu .jsoneditor-separator {
    border-top-color: #475569;
}
/* SVG sprite icons — invert for dark bg visibility */
html.dark .jsoneditor-contextmenu .jsoneditor-icon,
html.dark .jsoneditor-contextmenu button .jsoneditor-expand {
    filter: invert(0.85);
}
/* Context-menu expand button background */
html.dark .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
    background-color: transparent;
    border-left-color: #475569;
}
html.dark .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand:hover {
    background-color: #334155;
}
/* Sub-menu (nested) */
html.dark .jsoneditor-contextmenu .jsoneditor-menu li ul.jsoneditor-menu {
    background-color: #1e293b;
    border-color: #475569;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
html.dark .jsoneditor .autocomplete.dropdown {
    background-color: #1e293b;
    border-color: #475569;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
}
html.dark .jsoneditor .autocomplete.dropdown .item {
    color: #e2e8f0;
}
html.dark .jsoneditor .autocomplete.dropdown .item.hover {
    background-color: #334155;
}
html.dark .jsoneditor .autocomplete.hint {
    color: #64748b;
}
html.dark tr.jsoneditor-highlight,
html.dark tr.jsoneditor-selected {
    background-color: #334155;
}
html.dark div.jsoneditor-field[contenteditable=true]:focus,
html.dark div.jsoneditor-field[contenteditable=true]:hover,
html.dark div.jsoneditor-value[contenteditable=true]:focus,
html.dark div.jsoneditor-value[contenteditable=true]:hover,
html.dark div.jsoneditor-field.jsoneditor-highlight,
html.dark div.jsoneditor-value.jsoneditor-highlight {
    background-color: #374151;
    border-color: #6366f1;
}
html.dark div.jsoneditor-field.jsoneditor-highlight-active,
html.dark div.jsoneditor-field.jsoneditor-highlight-active:focus,
html.dark div.jsoneditor-field.jsoneditor-highlight-active:hover,
html.dark div.jsoneditor-value.jsoneditor-highlight-active,
html.dark div.jsoneditor-value.jsoneditor-highlight-active:focus,
html.dark div.jsoneditor-value.jsoneditor-highlight-active:hover {
    background-color: #4f46e5;
    border-color: #6366f1;
}
html.dark div.jsoneditor-tree div.jsoneditor-show-more {
    background-color: #334155;
    color: #94a3b8;
}
html.dark div.jsoneditor-tree div.jsoneditor-show-more a {
    color: #94a3b8;
}
html.dark div.jsoneditor-tree div.jsoneditor-show-more a:hover,
html.dark div.jsoneditor-tree div.jsoneditor-show-more a:focus {
    color: #f87171;
}
html.dark div.jsoneditor-tree div.jsoneditor-date {
    background: #475569;
    color: #e2e8f0;
}
html.dark div.jsoneditor-tree div.jsoneditor-color {
    border-color: #64748b;
}
html.dark div.jsoneditor-tree button.jsoneditor-button:focus {
    background-color: #334155;
    outline-color: #475569;
}
html.dark .jsoneditor-modal {
    background-color: #1e293b;
    color: #e2e8f0;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
}
html.dark .jsoneditor-modal .pico-modal-header {
    background-color: #2563eb;
}
html.dark .jsoneditor-modal .pico-close {
    color: #ffffff;
}
html.dark .jsoneditor-modal table th,
html.dark .jsoneditor-modal table td {
    color: #e2e8f0;
}
html.dark .jsoneditor-modal input,
html.dark .jsoneditor-modal select,
html.dark .jsoneditor-modal textarea,
html.dark .jsoneditor-modal input[type=text],
html.dark .jsoneditor-modal input[type=text]:focus,
html.dark .jsoneditor-modal #query {
    background-color: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}
html.dark .jsoneditor-modal input[disabled] {
    background-color: #1e293b;
    color: #64748b;
}
html.dark .jsoneditor-modal input[type=button],
html.dark .jsoneditor-modal input[type=submit] {
    background-color: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
html.dark .jsoneditor-modal .jsoneditor-transform-preview {
    background-color: #0f172a;
}
html.dark .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
html.dark .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
    background-color: #2563eb;
    border-color: #3b82f6;
}
html.dark .jsoneditor-modal a {
    color: #60a5fa;
}
html.dark .jsoneditor-modal .selectr-selected {
    border-color: #475569;
    background-color: #0f172a;
    color: #e2e8f0;
}
html.dark .jsoneditor-modal .selectr-selected .selectr-tag {
    background-color: #2563eb;
}
html.dark .jsoneditor-modal .jsoneditor-select-wrapper:after {
    border-top-color: #94a3b8;
}
html.dark .jsoneditor-modal .jsoneditor-jmespath-label {
    color: #60a5fa;
}
html.dark div.jsoneditor.busy pre.jsoneditor-preview {
    background-color: #0f172a;
    color: #64748b;
}
html.dark div.jsoneditor-busy span {
    background-color: #374151;
    border-color: #6366f1;
    color: #e2e8f0;
}
html.dark .jsoneditor .jsoneditor-text-errors tr {
    background-color: #374151;
}
html.dark .jsoneditor .jsoneditor-text-errors tr.parse-error {
    background-color: rgba(220, 38, 38, 0.3);
}
html.dark .jsoneditor .jsoneditor-text-errors td {
    color: #e2e8f0;
}
html.dark .jsoneditor .jsoneditor-additional-errors {
    color: #94a3b8;
    background-color: #334155;
}
html.dark .jsoneditor-menu {
    background-color: #1d4ed8;
    border-bottom-color: #2563eb;
}
html.dark .jsoneditor-menu > button,
html.dark .jsoneditor-menu > .jsoneditor-modes > button {
    color: #ffffff;
}
html.dark .jsoneditor-treepath {
    color: #cbd5e1;
}
html.dark .jsoneditor-treepath.show-all {
    background-color: #1e293b;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
}
html.dark .jsoneditor-treepath .jsoneditor-treepath-show-all-btn {
    background-color: #1e293b;
}