/**
 * JSON Tree Viewer - Dark Theme Overrides
 * Custom styling to make json-tree-viewer compatible with ERNC dark theme
 * Overrides the default light theme colors with dark theme appropriate colors
 */

/* === CONTAINER AND BACKGROUND STYLES === */
.jsontree_bg {
    background: var(--panel-secondary) !important; /* #262640 */
}

.jsontree_tree {
    background: var(--panel-secondary) !important; /* #262640 */
    color: var(--text-primary) !important; /* #ffffff */
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important; /* 14px */
    border: 1px solid var(--border-primary) !important; /* #3a3a5c */
    border-radius: var(--radius-md) !important; /* 8px */
    padding: var(--space-md) !important; /* 16px */
    margin: 0 !important;
}

/* === CHILD NODES CONTAINER === */
.jsontree_child-nodes {
    margin-left: var(--space-xl) !important; /* 32px - better indentation */
    margin-bottom: var(--space-sm) !important; /* 8px */
    line-height: 1.6 !important;
    border-left: 1px solid var(--border-muted) !important; /* #2a2a42 */
    padding-left: var(--space-md) !important; /* 16px */
}

/* === LABEL STYLES (JSON KEYS) === */
.jsontree_label-wrapper {
    margin-right: var(--space-sm) !important; /* 8px */
}

.jsontree_label {
    color: var(--text-primary) !important; /* #ffffff - highly visible white */
    font-weight: var(--font-weight-semibold) !important; /* 600 */
    background: transparent !important;
    padding: var(--space-xs) var(--space-sm) !important; /* 4px 8px */
    border-radius: var(--radius-sm) !important; /* 4px */
    transition: all var(--transition-fast) !important;
    cursor: pointer !important;
    position: relative !important;
}

.jsontree_label:hover {
    background: var(--panel-elevated) !important; /* #323252 */
    color: var(--brand-primary) !important; /* #667eea */
}

/* Marked/Selected nodes */
.jsontree_node_marked > .jsontree_label-wrapper > .jsontree_label {
    background: var(--interactive-primary) !important; /* #667eea */
    color: var(--text-primary) !important; /* #ffffff */
    box-shadow: var(--shadow-sm) !important;
}

/* === VALUE STYLES === */
.jsontree_value-wrapper {
    display: block !important;
    overflow: visible !important;
}

.jsontree_value {
    color: var(--text-secondary) !important; /* #b4b4c8 */
    vertical-align: top !important;
    display: inline !important;
}

/* String values - Success green for high visibility */
.jsontree_value_string {
    color: var(--state-success) !important; /* #4ade80 */
    font-weight: var(--font-weight-medium) !important; /* 500 */
}

/* Number values - Brand blue */
.jsontree_value_number {
    color: var(--brand-primary) !important; /* #667eea */
    font-weight: var(--font-weight-medium) !important; /* 500 */
}

/* Boolean values - Warning amber */
.jsontree_value_boolean {
    color: var(--state-warning) !important; /* #facc15 */
    font-weight: var(--font-weight-semibold) !important; /* 600 */
}

/* Null values - Muted but visible */
.jsontree_value_null {
    color: var(--text-muted) !important; /* #8a8aa0 */
    font-weight: var(--font-weight-medium) !important; /* 500 */
    font-style: italic !important;
}

/* === EXPAND/COLLAPSE BUTTON STYLES === */
.jsontree_expand-button {
    position: absolute !important;
    top: 50% !important;
    left: -24px !important; /* Better positioning */
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important; /* Larger for better visibility */
    height: 18px !important; /* Larger for better visibility */
    background: var(--panel-elevated) !important; /* #323252 */
    border: 1px solid var(--border-primary) !important; /* #3a3a5c */
    border-radius: var(--radius-sm) !important; /* 4px */
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    
    /* Custom icon using CSS */
    background-image: none !important;
    color: var(--text-secondary) !important; /* #b4b4c8 */
    font-size: 10px !important;
    font-weight: bold !important;
}

.jsontree_expand-button::before {
    content: '+' !important;
    display: block !important;
    line-height: 1 !important;
}

.jsontree_node_expanded > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button::before {
    content: '−' !important; /* Using minus sign instead of hyphen for better visibility */
}

.jsontree_expand-button:hover {
    background: var(--interactive-primary) !important; /* #667eea */
    border-color: var(--interactive-primary) !important;
    color: var(--text-primary) !important; /* #ffffff */
    box-shadow: var(--shadow-sm) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.jsontree_expand-button:active {
    background: var(--interactive-primary-active) !important; /* #4c5bc5 */
    transform: translateY(-50%) scale(0.95) !important;
}

/* === SHOW MORE INDICATOR === */
.jsontree_show-more {
    color: var(--text-muted) !important; /* #8a8aa0 */
    cursor: pointer !important;
    font-style: italic !important;
    padding: var(--space-xs) var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

.jsontree_show-more:hover {
    color: var(--text-primary) !important; /* #ffffff */
    background: var(--panel-elevated) !important; /* #323252 */
}

/* Hide show-more when expanded */
.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
    display: none !important;
}

/* === NODE STATES === */
/* Complex nodes (objects and arrays) */
.jsontree_node_complex > .jsontree_label-wrapper > .jsontree_label {
    cursor: pointer !important;
}

.jsontree_node_complex > .jsontree_label-wrapper > .jsontree_label:hover {
    background: var(--panel-elevated) !important; /* #323252 */
    border-radius: var(--radius-sm) !important;
}

/* Empty nodes */
.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label {
    cursor: default !important;
    opacity: 0.7 !important;
}

.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button,
.jsontree_node_empty > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
    display: none !important;
}

