.json-toggle { cursor: pointer; display: inline-block; margin: 0.25rem 0; font-weight: 600; }
.json-brace { color: #333; }
.json-count { color: #6c757d; margin: 0 0.25rem; font-weight: 500; }
.json-container { margin-left: 0.5rem; }
.json-collapsible { margin-left: 0.75rem; display: none; }
.json-collapsible.open { display: block; }
.json-pair { margin: 0.15rem 0; display: flex; align-items: flex-start; gap: 0.25rem; flex-wrap: wrap; }
.json-key.json-property { color: #0d6efd; font-weight: 600; }
.json-key.json-index { color: #6c757d; font-weight: 600; }
.json-colon { color: #333; }
.json-string { color: #b5dfef; }
.json-number { color: #92a0bf; }
.json-boolean { color: #098658; }
.json-null { color: #6c757d; font-style: italic; }
.json-value { white-space: pre-wrap; }

/* smaller collapse arrow for .json-toggle
*/
.json-toggle {
    position: relative;
    padding-left: 1.25rem; /* space for the arrow */
}

/* small triangle arrow */
.json-toggle::before {
    content: '\25B6'; /* right-pointing triangle */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem; /* reduce arrow size (adjust as needed) */
    color: #6c757d;
    line-height: 1;
    transition: transform .15s ease, color .15s ease;
    pointer-events: none;
}

/* rotate when open */
.json-toggle.open::before,
.json-toggle[aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(90deg);
    color: #495057;
}

/* make the JSON output resizable both horizontally and vertically */
#jsonOutput1.resizable {
    resize: both;            /* allow manual horizontal & vertical resizing */
    overflow: auto;          /* show scrollbars when content overflows */
    min-width: 240px;        /* reasonable minimum width */
    min-height: 150px;       /* reasonable minimum height */
    width: 100%;             /* initial width fits column */
    height: 320px;           /* initial height */
    max-width: none;         /* allow expanding beyond container if needed */
    box-sizing: border-box;  /* include padding/border in size calculations */
    padding: 0.75rem;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    white-space: pre-wrap;   /* keep long lines readable */
}

/* optional: ensure layout doesn't clip the resized element */
.json-output-wrapper, .col-md-6 {
    overflow: visible;
}