/* JSON Display Styles */
.json-display-formatted {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 0;
    max-height: 600px;
    overflow-y: auto;
    font-size: 0.875rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

.json-display-raw {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 0;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
    font-size: 0.875rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
}

.json-display-formatted code,
.json-display-raw code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* Additional JSON editor styles for forms */
.json-editor {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
}

.json-editor.is-valid {
    border-color: #198754;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 1.38 1.38c.58.58 1.52.58 2.1 0l3.28-3.28c.58-.58.58-1.52 0-2.1L8.54 1.3c-.58-.58-1.52-.58-2.1 0L3.66 4.08 2.28 2.7c-.58-.58-1.52-.58-2.1 0-.58.58-.58 1.52 0 2.1l2.14 2.14c.58.58 1.52.58 2.1 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.json-editor.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23dc3545' d='M7.938 2.016c.002.03.002.06 0 .09L6.012 6.96c-.024.043-.06.074-.103.09-.043.016-.09.016-.133 0-.043-.016-.079-.047-.103-.09L3.747 2.106c-.002-.03-.002-.06 0-.09.024-.043.06-.074.103-.09.043-.016.09-.016.133 0 .043.016.079.047.103.09L5.938 5.91 7.832 2.016c.024-.043.06-.074.103-.09.043-.016.09-.016.133 0 .043.016.079.047.103.09z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Data size badges */
.data-size-badge {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: normal;
}

/* JSON action buttons */
.json-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.json-actions .btn {
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .json-display-formatted,
    .json-display-raw {
        font-size: 0.75rem;
        padding: 0.75rem;
        max-height: 400px;
    }
    
    .json-actions {
        justify-content: center;
    }
    
    .json-actions .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Print styles */
@media print {
    .json-display-formatted,
    .json-display-raw {
        border: 1px solid #000;
        background: white;
        max-height: none;
        overflow: visible;
        page-break-inside: avoid;
    }
}