/* === OBJECT AND ARRAY BRACKETS === */
.jsontree_value_object b,
.jsontree_value_array b {
    color: var(--brand-secondary) !important; /* #764ba2 - purple brackets */
    font-weight: var(--font-weight-bold) !important; /* 700 */
    font-size: 1.1em !important;
}

/* === ACCESSIBILITY AND INTERACTION IMPROVEMENTS === */
.jsontree_label:focus,
.jsontree_expand-button:focus,
.jsontree_show-more:focus {
    outline: 2px solid var(--interactive-primary) !important;
    outline-offset: 2px !important;
}

/* === SCROLLBAR STYLING FOR JSON TREE CONTAINERS === */
.jsontree_tree::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.jsontree_tree::-webkit-scrollbar-track {
    background: var(--panel-primary) !important; /* #1e1e2e */
    border-radius: var(--radius-sm) !important;
}

.jsontree_tree::-webkit-scrollbar-thumb {
    background: var(--border-secondary) !important; /* #4a4a6c */
    border-radius: var(--radius-sm) !important;
    transition: background var(--transition-fast) !important;
}

.jsontree_tree::-webkit-scrollbar-thumb:hover {
    background: var(--interactive-primary) !important; /* #667eea */
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    .jsontree_tree {
        font-size: var(--font-size-xs) !important; /* 12px on mobile */
        padding: var(--space-sm) !important; /* 8px on mobile */
    }
    
    .jsontree_child-nodes {
        margin-left: var(--space-lg) !important; /* 24px on mobile */
        padding-left: var(--space-sm) !important; /* 8px on mobile */
    }
    
    .jsontree_expand-button {
        width: 16px !important;
        height: 16px !important;
        left: -20px !important;
    }
}

/* === INTEGRATION WITH APOC MODAL === */
/* Specific styling for the APOC details modal */
#apocDetailsJsonTree {
    background: var(--panel-elevated) !important;
    color: var(--text-primary) !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

#apocDetailsJsonTree .jsontree_tree {
    background: transparent !important; /* Use parent background */
    border: none !important; /* Modal container already has border */
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important; /* Let modal handle height */
    overflow: visible !important; /* Let modal handle scrolling */
    width: 100% !important;
}

#apocDetailsJsonTree .jsontree_child-nodes {
    margin-left: 20px !important;
    padding-left: 12px !important;
    border-left: 1px solid var(--border-muted) !important;
}

#apocDetailsJsonTree .jsontree_label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

#apocDetailsJsonTree .jsontree_value_string {
    color: var(--state-success) !important;
    font-weight: 500 !important;
}

#apocDetailsJsonTree .jsontree_value_number {
    color: var(--brand-primary) !important;
    font-weight: 500 !important;
}

#apocDetailsJsonTree .jsontree_value_boolean {
    color: var(--state-warning) !important;
    font-weight: 600 !important;
}

#apocDetailsJsonTree .jsontree_value_null {
    color: var(--text-muted) !important;
    font-style: italic !important;
}

#apocDetailsJsonTree .jsontree_value_object b,
#apocDetailsJsonTree .jsontree_value_array b {
    color: var(--brand-secondary) !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

#apocDetailsJsonTree .jsontree_expand-button {
    background: var(--panel-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#apocDetailsJsonTree .jsontree_expand-button:hover {
    background: var(--interactive-primary) !important;
    color: white !important;
    border-color: var(--interactive-primary) !important;
}

/* Modal specific responsive adjustments */
@media (max-width: 768px) {
    #apocDetailsJsonTree {
        font-size: 12px !important;
    }
    
    #apocDetailsJsonTree .jsontree_child-nodes {
        margin-left: 16px !important;
        padding-left: 8px !important;
    }
}

/* === ANIMATION ENHANCEMENTS === */
.jsontree_node {
    transition: all var(--transition-fast) !important;
}

.jsontree_node_expanded .jsontree_child-nodes {
    animation: expandFadeIn 0.2s ease-out !important;
}

@keyframes expandFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === HIGH CONTRAST MODE SUPPORT === */
@media (prefers-contrast: high) {
    .jsontree_value_string {
        color: #00ff00 !important; /* Bright green for high contrast */
    }
    
    .jsontree_value_number {
        color: #00bfff !important; /* Bright blue for high contrast */
    }
    
    .jsontree_value_boolean {
        color: #ffff00 !important; /* Bright yellow for high contrast */
    }
    
    .jsontree_expand-button {
        border-width: 2px !important;
    }
}

/* === PRINT STYLES === */
@media print {
    .jsontree_tree {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
    
    .jsontree_label,
    .jsontree_value_string,
    .jsontree_value_number,
    .jsontree_value_boolean,
    .jsontree_value_null {
        color: black !important;
    }
    
    .jsontree_expand-button {
        display: none !important;
    }
    
    .jsontree_child-nodes {
        display: block !important; /* Show all content when printing */
    }
}