/* General List Item Styling */
/*.list-group-item {*/
/*    position: relative !important;*/
/*    display: block !important;*/
/*    padding: 0.75rem 1.25rem !important;*/
/*    border: 1px solid rgba(0, 0, 0, 0.125) !important;*/
/*    max-width: 300px !important;*/
/*    text-align: center !important;*/
/*}*/

/* Container Styling */
.container {
    margin-top: 30px;
}

/* Flexbox for better alignment and spacing between columns */
.row-group {
    height: 500px; /* Fixed height for the entire row-group */
    display: flex; /* Flexbox layout */
    overflow: hidden; /* Prevent scrolling at row level */
}

.col-3 {
    flex: 1; /* Let each column take up equal space */
    max-width: 25%; /* Max width for 4 equal columns */
    flex-basis: 25%; /* Ensure that each column takes up 25% of the available space */
    overflow-y: auto; /* Enable vertical scrolling for each column */
    height: 100%; /* Ensure the column takes up full height */
    padding: 15px;
    border-radius: 12px; /* Smoother corner radius */
    background-color: #f9f9f9; /* Light gray background for cleaner look */
    border: 1px solid #e0e0e0; /* Subtle gray border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Lighter shadow for minimal depth */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animations */
}

/* Apply hover effect on entire column */
.col-3:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Slightly darker shadow on hover */
}

/* List Styling */
ul.node {
    padding: 0;
    list-style: none;
    margin: 0;
}

/* Improved List Item Styling */
.list-group-item {
    padding: 12px 18px; /* Improved padding for better readability */
    background-color: #ffffff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid #e6e6e6; /* Soft gray border for separation */
    color: #444444; /* Neutral dark text color */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    font-family: 'Roboto', sans-serif; /* Use modern font */
    font-size: 16px; /* Adjust font size for better readability */
    cursor: pointer;
}

/* Hover effect for list items */
.list-group-item:hover {
    background-color: #f0f0f0; /* Soft gray hover background */
    color: #333333; /* Slightly darker text on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Selected list item styling */
.list-group-item.selected {
    background-color: #4caf50; /* Subtle green for selected item */
    color: #ffffff; /* White text for selected */
    border-color: #4caf50; /* Green border for selected */
}

/* Custom scrollbar styling for columns */
.col-3::-webkit-scrollbar {
    width: 8px;
}

.col-3::-webkit-scrollbar-thumb {
    background-color: #cccccc; /* Light gray scrollbar thumb */
    border-radius: 5px;
}

.col-3::-webkit-scrollbar-track {
    background-color: #f7f7f7; /* Light background for scrollbar track */
}

/* Add New Item Styling */
.add-new:hover {
    background-color: #d4d4d4; /* Slightly darker on hover */
}

.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}



.button-group {
    display: none; /* Hide by default */
    gap: 5px;
}

.list-group-item:hover .button-group {
    display: flex; /* Show button group on hover */
}

.delete-item, .assign-type-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.assign-type-btn {
    background-color: gray;
}

.delete-item {
    background-color: red;
}

/* Input field styling for edit mode */
.edit-input {
    display: none; /* Hide input by default */
    width: 100%; /* Full width for better usability */
}

/* Focus effect for keyboard navigation */
.list-group-item:focus {
    outline: 2px solid #4caf50; /* Green outline for focused item */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .col-3 {
        flex: 1 1 100%; /* Each column takes full width */
        max-width: 100%;
    }
}

.list-group-item.selected {
    background-color: #3490dc;
    color: black;  /* White text for better contrast */
    border-color: #007bff;  /* Bluish border for selected item */
}