/* Reusable Glass Panel effect */
.glass-panel {
    background-color: #102A26;
    border: 1px solid #1E3D38;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #1E3D38;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #2a554f;
}

/* Tree Node Styling */
.tree-node-wrapper {
    position: relative;
    padding-left: 36px;
    margin-bottom: 8px;
}

/* Vertical line connecting children */
.tree-node-children {
    position: relative;
    margin-left: 18px;
    border-left: 2px dashed #1E3D38;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Horizontal line pointing to node */
.tree-node-wrapper::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 26px;
    height: 2px;
    border-top: 2px dashed #1E3D38;
}

/* Clean up last child lines */
.tree-node-children>.tree-node-wrapper:last-child::after {
    content: '';
    position: absolute;
    top: 26px;
    bottom: -8px;
    left: -2px;
    width: 4px;
    background-color: #102A26;
    /* match background to hide the vertical dashed line connecting further down */
}

/* Card inside tree */
.tree-node-card {
    background-color: #0A1F1C;
    border: 1px solid #1E3D38;
    border-radius: 8px;
    padding: 12px;
    min-width: 300px;
    display: inline-block;
    vertical-align: top;
    transition: all 0.2s;
}

.tree-node-card:hover {
    border-color: #00B894;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.1);
}

/* Highlights */
.node-critical {
    border-left: 4px solid #FF7675;
}

.node-warning {
    border-left: 4px solid #FDCB6E;
}

.node-seqscan {
    border-color: #FDCB6E;
    box-shadow: 0 0 8px rgba(253, 203, 110, 0.1);
}

/* Progress bar background */
.cost-bar-bg {
    background-color: #1E3D38;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.cost-bar-fill {
    height: 100%;
    background-color: #00B894;
}

.cost-bar-fill.critical {
    background-color: #FF7675;
}

.cost-bar-fill.warning {
    background-color: #FDCB6E;
}