.json-editor-page {
    background-color: #1e1e1e;
    min-height: 100vh;
    color: #d4d4d4;
}

.editor-container {
    height: calc(100vh - 280px);
    min-height: 500px;
}

.editor-panel {
    width: calc(50% - 50px);
    background-color: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-toolbar {
    border-bottom: 1px solid #333;
    background-color: #252526;
}

.editor-wrapper {
    flex: 1;
    overflow: hidden;
}

.resize-handle {
    width: 100px;
    cursor: col-resize;
    background-color: #1e1e1e;
    flex-shrink: 0;
    padding: 0 10px;
}

.resize-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resize-bar {
    width: 30px;
    height: 4px;
    background-color: #666;
    border-radius: 2px;
}

.btn-small {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    min-width: 60px;
}

.file-name {
    line-height: 1.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* JSONEditor Dark Theme Overrides */
.jsoneditor {
    background: #1e1e1e !important;
    border: none !important;
    box-shadow: none !important;
    height: 100% !important;
}

.jsoneditor-menu {
    background: var(--ufs-accent) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.jsoneditor-menu > button {
    color: #fff !important;
}

.jsoneditor-menu > button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.jsoneditor-tree {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

.jsoneditor-navigation-bar {
    background: #252526 !important;
    color: #d4d4d4 !important;
    border: none !important;
}

.jsoneditor-navigation-bar.nav-bar-empty {
    background: #252526 !important;
    color: #d4d4d4 !important;
}

.jsoneditor-tree table {
    background: #1e1e1e !important;
}

.jsoneditor-value.jsoneditor-string {
    color: #ffffff !important;
}

.jsoneditor-value.jsoneditor-number {
    color: #d19a66 !important;
}

.jsoneditor-value.jsoneditor-boolean {
    color: var(--ufs-accent) !important;
}

.jsoneditor-value.jsoneditor-null {
    color: #569cd6 !important;
}

.jsoneditor-field {
    color: var(--ufs-accent) !important;
}

.jsoneditor-punctuation {
    color: #abb2bf !important;
}

.jsoneditor-extra-data {
    color: var(--ufs-accent) !important;
}

.jsoneditor-count {
    color: var(--ufs-accent) !important;
}

.jsoneditor > .jsoneditor-search {
    color: var(--ufs-accent) !important;
}

.jsoneditor td.jsoneditor-tree button {
    color: var(--ufs-accent) !important;
}

.jsoneditor-collapse,
.jsoneditor-expand {
    color: var(--ufs-accent) !important;
}

.jsoneditor td.jsoneditor-tree button svg {
    fill: #ffffff !important;
}

div.jsoneditor-search {
    background: #333 !important;
    border: 1px solid #555 !important;
}

div.jsoneditor-search input {
    background: #333 !important;
    color: #fff !important;
    border: none !important;
}

div.jsoneditor-search button {
    color: #fff !important;
}

div.jsoneditor-search .jsoneditor-button svg {
    fill: #fff !important;
}

.jsoneditor-frame {
    background: #333 !important;
}

.jsoneditor td {
    border: transparent !important;
    outline: none !important;
}

.jsoneditor-tree tr:hover,
.jsoneditor-tree tr:hover td,
.jsoneditor-tree .jsoneditor-selected,
.jsoneditor-tree .jsoneditor-selected td,
.jsoneditor-row:hover,
.jsoneditor-row:hover td,
.jsoneditor-selected,
.jsoneditor-selected td,
.jsoneditor-field:hover,
.jsoneditor-value:hover {
    background: #444444 !important;
    outline: none !important;
}

.jsoneditor td.jsoneditor-focused,
.jsoneditor td:focus,
.jsoneditor-row.jsoneditor-active,
.jsoneditor-row.jsoneditor-active td,
.jsoneditor-field:focus,
.jsoneditor-value:focus {
    background: #444444 !important;
    outline: none !important;
}

/* Code mode (Ace editor) dark theme */
.jsoneditor-mode-code .jsoneditor-outer,
.jsoneditor-mode-text .jsoneditor-outer {
    background: #1e1e1e !important;
}

.ace-jsoneditor {
    background: #1e1e1e !important;
}

.ace-jsoneditor .ace_gutter {
    background: #252526 !important;
    color: #858585 !important;
}

.ace-jsoneditor .ace_scroller {
    background: #1e1e1e !important;
}

.ace-jsoneditor .ace_content {
    background: #1e1e1e !important;
}

.ace-jsoneditor .ace_marker-layer .ace_active-line {
    background: #333 !important;
}

.ace-jsoneditor .ace_gutter-active-line {
    background: #333 !important;
}

.ace-jsoneditor .ace_cursor {
    color: #fff !important;
}

.ace-jsoneditor .ace_string {
    color: #ce9178 !important;
}

.ace-jsoneditor .ace_constant.ace_numeric {
    color: #b5cea8 !important;
}

.ace-jsoneditor .ace_constant.ace_language {
    color: #569cd6 !important;
}

.ace-jsoneditor .ace_variable {
    color: var(--ufs-accent) !important;
}

/* Status bar */
.jsoneditor-statusbar {
    background: #252526 !important;
    border-top: 1px solid #333 !important;
    color: #888 !important;
}

/* Context menu */
.jsoneditor-contextmenu {
    background: #252526 !important;
    border: 1px solid #444 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.jsoneditor-contextmenu .jsoneditor-menu li button {
    color: #d4d4d4 !important;
    background: transparent !important;
}

.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
    background: #444 !important;
    color: #fff !important;
}

.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover {
    background: #444 !important;
}

/* Modal dialogs */
.jsoneditor-modal {
    background: #252526 !important;
    border: 1px solid #444 !important;
    color: #d4d4d4 !important;
}

.jsoneditor-modal input,
.jsoneditor-modal select,
.jsoneditor-modal textarea {
    background: #1e1e1e !important;
    border: 1px solid #444 !important;
    color: #d4d4d4 !important;
}

.jsoneditor-modal .pico-modal-header {
    background: var(--ufs-accent) !important;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .editor-container {
        flex-direction: column;
        height: auto;
    }

    .editor-panel {
        width: 100% !important;
        height: 400px;
    }

    .resize-handle {
        width: 100%;
        height: 60px;
        flex-direction: row !important;
        cursor: default;
    }

    .resize-bars {
        display: none;
    }
}