/* Variables Tree Specific Styles */

.variable-item {
    font-size: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.variable-item:hover {
    background: var(--bg-interactive);
}

.variable-color-indicator {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 8px;
    border: 1px solid var(--border-default);
}

/* Solo Mode Icons for Variables */
.variable-item {
    position: relative;
}

.solo-mode-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    padding: 4px;
    border-radius: 3px;
    min-width: 24px;
    min-height: 24px;
}

.variable-item:hover .solo-mode-icon {
    opacity: 1;
}

.solo-mode-icon:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-10);
}

.solo-mode-icon.active {
    opacity: 1;
    color: var(--accent-error);
    background: var(--accent-error-10);
}

.path-mode-icon {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    padding: 4px;
    border-radius: 3px;
    min-width: 24px;
    min-height: 24px;
}

.variable-item:hover .path-mode-icon {
    opacity: 1;
}

.path-mode-icon:hover {
    color: var(--color-collection);
    background: var(--color-collection-10);
}

.path-mode-icon.active {
    opacity: 1;
    color: var(--color-collection);
    background: var(--color-collection-15);
}

/* Components Use Icon for Variables */
.components-use-icon {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    padding: 4px;
    border-radius: 3px;
    min-width: 24px;
    min-height: 24px;
}

.variable-item:hover .components-use-icon {
    opacity: 1;
}

.components-use-icon:hover {
    color: var(--color-orange);
    background: var(--accent-warning-10);
}

.components-use-icon.active {
    opacity: 1;
    color: var(--color-orange);
    background: var(--accent-warning-15);
}

/* Solo Reset Button Styling */
.solo-reset-button {
    margin: 0 0 16px 0;
    padding: 8px;
    background: var(--accent-error-10);
    border: 1px solid var(--accent-error);
    border-radius: 6px;
    animation: solo-reset-enter 0.3s ease-out;
}

.reset-solo-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-error), #ff6b6b);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px var(--accent-error-20);
}

.reset-solo-btn:hover {
    background: linear-gradient(135deg, #ff3333, #ff5555);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 75, 75, 0.4);
}

.reset-solo-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 75, 75, 0.3);
}

@keyframes solo-reset-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Solo Mode Active Styles */
.hierarchy-tree.solo-mode .variable-item:not(.solo-active) {
    opacity: 0.3;
}

.hierarchy-tree.solo-mode .variable-item:not(.solo-active) .solo-mode-icon {
    pointer-events: auto;
    opacity: 1;
}

.hierarchy-tree.solo-mode .variable-item.solo-active {
    opacity: 1;
}

.hierarchy-tree.solo-mode .variable-item.solo-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-error);
    border-radius: 0;
}

/* Variable children under styles */
.variable-child {
    font-size: 14px !important;
    padding: 8px 12px !important;
    opacity: 0.85;
    cursor: default;
    border-radius: 8px;
}

.variable-child:hover {
    background: var(--bg-interactive);
}

.variable-child-indicator {
    color: #6e7681;
    font-size: 12px;
    margin-right: 6px;
    font-family: monospace;
    line-height: 1;
}

.variable-child-label {
    font-size: 11px !important;
    font-weight: 400;
    color: var(--text-muted);
    font-style: italic;
}

.variable-child .type-indicator {
    width: 10px !important;
    height: 10px !important;
    margin-right: 4px !important;
    border-radius: 2px !important;
    border: 1px solid #444 !important;
}

/* Target button for navigating to variables environment */
.variable-target-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.variable-child:hover .variable-target-icon {
    opacity: 1;
}

.variable-target-icon:hover {
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
    transform: translateY(-50%);
}

.variable-target-icon:active {
    transform: translateY(-50%);
    color: #3db8ad;
}

/* Ensure variable child layout accommodates the target button */
.variable-child {
    position: relative;
    padding-right: 36px !important; /* Make room for target button */
}

/* Ensure variable children don't have other interactive buttons */
.variable-child .path-mode-icon,
.variable-child .solo-mode-icon,
.variable-child .visibility-checkbox {
    display: none !important;
}

/* Tree children container for variables with styles */
.variable-item .tree-children {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
    margin-top: 4px;
    background: none;
}

/* Variable-specific tree children adjustments */
.variable-item[data-style-id] .tree-children {
    border-left: 1px solid var(--bg-interactive);
    margin-left: 8px;
    padding-left: 4px;
}