/* =========================================================
   JSON VIEWER
   ========================================================= */

.json-viewer-page {
    width: 100%;
    padding: 20px 0 40px;
}

.json-viewer-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.json-viewer-card {
    width: min(1200px, 94%);

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);

    overflow: hidden;
}


/* =========================================================
   URL / MANUAL INPUT HEADER
   ========================================================= */

.json-viewer-input-area {
    background: var(--card);

    padding: 16px;
    margin-bottom: 0;

    border: none;
    border-radius: 0;
    box-shadow: none;

    border-bottom: 1px solid var(--border);
}

.json-viewer-input-area label {
    display: block;

    color: var(--text);
    font-size: 14px;
    font-weight: 600;

    margin-bottom: 8px;
}

.json-url-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

#urlInput {
    flex: 1;

    min-width: 0;
    height: 38px;

    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--bg);
    color: var(--text);

    outline: none;

    font-size: 14px;
}

#urlInput:focus {
    border-color: var(--primary);
}

.json-load-button {
    height: 38px;

    padding: 0 18px;

    border: none;
    border-radius: 8px;

    background: var(--primary);
    color: #fff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .15s ease,
        transform .15s ease;
}

.json-load-button:hover {
    background: var(--primary-dark);
}

.json-load-button:active {
    transform: translateY(1px);
}

.json-manual-label {
    margin-top: 14px;
}


/* =========================================================
   EDITOR MAIN LAYOUT
   ========================================================= */

.json-viewer-editor-layout {
    display: flex;

    width: 100%;

    min-height: 500px;

    background: var(--card);

    border: none;
    border-radius: 0;
    box-shadow: none;

    overflow: hidden;
}


/* =========================================================
   LEFT INPUT PANEL
   ========================================================= */

.json-viewer-input-panel {
    width: 45%;

    min-width: 0;

    border-right: 1px solid var(--border);

    background: var(--card);
}

.json-manual-input {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 500px;

    padding: 14px;

    resize: none;

    border: none;
    outline: none;

    background: var(--card);

    color: var(--text);

    font-family:
        Monaco,
        Menlo,
        Consolas,
        "Courier New",
        monospace;

    font-size: 13px;
    line-height: 1.55;

    box-sizing: border-box;
}

.json-manual-input::placeholder {
    color: var(--text-light);
}


/* =========================================================
   RIGHT OUTPUT PANEL
   ========================================================= */

.json-viewer-output-panel {
    width: 55%;

    min-width: 0;

    background: var(--card);
}

.json-editor-container {
    width: 100%;
    height: 100%;
    min-height: 500px;
}


/* =========================================================
   JSONEDITOR BASE
   ========================================================= */

/*
   Keep JSONEditor native structure/icons.
   Only recolor the toolbar.
*/

#jsoneditor {
    width: 100%;
    height: 100%;

    min-height: 500px;

    font-size: 12px;

    background: var(--card);
}


/* =========================================================
   JSONEDITOR TOOLBAR
   ========================================================= */

#jsoneditor .jsoneditor {
    border: thin solid var(--primary) !important;
}


/*
   Main toolbar
*/

#jsoneditor .jsoneditor-menu {
    background-color: var(--primary) !important;

    color: #fff !important;

    border: thin solid var(--primary) !important;

    min-height: 35px !important;
}


/*
   Keep native JSONEditor buttons/icons
*/

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


/*
   Search area
*/

#jsoneditor .jsoneditor-menu .jsoneditor-search {
    background-color: var(--primary) !important;
    color: #fff !important;
}


/*
   Native toolbar buttons
*/

#jsoneditor .jsoneditor-menu
.jsoneditor-expand-all,

#jsoneditor .jsoneditor-menu
.jsoneditor-collapse-all,

#jsoneditor .jsoneditor-menu
.jsoneditor-sort,

