.list-box {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.list-item {
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.list-item:hover {
    background-color: rgba(13, 110, 253, 0.1);
}

.list-item.selected {
    background-color: rgba(13, 110, 253, 0.2);
}

.list-item.hidden {
    display: none;
}

.list-item.drag-over {
    border: 2px dashed #0d6efd;
}

.drag-hint {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

/* Modal Error & Info Messages */
.modal-error-container {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.modal-error-container:not(.d-none) {
    animation: modalShake 0.4s ease-in-out;
}
.modal-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.modal-error-icon {
    width: 36px;
    height: 36px;
    background: #dc2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal-error-icon i {
    color: white;
    font-size: 18px;
}
.modal-error-title {
    color: #991b1b;
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}
.modal-error-message {
    color: #b91c1c;
    font-size: 14px;
    margin: 0;
    padding-left: 46px;
}
.modal-info-container {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.modal-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.modal-info-icon {
    width: 36px;
    height: 36px;
    background: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal-info-icon i {
    color: white;
    font-size: 18px;
}
.modal-info-title {
    color: #1e40af;
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}
.modal-info-message {
    color: #1d4ed8;
    font-size: 14px;
    margin: 0;
    padding-left: 46px;
}
@keyframes modalShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}