/* Document content specific styling */
.document-content-scroll {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    /* Dynamische scrollbalken - alleen tonen wanneer nodig */
    overflow: auto;
    max-height: 410px;
}

.document-content-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.document-content-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.document-content-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: content-box;
}

.document-content-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    background-clip: content-box;
}

.document-content-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark mode document content scrollbar */
.dark .document-content-scroll {
    scrollbar-color: #4b5563 transparent;
}

.dark .document-content-scroll::-webkit-scrollbar-thumb {
    background: #4b5563;
    background-clip: content-box;
}

.dark .document-content-scroll::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
    background-clip: content-box;
}

/* Enhanced Document Content Styling - Improved Light Mode */
/* Document content container with better light mode colors */
.document-content-container {
    background-color: #f8fafc; /* Lighter slate background for better contrast */
    border: 1px solid #e2e8f0; /* Slightly darker border for better definition */
}

.dark .document-content-container {
    background-color: #111827; /* Keep dark mode as is */
    border: 1px solid #374151;
}

/* JSON Syntax Highlighting - Enhanced for better light mode readability */
.json-syntax-highlight {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    line-height: 1.5;
    color: #1e293b; /* Darker slate for better contrast */
    /* Voorkom tekst terugloop en zorg voor horizontale scroll */
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

.dark .json-syntax-highlight {
    color: #f3f4f6;
}

/* VS Code/PrismJS JSON kleuren - Enhanced for light mode */
.json-property {
    color: #0f766e; /* Darker teal for better contrast */
}

.json-string {
    color: #b45309; /* Darker amber for better contrast */
}

.json-number {
    color: #1d4ed8; /* Darker blue for better contrast */
}

.json-boolean, .json-null {
    color: #7c3aed; /* Darker purple for better contrast */
}

.json-bracket, .json-comma, .json-colon {
    color: #475569; /* Darker slate for better contrast */
}

.json-comment {
    color: #166534; /* Darker green for better contrast */
    font-style: italic;
}

.dark .json-property {
    color: #fff;
}

.dark .json-string {
    color: #c98d75;
}

.dark .json-number {
    color: #b6cfa8;
}

.dark .json-boolean, .dark .json-null {
    color: #569dd6;
}

.dark .json-comma, .dark .json-colon {
    color: #adadad;
}

.dark .json-bracket {
    color: #ddbb12;
}

.dark .json-comment {
    color: #577b48;
}