#jsoneditor .jsoneditor-menu
.jsoneditor-transform {
    background-color: var(--primary) !important;
    color: #fff !important;
}


/* =========================================================
   UNDO / REDO
   ========================================================= */


/*
   Unavailable / muted
*/

#jsoneditor .jsoneditor-menu .jsoneditor-undo,
#jsoneditor .jsoneditor-menu .jsoneditor-redo {

    background-color: var(--primary) !important;

    color: #fff !important;

    opacity: .35 !important;

    border-color: transparent !important;

    box-shadow: none !important;

    transition:
        opacity .15s ease,
        background-color .15s ease;
}


/*
   Available
*/

#jsoneditor .jsoneditor-menu
.jsoneditor-undo.json-history-available,

#jsoneditor .jsoneditor-menu
.jsoneditor-redo.json-history-available {

    background-color: var(--primary) !important;

    color: #fff !important;

    opacity: 1 !important;

    border-color: transparent !important;

    box-shadow: none !important;
}


/*
   Available hover
*/

#jsoneditor .jsoneditor-menu
.jsoneditor-undo.json-history-available:hover,

#jsoneditor .jsoneditor-menu
.jsoneditor-redo.json-history-available:hover {

    background-color: var(--primary-dark) !important;

    opacity: 1 !important;
}


/*
   Native disabled state
*/

#jsoneditor .jsoneditor-menu
.jsoneditor-undo:disabled,

#jsoneditor .jsoneditor-menu
.jsoneditor-redo:disabled,

#jsoneditor .jsoneditor-menu
.jsoneditor-undo.jsoneditor-disabled,

#jsoneditor .jsoneditor-menu
.jsoneditor-redo.jsoneditor-disabled {

    background-color: var(--primary) !important;

    color: #fff !important;

    opacity: .35 !important;

    border-color: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   JSONEDITOR SEARCH
   ========================================================= */

#jsoneditor .jsoneditor-search input {
    background: #fff !important;
}


/* =========================================================
   JSONEDITOR TREE AREA
   ========================================================= */

#jsoneditor .jsoneditor-tree {
    background-color: var(--card) !important;

    color: var(--text) !important;
}


/* =========================================================
   JSONEDITOR STATUS / BOTTOM BAR
   ========================================================= */

#jsoneditor .jsoneditor-statusbar {
    background: #eeeeee !important;

    color: #777 !important;

    border-top: 1px solid #ddd !important;
}


/* =========================================================
   ERROR
   ========================================================= */

.json-viewer-error {
    display: none;

    margin-top: 10px;

    padding: 10px 12px;

    border-radius: 8px;

    background: #fee2e2;

    color: #991b1b;

    font-size: 13px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark .json-viewer-input-area,
body.dark .json-viewer-editor-layout,
body.dark .json-viewer-input-panel,
body.dark .json-viewer-output-panel,
body.dark .json-manual-input,
body.dark #jsoneditor {
    background: var(--card);
}

body.dark #jsoneditor .jsoneditor-tree {
    background: var(--card) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .json-viewer-editor-layout {
        flex-direction: column;

        min-height: auto;
    }

    .json-viewer-input-panel,
    .json-viewer-output-panel {
        width: 100%;
    }

    .json-viewer-input-panel {
        border-right: none;

        border-bottom: 1px solid var(--border);
    }

    .json-manual-input {
        min-height: 300px;
    }

    .json-editor-container,
    #jsoneditor {
        min-height: 450px;
    }
}


@media (max-width: 520px) {

    .json-viewer-page {
        padding-top: 10px;
    }

    .json-viewer-card {
        width: 96%;
    }

    .json-viewer-input-area {
        padding: 12px;

        border-radius: 0;
    }

    .json-viewer-editor-layout {
        border-radius: 0;
    }

    .json-url-row {
        flex-direction: column;
    }

    #urlInput {
        width: 100%;
    }

    .json-load-button {
        width: 100%;
    }
}